Testing my Static Site Generator with Jest

Up until now, I've focused on adding new features and code to my Static Site Generator(SSG), but this time I've implemented a test. Testing helps you manage and evolve your software.
I've learned about Jasmine, Karma, and Mocha in the past, but my SSG uses simple JavaScript so I decided to do a unit test by using Jest.

Installation

I already installed npm, so I used npm i jest --save-dev to install Jest.

I also added the following npm scripts to run a test on the command line.

"scripts": {
    "test": "jest --",
    "test:watch": "jest --watch --",
    "coverage": "jest --collectCoverage --"
}

Jest test

First, I created a test file and wrote about when the style path is not specified.

describe("Argument match tests", () => {
  test("no specified style", () => {
    expect(
      tempGenerator("", "language", "title", "titleName", "text")
    ).argv_s = `<link rel="stylesheet" type="text/css" href="please_add_your_css_path" />`;
  });

describe can create a block that groups some related tests, so I had two blocks: "Argument match tests" and "Function argument tests", for the file containing the HTML template.
Jest requires using test which is the actual test block, so I wrote what to expect to get as an output inside of it.
I added other tests such as: no arguments, missing one argument, argument is a null, and so on.
When I worked on missing one argument my test didn't pass, and I had to change my template JavaScript file and add the code let body = text ?${text}: "";.

Once all the tests passed, I got this screen.

PS C:\Users\Mizuho\Desktop\OSD600\pajama-ssg> npm test
> node-ssg@1.0.0 test
> jest --
 PASS  ./tempGenerator.test.js
  Argument match tests
    √ no specified style (2 ms)
    √ no specified laungage (1 ms)
    √ no specified title
    √ no specified text (1 ms)
  Function argument tests
    √ input all arguments (1 ms)
    √ missing style
    ...
    √ missing all arguments
    √ null arguments
Test Suites: 1 passed, 1 total
Tests:       12 passed, 12 total
Time:        1.046 s
Ran all test suites.

Coverage

I tried Coverage, which I added to the package.json script to make sure it contained as many code path test cases as possible.(npm run coverage) By running Coverage, you can see how much of the implementation is running during the test run, and more importantly, what parts are missing. I had the following result:

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------------|---------|----------|---------|---------|-------------------
All files         |     100 |      100 |     100 |     100 |
 tempGenerator.js |     100 |      100 |     100 |     100 |
-----------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       12 passed, 12 total
Snapshots:   0 total
Time:        0.934 s, estimated 1 s
Ran all test suites.

Got stuck 📌

I wanted to try to test if my file system passes the test, so I attempted to implement mock and also _mock_ folder and fs.js file inside. However, I had this error and it didn't work.

  ● Test suite failed to run
    TypeError: Cannot read properties of undefined (reading 'forEach')
      54 |
      55 | // Read files/lines
    > 56 | argv.i.forEach((input) => {
         |        ^
      57 |   if (!fs.existsSync(input)) {
      58 |     console.error("Input is not a file or directory!");
      59 |     return;

I searched around but I couldn't find any solutions, I just found npm mock-fs is one of the options to use mock easier. I hope I can figure it out.

Conclusion

I have done testing for React components before, but I received feedback that testing wasn't enough. I learned testing is very important but difficult depending on the situation. I only added small unit testing this time, so I would like to try integration testing too. I'm going to be a Quality Assurance Analyst as a Co-op from January, so I will definitely continue to work on this👩‍💻