Supported technologies: React, Create React App

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

create-react-app

For step-by-step instructions to configure and use Wallaby.js with create-react-app, please refer to our Create React App tutorial.

If you are using Jest >= v24, you may use automatic configuration that allows you to start Wallaby without any configuration.

If you are using an earlier version of Jest (< v24), you may use the Wallaby.js configuration 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: [
          'jsconfig.json',
          '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'
      },

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

      setup: wallaby => {
          const createJestConfigUtil = require('react-scripts/scripts/utils/createJestConfig');
          const jestConfig = createJestConfigUtil(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'
  };
};

What about TypeScript?

To configure Wallaby.js with create-react-app --typescript generated projects, please refer to our sample of wallaby.js configuration create-react-app for TypeScript.

Ejected Apps

If you are using an ejected app then you will need to change your configuration to point to your ejected jest configuration and adjust for any overrides you have made. The best starting point for doing that is to look at our jest docs. If you get stuck, you may find a similar solved issue in our github issues repository. If you can’t find a solution, create a new issue.

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