Unit Testing With Jest in Javascript, Part I

Everyone talks about the advantages of being able to write tests and while I have learned how to read tests, I have never really taken the time to write tests for any of my projects. Tests are important for a wide number of reasons: they allow us to quickly identify issues within our code, they also ensure we are properly separating our functions to only perform one job, and they help provide a clear understanding of what the code should do, among other things. So I decided to spend today learning the ins and out of using Jest and creating test cases so that I may add unit tests to my projects.

With that being said, today I am going to take you through a little walk through of getting started with unit testing and hopefully by the end of this you will be able to go back to some of your projects and add some tests of your own.

First things first, I highly suggest you take a look at the docs for Jest. They are pretty beginner friendly and straight forward. Next, you can install Jest by running either: yarn add — dev jest OR npm i — save-dev jest (please note, it should be *dash dash*dev/*dash dash*save). You must have a package.json file in order to use Jest. If you do not have one, you can run npm init.

Once your environment is set up with Jest, you can either start off by writing some tests for functions you intend to write, or if you are adding tests to an existing project, write out tests for the functions you wish to test. This leads me to the question of “what should I be testing?”. Some common rules for understanding what to write tests for are as follows: (1) your test should only be testing for one thing, (2) look for parts of your code that require a specific outcome, (3) write test cases for any bugs you may encounter. These are just a few points to get you thinking.

Let’s go over some common naming rules. You want a test file for each file you have in your code. The test file name should match the code file name with the exception that it should end in “.test.js”, as you can see in the following photo. Just as you want functions to be separated between files, your tests should follow the same rule.

Once you have written your function, this could be just initializing a function or actually writing the entire function out, you want to make sure you are exporting the function so that it may be then imported into out test file for use.

Once you have a function in mind to test, you will go to your test file and import the file you are testing. To create a test you will use a Jest function called test(). This function takes in 2 arguments, the first is a string stating what is being tested, this will show in the terminal when you run your tests, second is an arrow function containing matchers that will test your code. A matcher is Jest code that tests your functions for specified values. You can find a complete list of the provided matchers in the Jest documentations; today we will go over a few. For our above example, if we pass in values 1 and 2 to the sum function we expect it to be 3. What does that look like in test code?

So now that you have written your first test code, how do you run it? In your terminal you can run npm test and the test case will run. After running, you will either see “failed” in red or “passed” in green, along with the string argument you passed to your test and the amount of time it took to execute the function.

And it is that simple! The hardest part is probably knowing what to test, but like with everything in life, practice makes perfect. The more you code and write tests the better understanding you will have of what to test. And even if you don’t catch all edge cases, you can always add more tests later on when you run into bugs.

So, above we used the “toBe” matcher, this is best used for functions that have an exact equality. This also takes into account where in space it is located, therefore if you need to check for the value of an object this will not work. At this point, you will need to use the “toEqual” matcher.

This duplicate function, in a sense, will return the same value that was passed in as an argument, but what is being returned actually takes up a different space in memory. Therefore, if we used “toBe” the test would fail, hence why we use “toEqual below.

Another matcher that is often used is when we want to be sure something does not equal a particular value. To do so, we can add “not” to our “toBe” matcher as shown below.

Today I just wanted to give a slight introduction to testing with Jest in Javascript. There are many useful matchers that can be used with Jest and I highly recommend looking over them and learning how you can use them in your projects. Next week we will go over using Jest with React. As projects get more complicated, you may need to create mock functions to test your code base. This takes a little time to get used to, but will pay off in the long run and save you time when debugging.