Creating Tests for Octo

Hello! Welcome to another blog post about my open source project 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. 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.

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!