Lab 8 - Add Testing Jest
Kevan Y
Posted on November 13, 2021
Intro
For my eighth lab, I have to setup Jest to my text ssg project.
Jest is one of the best tool for testing, during my co-op I used Cypress for e2e testing.
Jest is super similar to Cypress. I had no issue learning it.
Process
Let's first install jest by running npm install --save-dev jest
.
Then add an script for easier for testing.
"test": "jest --verbose",
"test-silent": "jest --silent --verbose",
"test-watch": "jest --verbose --watchAll",
"test-watch-silent": "jest --verbose --watchAll --silent",
"jest": "jest --verbose --",
"jest-silent": "jest --silent --verbose --",
"jest-watch": "jest --verbose --watch --",
"jest-watch-silent": "jest --silent --watch --verbose --",
- To run all test case
npm test
- To run all test case in silent mode
npm test-silent
- To run all test case and watch for change
npm test-watch
- To run all test case in silent modeTo run all test case and watch for change in silent mode
npm test-watch-silent
- To run a specific test case
npm jest <test case name>
- To run a specific test case in silent mode
npm jest-silent <test case name>
- To run a specific test case and watch for change
npm jest-watch <test case name>
- To run a specific test case and watch for change in silent mode
npm jest-watch-silent <test case name>
I covered only unit testing for my case. All test case is located in test folder.
I first created a yargsChecking folder which contains all my unit test of yargs argurment checking.
I also created handlerChecking folder to cover everything in handler folder.
├───test
│ ├───handlerChecking
│ │ dataProcessing.test.js
│ │ generateHtmlFile.test.js
│ │ generateHtmlMenuTemplate.test.js
│ │ generateHtmlTemplate.test.js
│ │ getAllFiles.test.js
│ │ readConfiguration.test.js
│ │
│ ├───test_file
│ │ │ config.json
│ │ │ emptyConfig.json
│ │ ├───folder_with_md_txt
│ │ ├───folder_with_no_md_txt
│ │ └───folder_with_random_files
│ │
│ └───yargsChecking
│ configurationCheck.test.js
│ inputCheck.test.js
│ isFile.test.js
│ langCheck.test.js
│ outputCheck.test.js
│ stylesheetCheck.test.js
Test case format
describe('...', () => {
it('...', () => {
});
});
One thing I encounter and challenging to do is to check for correct content in the generated HTML file. The space and tab weren't perfectly correct. I had to run the test several times and adjust the test case.
After finishing writing all my test cases. I update contributing.md
to help other contributors that text-ssg has a testing portion before creating a PR.
Conclusion
Testing is an essential part of software development, It helps to prevent some bugs. But it will always have edge case bug that might not be found here yet. I notice Cypress and Jest are very similar. The learning curve is not too hard.
Issue: https://github.com/Kevan-Y/text-ssg/issues/26
Commit: https://github.com/Kevan-Y/text-ssg/commit/2ca3d50f599b95620c1d28782fac9af9275746b8
Posted on November 13, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.