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!