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

jsx

Jest

If you want to use Jest to run your tests, then you may find relevant configuration examples in the corresponding docs section.

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 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();

    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({
                presets: ['react-app']
            })
        },

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

        testFramework: 'jest'
    };
};

You may also find useful this sample of wallaby.js configuration create-react-app for TypeScript.

React + Webpack + ES6

If you are using Mocha or Jasmine with Webpack to run your tests in browser, then 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