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

    Use Jest's Interactive Watch Mode

    Kent C. DoddsKent C. Dodds

    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.

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

    Discuss

    Discuss