Debugging tests in WebStorm and create-react-app

TL;DR: Here is a GitHub repo that has a create-react-app project with necessary dev dependencies and the WebStorm run configurations. npm install and open the project in Webstorm. You can set a breakpoint in App.test.js and run the Tests configuration in debug mode to try it out.

(This has only been tested with Node.js 6.9+ and WebStorm 2016.3. Sorry if the project doesn’t load correctly — Webstorm can be finicky about .idea files)

I’ve been exploring React lately. While there are lots of boilerplates and starter resources, I’ve been using create-react-app, a bootstrapping tool from the React team.

If you are new to create-react-app, I suggest you start here (more details are here).

I use WebStorm for JavaScript development and would like to use its debugger to help diagnose test failures. However, given the (somewhat) opaque “magic” that create-react-app provides, it wasn’t obvious how to do this.

While you can eject your project and take over the configuration, I’ve been trying to stay within the defaults and boundaries of create-react-app. So I was looking for a solution that wouldn’t require I eject the project.

I broke the problem up into two pieces:

1. Getting ES6 (or ES7) code running in the WebStorm debugger
2. Getting a test suite to run in the debugger

Project Dependencies

npm install --save-dev babel-cli babel-preset-es2015

Running Es6 Hello World In the WebStorm Debugger

The latest version of Node will run many ES6 features, but module imports/exports don’t work (I am referring to the ES6 syntax, not use of require). You can read about this (here, here, …here too), but the short version is the spec for handling imports isn’t finalized — so Node doesn’t support it yet. But most React samples, such as the ones in create-react-app, use imports.

Babel includes babel-node, which handles transpiling and can be used as the node interpreter in WebStorm, but without some tweaks, it won’t handle imports. I found a YouTube video which showed how to set things up.

In a WebStorm Run configuration (node.js)

• set babel-node as node interpreter
• add — presets=babel-preset-es2015 as a node parameter
• set helloworld.js (or similar) as JavaScript file

You can then set a breakpoint in helloworld.js and run the configuration in debug mode in WebStorm. A minor victory. :)

Testing with create-react-app

The README helps you setup your tests and a bootstrapped project includes a sample test, App.test.js. But this uses the “magic” of react-scripts — how do i get this all to run in WebStorm?

If you dig a bit into the referenced files in package.json, scripts/test, you’ll find that node_modules/react-scripts/scripts/test.js is the runner for the tests. We can set this as our JavaScript file in our run configuration. Furthermore, we need a few parameters, as noted by the script.

• add — env=jsdom as an application parameter
• add CI=true as an environment variable (so all tests will run instead of running in watch mode)

The final config should look like this:

Set a breakpoint and debug away!

Ideally, you wouldn’t need to debug your tests, i.e. a combination of appropriate expects and precise tests would indicate the problem, but sometimes things aren’t clear and running in a debugger helps. Anyway, I like the option.

You can download this GitHub repo and try for yourself.