JavaScript testing with Jest

Hello everyone!

Today, I added testing to my SSGulnur project.

Jest 🃏

I chose Jest, as it is one of the most used testing frameworks for JavaScript and most of my tool's logic is written in JS. It was developed by Facebook and is open-source. 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).

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 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, 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 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:

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. 😊