Watching tests — Mocha & Babel & React

Let me share something which took me a while to figure out, although it should be quite straightforward.

I was setting up a new project using React & Babel, and also Mocha as a test-runner. Everything goes easy until you want to start doing some TDD.

Then I experienced that Mocha is only watching the test files themselves, and not any of the changes made to my component files.

Let’s say you start mocha:

$ mocha --watch \
    --compilers js:babel-core/register \
    --require ./.mocha-setup.js \
    --recursive ./src/**/*test.js

We are using the babel-register which hooks into Node’s require to transpile JSX on the fly.

Let’s say we have the two following files Button.jsx and Button.test.js:

The tests are only reflecting changes in Button.test.js, if I change Button.jsx nothing happens.

Before starting to read the code for Mocha I have ran into an issue, which had a solution. It turned out that the problem is that I have only set a compiler for javascript files --compilers js:babel-core/register and not for the .jsx ones.

Using the same compilers for them solved the problem:

$ mocha --watch \
    --compilers js:babel-core/register \
    --compilers jsx:babel-register \
    --require ./.mocha-setup.js \
    --recursive ./src/**/*.test.js