Those of us who have worked with JavaScript testing APIs on various platforms shudder every time we think about configuration issues. Whether it’s the test runner, the proper testing API, picking the appropriate mock/spy/stubbing strategy, dealing with async code, it’s always a tad complicated. However, some of my latest frustrations (self-inflicted, of course) center around running Jest tests for React projects.
In particular, I’m talking about running Jest tests with an IDE and using its debugging facilities when talking to a training class. There is nothing more frustrating than trying to run a testing API and getting a super cryptic error, or having your breakpoints ignored. This article will attempt to help you on this score (if, in fact, you are using Jest with Create-React-App and WebStorm, anyway).
Problem #1: Why can’t you launch my tests???
Ever get this gem of an error message:
react-scripts --config=setupTests.js 08-forms-solution Usage: test.js [--config=] [TestPathPattern] ... herein follow the Necromicon of usage info for the react-scripts command ...
It took me about two days to figure it out. For giggles, go ahead and click on the yellow command invocation and see it’s really trying to run:
export PATH=/home/krimple/.nvm/versions/node/v11.4.0/bin:$PATH &&
/home/krimple/.nvm/versions/node/v11.4.0/bin/node --require
\"/mnt/c/Program Files/JetBrains/WebStorm 2018.3.1/plugins
/JavaScriptLanguage/helpers/jest-intellij/lib/jest-intellij-stdin-fix.js\"
/mnt/c/Users/kenri/projects/Training/react-fundamentals-training/labs/words/node_modules/react-scripts/scripts/test.js
--config /mnt/c/Users/kenri/projects/Training/react-fundamentals-training/labs/words/src/setupTests.js 08-forms-solution
--colors --reporters \"/mnt/c/Program Files/JetBrains/WebStorm 2018.3.1/plugins/JavaScriptLanguage/helpers/jest-intellij/lib/jest-intellij-reporter.js\"
--verbose
Usage: test.js [--config=] [TestPathPattern]
If you read all of that, congratulations. TL;DR: turns out the JetBrains Jest plugin gets executed, which runs the react-scripts/test.js script, and it passes it a custom Jest reporter. Then it tells it to use the config settings in our src/setupTests.js file. The problem here is that the parameter for the setupTests.js injection is already done within the react scripts test runner, and so it seems to confuse the test runner.
Easy fix. Remove the configuration file setting from the test setup dialog. Suddenly that usage error goes away.
Get Intellisense Support for React, Jest, and other APIs
The WebStorm IDE uses TypeScript types to inspect and provide code fill-in (intellisense) support at development time. If you add the following to your package.json file, you’ll have a lot of useful info in the IDE:
"devDependencies": {
...
"@types/jest": "^23.3.12",
"@types/react": "^16.7.18",
"@types/redux": "^3.6.0"
},
Or just use TypeScript…
Run Tests by File Path
Want to run a set of tests by a unique directory name? Easy. Just add the directory name to the Jest Options setting in the Jest Runner. It will then only run that directory’s tests and below. This works on command-line Jest as well.
Debug Jest Tests
There are some maddening problems with getting Jest to stop when running in a debugger from the command line. However, IntelliJ seems to have licked this with the Jest plugin. Once you create your launch configuration, just click the debug icon. I’ve tried setting several breakpoints in different files, and it seems to always work. The key here is that they add --runInBand and also properly launch the with the right debugging configuration settings. Unpacking what it sends off:
export PATH=/home/krimple/.nvm/versions/node/v11.4.0/bin:$PATH &&
/home/krimple/.nvm/versions/node/v11.4.0/bin/node
--inspect-brk=62420
--require \"/mnt/c/Program Files/JetBrains/WebStorm 2018.3.1/plugins/JavaScriptLanguage/helpers/jest-intellij/lib/jest-intellij-stdin-fix.js\" /mnt/c/Users/kenri/projects/Training/react-fundamentals-training/labs/words/node_modules/react-scripts/scripts/test.js
08-forms-solution
--runInBand
--colors
--reporters \"/mnt/c/Program Files/JetBrains/WebStorm 2018.3.1/plugins/JavaScriptLanguage/helpers/jest-intellij/lib/jest-intellij-reporter.js\" --verbose
Yuck! However, some key settings:
--inspect-brk=62420– kicks off the debugger and pauses immediately. Likely the JetBrains Jest plugin intercepts this and launches tests in the right order.--runInBand– forces the test runner to run a test at a time, so that they run in the same Node process. This is what makes it possible to break on the debugger line.
I can tell you that even with the --inspect-brk and --runInBand settings and running Chrome’s debugger with chrome://inspect, I can’t get the react-scripts commands from “Create React App” to stop on a breakpoint lately. I’m not alone, and assume at some point the docs will be updated, but if you really need to debug right now, consider looking at WebStorm for your IDE and making sure NOT to set the Configuration File parameter…