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

Jest ships with a pretty amazing interactive watch mode which you can initiate with `jest --watch`. Let's learn about the bits of interactivity and how this can really improve your workflow.

[00:00] For this lesson, I'm going to be interacting with Jest-Tli quite a bit. I've set up my Jest command to be mapped to the local, installed Jest binary. Jest has an amazing interactive watch mode. To start Jest in watch mode, you simply pass it the watch flag, like so.

[00:13] By default, Jest will only run testsfound related to files changed since the last git commit. This is a pretty amazing feature, especially when you're developing in a large codebase with lots of tests. Let's explore this feature a little bit.

[00:27] Let's change the getauto.test.js file by adding a single line and saving that. You'll see that it runs the getauto test. If we revert that and instead add a line to the getauto module itself, and make a change then save that, the getauto test will be run here as well.

[00:43] This getauto module depends on the sum module. Let's go ahead and make a change to that module, by replacing + with - and hit save. This will result in Jest identifying two test suites to run.

[00:56] One of those is the sum.test.js file, and the other is the getauto.test.js file. This is possible because Jest is intelligent, and after identifying the files that changed, it walks the dependency tree for the test files to determine the relevant test to rerun.

[01:10] Let's go ahead and fix sum to make everything happy again. Now if we run getlog, we'll see that my last commit out of the getauto module, and its test. By default, Jest references the gethead to find the files that have been changed.

[01:23] But if we want to have it run tests that were affected in the last commit, then we can specify the last commit flag to get those, like so.

[01:32] Sometimes you want to run all of the tests. To do this, you simply press A to run them, as it says here. Then Jest will run all of the tests it finds in your project, just as if we had run our test script.

[01:42] Note that this puts you in a Run All mode, where any change will result in running all of the tests. For example, none of the tests in this project depend on the subtract module, but all the tests are rerun when I save a change to that file, like this.

[01:57] You can switch back to the Only change mode by typing the letter O as it says here. If, for some reason, Jest doesn't rerun your test for you, then just hit the enter key, and that will trigger a rerun, like this.

[02:09] Let's go ahead and start writing new tests. We will create a new file to test this subtract module, and we'll call it subtract.test.js. With that new file, our tests are rerun, and Jest blows out because this file has no test in it, so let's put one in there.

[02:22] We'll just copy the sum test and change some bits here. We'll rename sum to subtract, and we'll say it subtracts 3-2=1. We'll save our file, and now our tests are passing.

[02:36] Let's say we want to run the sum test, but not the entire test base. To do this, we can hit the P key to specify a regex for a file name, like this. We are now in pattern mode.

[02:48] We can change the pattern to match both the sum and subtract tests by specifying this regex with source/s.start.test.js. Now, as I make changes to the files, only tests matching this pattern will be rerun. Finally, to exit watch mode, we simply hit the Q key, and that will end the process.

[03:07] To wrap up, let's add a script called watch:test and specify Jest with the watch flag. Now, if we run mpm run watch test, that will start the interactive watch mode.

Course

Testing JavaScript with Jest

Use Jest's Interactive Watch Mode

Share this video with your friends