Wallaby and create-react-app

Facebook's React team gave us the package 'create-react-app' so we can quickly bootstrap an app, complete with a dev server and tests. Wallaby gives us a config file that we can copy-&-paste. We will use that, and add a test that uses Enzyme to render a React component. We will also compare Wallaby's output to Jest's command line output.

See the complete example here.

Install create-react-app

If you haven't already, install the package globally and get access to the command line tool:

npm install -g create-react-app

Create a new app

Run the command to create a new app. I am naming it "Foobar App"

create-react-app foobar-app

Create wallaby config file

The Wallaby team created a boilerplate config file that works out of the box with apps created with the create-react-app project. See the docs here

Learn more here.

The config file to copy & paste:

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
        moduleNameMapper: {
          '^.+\\.(jpg|jpeg|png|gif|svg)$': require.resolve('react-scripts/config/jest/FileStub.js'),
          '^.+\\.css$': require.resolve('react-scripts/config/jest/CSSStub.js')
        }
      });
    },

    testFramework: 'jest'
  };
};

// wallaby.js

Extra credit: Install enzyme and use shallow render

This new app uses the Jest framework for testing. This framework has been around and although initial reviews were lackluster, the team has been working hard. These days, it seems to work great and offers some unique features.

The create-react-app package actually documents nicely how to test React components using Jest, read the docs here.

I like to test React components with the Enzyme library. Enzyme works fine alongside Jest and offers a nice API for rendering React components.

Run: npm install --save-dev enzyme react-addons-test-utils

And in src/App.test.js, import Enzyme and add a new test. The whole file will look like this:

import React from 'react';  
import ReactDOM from 'react-dom';  
import { shallow } from 'enzyme';  
import App from './App';

it('renders without crashing', () => {  
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});

it('renders welcome message', () => {  
  const wrapper = shallow(<App />);
  const welcome = <h2>Welcome to React</h2>;

  expect(wrapper.contains(welcome)).toEqual(true);
});

// src/App.test.js

Extra Extra credit: compare wallaby output with the jest CLI

Try running the test suite using the Jest command line runner:

npm test

Jest command line output Jest CLI output. Reruns with every save

Wallaby output in editor Wallaby running in Atom. Reruns with every keystroke.

Want more practice? Try the next example, this time using a different react-boilerplate.