Setting up unit testing

• nextjs
• reacttestinglibrary
• jest
• testing
• unittesting

Introduction

Automated testing is a must-have in every project. It helps make sure that the piece of code we wrote works as intended. I personally think that even simplest suite of tests with just a few of them is better than no testing at all. Maybe it takes some more, because we have to write those tests or update existing ones when we make changes to the component they are testing. I also had countless situations when unit tests saved me from pushing changes to code, which I accidentally broke in some edge cases. I simply forgot about them when I was implementing the changes and that happens. That's yet another good reason to have a decent set of automated tests. Today we are going to set up the testing environment and write tests for the code we wrote so far in Creating an articles service.

Installing necessary packages

Basically what we are going to do is to follow steps described in Next.js documentation.

So we start by installing few packages we are going to use.

As you can see we are installing React Testing Library, which is a very popular UI elements testing library developed by React's team, and jest which is of most popular JavaScript testing library. We also install which is required by jest to read typescript config files.

Upgrading yarn to

To make our life easier and have access to commands like we are going to quickly jump from yarn in version to the newest . To do so we run in the terminal, and it should be all up and running. But look at the file now. It is empty, because initializing newer version of yarn for some reason (at least at the time of writing this article), sets up a new file. I used the GitHub tools in VS Code to see the diff of the and I just copied back everything from the old file to the new one leaving only the lines which we didn't have before. After that run to install all packages,

Configuration

Now when we have everything installed we need to create configuration files.

We can actually use a command to initialize the jest config.

Here are the choices I made.

We are asked few questions and after that we have . We need to update it with the configuration described in Next.js documentation.

Furthermore, we need to create to add configuration for React Testing Library.

And this is all we had to do to be ready to test run it. When we were initializing jest, there were new script added to our file which will run testing for us. So let's use this command and see what happens.

We also want to add which will keep the tests running on each file change to monitor the changes we are making.

Doesn't look impressive, because we don't have any tests to run yet. But we are about to change that. Before we do this, it is a good time to save what we have so far.

Writing unit tests for the files we have so far

The convention we are going to follow is to name the tests files the same name the main file has, but we are going to add at the end so for example . We put test files in the same directory as the main file.

But we will need some testing data first. We create few directories and files in as shown at the picture below.

Only the file has content and all the rest are empty.

With this, we are good to go.

We want to cover all the public functions in the service to make sure everything works as expected.

Here we have 4 tests which are testing all of our public functions we expose from class. They are pretty simple, and they are not the most sophisticated you can get but in our case I think they are good enough, to assure the most basic functionality of the service.

Next on our list is . We are again using the same test files we have created. The same as before we want to have at least one test for each public methods.

So we have one test for each of the public methods.

Now the quick one as the class has just two methods to cover.

We wrote actually 3 separate tests for because it has few use cases and I wanted to cover them all.

Running the tests and seeing the results

We can now once again use to run all of our test.

As you can see everything is working fine. I have been writing these test with running, and it was checking all the changes as I went, and it was not passing from the start. Do not expect to write tests that are passing from the first trial. Actually it is a good practice to write first the test which fails to see if what we are checking would be caught by the test. I have seen a lot of test which were checking something, and they were always passing, but the reason was that they were not checking properly and whatever result the tested piece of code would return it will satisfy the test condition.

Now we commit the changes, and again, please open new PR on GitHub and merge the changes back to master.

Summary

So we are basically done with what we were about to do in the scope of this article. We are not going to write any tests for the files, as I think the best will be to test the pages visible to the end users with the e2e testing which we will set up in a separate article as this is a whole new topic. But you might ask why do we need the React Testing Library for? It will be used to test the UI component we will be creating in the next parts of this series.

I really encourage you to play with this, find your own way of setting things up, of how much tests you are going to write and how carefully you want to test each piece of your code.

Please do not reject the idea of automated testing. It might seem like a waste of time, but hear me out - the time saved now will repay sooner or later with every new bug you will introduce to the code-base because of some piece of functionality broken after updating something else. At the beginning of a project, especially when you assume the project to be small and simple, this might not seem like a good place to add testing, but after few months of work you will thank yourself seeing failed tests caught something you were not aware of.

And this is all for now. I want to invite you to the next part where we are going to start Creating Article component. It's time to make our blog look pretty.