Wallaby.js supports continuous testing and real-time code coverage for JSX and React.js.

jsx

You may find a very detailed step by step react.js tutorial in our blog. The source code for the blog post is available in this repository.

You may also find the example of React + Webpack in this other sample repository.

react

React + Webpack + ES6

You may find the working sample of wallaby.js configuration for React + Webpack + ES6 in this repository.

create-react-app

If you are using the create-react-app tool for your React application without eject, you may find a couple of tips to configure wallaby.js for the setup below.

The create-react-app tool is using Jest, so you use the relevant wallaby.js docs section as a start point for your configuration.

Because create-react-app stores some of the node modules under react-scripts/node_modules, you may need to let wallaby.js node runner know about it by setting the NODE_PATH environment variable.

The next step is to configure babel compiler. The create-react-app tool is using react-app preset, so we will need to add it to the wallaby babel config. The preset needs NODE_ENV or BABEL_ENV to be set, so we’ll set the environment variable the same way as we did for the NODE_PATH.

The last step is to configure jest the same way as the create-react-app does to stub CSS and other assets. It’s done in the setup function by calling the same script that create-react-app calls to create jest config.

You may find the full config for the clean create-react-app run below:

module.exports = function (wallaby) {

  // Babel, jest-cli and some other modules may be located under
  // react-scripts/node_modules, so need to let node.js know about it
  var path = require('path');
  process.env.NODE_PATH +=
    path.delimiter +
    path.join(__dirname, 'node_modules') +
    path.delimiter +
    path.join(__dirname, 'node_modules/react-scripts/node_modules');
  require('module').Module._initPaths();

  // Babel needs this
  process.env.NODE_ENV = 'development';

  return {
    files: [
      'src/**/*.+(js|jsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
      '!src/**/*.test.js?(x)'
    ],

    tests: ['src/**/*.test.js?(x)'],

    env: {
      type: 'node',
      runner: 'node'
    },

    compilers: {
      '**/*.js?(x)': wallaby.compilers.babel({
        babel: require('babel-core'),
        presets: ['react-app']
      })
    },

    setup: wallaby => {
      const jestConfig = require('react-scripts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts/' + p));
      delete jestConfig.transform['^.+\\.(js|jsx)$'];
      delete jestConfig.testEnvironment;
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest'
  };
};