JavaScript testing with Jest
Tags: javascript, tutorial, testing, beginners
Published: 2022-11-13 09:42:54

##Hello everyone!

Today, I added testing to my SSGulnur project.

###Jest 🃏

I chose [Jest](https://jestjs.io), as it is one of [the most used testing frameworks](https://developer.okta.com/blog/2020/01/27/best-nodejs-testing-tools) for JavaScript and most of my tool's logic is written in JS. It was developed by Facebook and is [open-source](https://github.com/facebook/jest). Jest also has CLI option for checking coverage which is very great, it shows which lines of code have been tested and not and prints a beautiful report. 

###Set-up 🙌

Working with Jest is quite easy even for beginners (thanks to their well-written [documentation](https://jestjs.io/docs/getting-started)). 

First, I had to install it in my project. Can be done by running:
```
npm install --save-dev jest
```

Then, I added the following scripts to my [package.json](https://github.com/gulyapulya/SSGulnur/blob/main/package.json#L9-L12) to be able to run then through npm:
```
 "scripts": {
    "test": "jest --",
    "test:watch": "jest --watch --",
    "coverage": "jest --collect-coverage --",
```

I also updated my [CONTRIBUTING.md](https://github.com/gulyapulya/SSGulnur/blob/main/CONTRIBUTING.md), so the future contributors find instructions for testing.
```
The Jest Framework is used for testing in this project.

You can use the following commands:

'npm test' for running test
'npm test example-test' for running only the tests that were specified with a pattern or filename (e.g. npm test createHTML)
'npm run test:watch' for running tests related to changed files based on git (uncommitted files)
'npm run coverage' for checking the coverage of the tests
```

###First unit tests 🥇

Unit tests allow to check a small pieces of logic independently. I had to restructure my code by breaking it into even smaller pieces so that I can work with more focused functions. 

I added [test](https://github.com/gulyapulya/SSGulnur/tree/main/test) folder to hold all my sample test files and tests. I used the snapshots to check if the output of the functions is as expected, because I work with big HTML files which would be hard to program manually.

Here is my [test file](https://github.com/gulyapulya/SSGulnur/blob/main/test/unit/createHTML.test.js):
```
const { createHTML } = require('../../src/helper');

describe('createHTML', () => {
  test('.md files have to properly transform into HTML', () => {
    expect(createHTML('test/sample.md')).toMatchSnapshot();
  });

  test('.txt files have to properly transform into HTML', () => {
    expect(createHTML('test/sample.txt')).toMatchSnapshot();
  });

  test('Style should change if given with .md file', () => {
    expect(
      createHTML('test/sample.txt', 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css')
    ).toMatchSnapshot();
  });

  test('Style should change if given with .txt file', () => {
    expect(
      createHTML('test/sample.txt', 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css')
    ).toMatchSnapshot();
  });
});
```

###Conclusion 💡

I am a newbie in testing and before it would get me very frustrated, as I used to think that it was a lot of unrewarding manual work. However, now, I understand its importance and learn about it more and more. Apparently, it is also not that hard to start. 😊