Watching tests — Mocha & Babel & React

Levente Balogh
1 min readMay 26, 2017

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

--

--

Levente Balogh

I think one of the most important thing in our life is curiosity. Stay curious, understand truly how things work and become a master craftsman. This is my goal.