Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 962 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Test JavaScript with Jest

4:04 JavaScript lesson by

Let's learn how to unit test your JavaScript with Jest, a JavaScript unit testing framework from Facebook. We'll install and optimize Jest for this project and see how quick and easy it is to get things going with Jest.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Let's learn how to unit test your JavaScript with Jest, a JavaScript unit testing framework from Facebook. We'll install and optimize Jest for this project and see how quick and easy it is to get things going with Jest.

Avatar
Kitze

Nice intro. It would be great if you do another tutorial for using Jest for testing React components.

In reply to egghead.io
Avatar
Kent C.

Thanks! There's definitely more to come!

In reply to Kitze
Avatar
Rolando

Amazing, you think there will be a lesson on how to use mocks function?

In reply to egghead.io
Avatar
Kent C.

Quite possibly. I'm just doing these as I have the inclination and time :-)

In reply to Rolando

Here in this project, we have a module called sum.js. Inside of this module, we're exporting a single function that accepts two arguments, A and B, and sums those together. We're going to write some tests for this module using Jest.

The first thing that we're going to is npm install as a dev dependency the jest-cli. While that's installing, we'll go ahead and add a new file called sum.test.js. Inside of this file, we're going to say const sum = require sum.

We're going to use the test global that Jest provides for us to say that this module adds one plus two to equal three. Inside of this test, we're going to make our assertion with the expect global that Jest is going to provide for us. We'll expect the sum of one and two to be three.

Now, we'll go to our package.json, and we'll verify that our dev dependencies had jest-cli added. The current version is 15.1.0. With that installed, we can look in our node modules directory, in the bin directory, and we'll see that Jest is available there.

Because the way that npm scripts work, we can use this Jest binary to run our test in our npm scripts. That's what we'll do. We'll go to our test script here, and we'll simply say Jest. We don't actually need to provide any sort of configuration or anything of any kind because we're following the test convention for our file name.

There are couple file name conventions that you can follow. You can say .test.js. You can also say .spec.js, or you can put your test inside of a directory called test.

Let's go ahead and run this test with npm run test, or we can shorten that with npm test, or even shorter npm t. All three of those will work just as well. We'll see that the Jest script is run, and our test passed.

There's one other thing that we're going to need to take into consideration for our test. Jest does a lot of cool things for you, and one of those things is, it simulates a browser environment using JS DOM.

Inside of our test, we can say console.log window. We're in a node environment. We're running this on the command line, running this through node. If we run npm t, we're going to see that window is actually an object that exists on the global. We can actually reference it and use it.

We want to avoid this because that's extra weight in our test, extra memory. It takes some extra time to allocate for these objects. We're going to configure the test environment for Jest.

To do that, we'll go here in our package.json, and we'll add a property called Jest. This will be an object that has a test environment property. This will specify as node.

Now, it doesn't need to simulate the browser environment. If we re-run our test again with that console.log window, we're going to see a reference error because window is not defined.

That's great, that we don't want it to be defined. We'll go ahead and remove it, save our test, and re-run. Everything is working swimmingly.

Let's go ahead and review what we've done here. Originally, we had this sum module. We installed as a dev dependency jest-cli, which is currently at 15.1.0. With that installed, we created a sum.test.js file that required the module we're going to be testing.

We used the test global and the expect global to write out our assertion here. In our package.json again, we updated the script for test to use the jest binary that was installed. We ran the test, everything works great.

We can configure Jest to treat our environment as a node environment because we don't need it to simulate the browser. That's how you set up Jest.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?