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 most the node modules under react-scripts/node_modules, you’ll 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 moduleNameMapper for jest the same way as the create-react-app does to stub CSS and other assets.

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 are 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',
      '!src/**/*.test.js'
    ],

    tests: ['src/**/*.test.js'],

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

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

    setup: (wallaby) => {
      wallaby.testFramework.configure({
        // as in node_modules/react-scripts/utils/createJestConfig.js
        testURL: 'http://localhost',
        setupFiles: [require('path').join(wallaby.localProjectDir, 'node_modules/react-scripts/config/polyfills.js')],
        moduleNameMapper: {
          '^.+\\.(jpg|jpeg|png|gif|svg)$': require.resolve('react-scripts/config/jest/fileTransform.js'),
          '^.+\\.css$': require.resolve('react-scripts/config/jest/cssTransform.js'),
          '^react-native$': 'react-native-web'
        }
      });
    },

    testFramework: 'jest'
  };
};