Testing my Static Site Generator with Jest
Tags: opensource, javascript, programming, testing
Published: 2021-11-13 04:50:56

Up until now, I've focused on adding new features and code to my [Static Site Generator(SSG)](https://github.com/MizuhoOkimoto/pajama-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](https://jestjs.io/).

## 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. 
```js
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.
```sh
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:
```sh
------------------|---------|----------|---------|---------|-------------------
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 :pushpin:
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.
```sh
  ● 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👩‍💻