Understanding how react-testing-library works with Kent C. Dodds

Test JavaScript with Jest

Add Babel Integration with Jest

Track project code coverage with Jest

Use Jest's Interactive Watch Mode

Use Jest's Snapshot Testing Feature

Use Test Driven Development

Testing JavaScript with Jest

Let's learn how to unit test your JavaScript with [Jest](http://facebook.github.io/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.

[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.

Course

Testing JavaScript with Jest

Test JavaScript with Jest

Share this video with your friends