This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Test JavaScript with Jest

    Kent C. DoddsKent C. Dodds

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 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.

    00:14 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.

    00:34 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.

    00:57 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.0With that installed, we can look in our node modules directory, in the bin directory, and we'll see that Jest is available there.

    01:15 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.

    01:37 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.

    01:48 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.

    02:03 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.

    02:13 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.

    02:32 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.

    02:43 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.

    02:57 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.

    03:07 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.

    03:15 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.0With that installed, we created a sum.test.js file that required the module we're going to be testing.

    03:37 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.

    03:56 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.

    Discuss

    Discuss