Lab 8 - Add Testing Jest

pandanoxes

Kevan Y

Posted on November 13, 2021

Lab 8 - Add Testing Jest

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 --",
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Test case format

describe('...', () => {
  it('...', () => {

  });
});
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
pandanoxes
Kevan Y

Posted on November 13, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related