Creating Tests for Octo
Tags: opensource, javascript, webdev, tutorial
Published: 2021-11-17 00:54:10

Hello! Welcome to another blog post about my open source project [Octo](https://github.com/LuigiZaccagnini/octo). If you're new to my blogs, Octo is an open source static site generation tool created by me! Today I am going to review the process of writing tests and explain how I implemented them in my project. 

## What Framework to Use?
The framework I picked for my project was [Jest](https://jestjs.io/). I picked Jest because it is the framework I am most comfortable with and it is very easy to setup in your project! 

## Jest Setup
To add Jest to your project, run `yarn add --dev jest` or `npm install --save-dev jest`. Once Jest is installed, open your `package.json` and create a new npm script `"test":"jest"`. Now whenever you want to run your tests all you need to do is run `npm test`. I strongly recommend storing all of your test files in your root directory in a test folder. It will help keep your project nice and organized.   

## Writing Tests 
Everything up until this point was simple for me. Once I started writing tests I ran into a bunch of errors that confused me. Good thing I ran into those so you can now learn from my mistakes! To start off, create a file in the format of `myFileThatNeedsTesting.test.js`. Once done, open the file and add `/* eslint-disable no-undef */` at the top. If you do not do this, eslint will think you're making a bunch of errors and might make you a little confused. 

### Writing a Matchers
```
test('Checks if it can add a directory', () => {
  expect(ff.addDirectory('./dist')).toBeUndefined();
});
```
A matcher is a test that checks its value to see if it is correct. As you can see above, I created a test to check if my `addDirectory` function would return undefined. I check for undefined because the `addDirectory` function will only return errors. So if I do get anything, there is a problem. This is a very basic matcher but, if you're interested in more matcher options check [here](https://jestjs.io/docs/using-matchers). 

### Snapshots
```
it('Markdown to HTML renders correctly', () => { 
ff.markdownToHTML('test/markdownTest.md').then(html => {
  const tree = ReactTestRenderer
    .create(html)
    .toJSON();
  expect(tree).toMatchSnapshot();
  });
});
```
Snapshot testing was my favourite part! I found it really useful to compare test render code with the correct code. Above I use my `markdownToHTML` function to convert a markdown file and then make sure, it matched the snapshot. At first I was having problems with this because my functions could not find the file. I eventually figured out that I need to path from the root of my project. Once I had that working, the file was correctly displaying the correct information.

### Generating a Coverage Report
Generating a coverage report is very simple and gives you a lot of information about how and where you can write more tests for your code. To generate the report use `yarn test --coverage`. After running that command you should see a folder with all the information.  

## Conclusion 
Setting up tests for my code was a very fun process. It taught me the importance of testing code as well as a different approach on how to write code. I have attempted to write tests for code before but would always get stuck. Now that I finally have learned how to write tests properly, I will continue to write tests for future projects and encourage others to do the same!