Tutorials: Create React App tutorial

Wallaby.js runs your JavaScript tests immediately as you type and displays execution results in your code editor. Wallaby also provides beautiful test and code coverage reports updated in realtime.

In this tutorial we’re going to share how to configure Wallaby.js using create-react-app. We’ve structured this tutorial so you can follow along. If you don’t want to follow along then you may skip ahead and find the end result in this github repo.

Select your editor

The instructions in this tutorial are adjusted to your editor of choice. Please select your editor by clicking on your editor’s logo below before proceeding with the tutorial:

Install Dependencies

First, if you haven’t done so already, go ahead and download and install Wallaby.js.

Create a new React App

Now that we’re ready to start, open your terminal and change directory to where we will create our new react app. Run the following command:

npx create-react-app wallaby-create-react-app

At this point, the create-react-app tool has created a new folder for us named wallaby-create-react-app with our base application.

Configure Wallaby.js

If you are using Jest >= v24, you can try our new feature that allows to use Wallaby without any configuration.

Next, open the new folder in your editor and create a new file in the project root, named wallaby.js. Copy the configuration shown below and paste it into the wallaby.js file. The configuration file below may seem foreign or scary but you don’t need to worry about what the configuration file is doing in order to use Wallaby.js with React (we have configured it for you). If you want to understand how we chose the configuration, read more below or read more about our configuration settings.

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'
  };
};

Start Wallaby.js

At this point, Wallaby.js is configured and is ready to be started. If this is the first time you are using wallaby, it may take a minute or two to install all the dependencies it needs.

In VS Code, launch the Command Pallete (Ctrl/Cmd + Shift + P) and then choose the Wallaby.js: Start command.

In Atom, launch the Command Pallete (Ctrl/Cmd + Shift + P) and then choose the Wallaby: Start command.

In Sublime Text, launch the Command Pallete (Ctrl/Cmd + Shift + P) and then choose the Wallaby.js: Start command.

In Visual Studio, right click on your Wallaby.js configuration file in your Solution Explorer, and then select Start Wallaby.js.

In your IntelliJ Editor, create a new wallaby.js Run Configuration. Select Edit configurations from the drop-down menu in the top right-hand corner of the navigation bar, or from the Run menu. Add a new Wallaby.js Configuration, specify the path to your wallaby.js configuration file and click OK. Once you have created and saved the configuration, you can start it. If you need help creating a run configuration, you may refer to JetBrains docs.

jetbrains run configuration

After Wallaby.js has started, navigate to your application and test files (App.js, App.test.js), you will see coverage indicators in the gutter of your code editor:

  • Gray squares mean that the line contains code that was not run by any of your tests.
  • Green squares mean that the line contains code that was run by at least one of your tests.
  • Yellow squares mean that the line contains code that was only partially covered by your tests.
  • Red squares mean that the line is the source of an error, a failed assertion, or is part of a stack trace for an error.
  • Pink squares mean that the source line is on the execution path of a failing test.

Open up App.test.js to confirm that everything is working. It should look like this:

file markers in App.test.js file markers in App.test.js file markers in App.test.js file markers in App.test.js file markers in App.test.js

Write a test for the expected output

Let’s update App.test.js to perform a jest snapshot for the div output, by changing its content to:

import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';

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

   expect(div).toMatchSnapshot() /* This is our snapshot */

   ReactDOM.unmountComponentAtNode(div);
 });

When Wallaby.js is running (as it should be now), a new snapshot is automatically created when you use jest’s toMatchSnapshot() method.

Breaking a test

Let’s break the snapshot test that we just created and see what happens. Go ahead and edit App.js hyperlink text and change it from Learn React to Learn React with Wallaby.js.

You’ll see the line marker in App.js has changed to pink, and your Wallaby.js Test output window shows you that the render function no longer matches the snapshot.

At this point, you might like to Toggle Wallaby’s Panel by launching the Command Pallete and selecting Wallaby.js: Toggle Tests View.

At this point, you might like to Toggle Wallaby’s Panel by launching the Command Pallete and selecting Wallaby: Toggle Panel.

broken app broken app broken app broken app broken app

Update our snapshot

After reviewing the difference in our snapshot, we’re happy with the change and we want to update our snapshot. Let’s do that.

Update the snapshot using Wallaby.js by launching your Command Palette and selecting the command Wallaby.js: Update Test Snapshots, or by using the link in the Wallaby Failing Tests Output Channel.

Update the snapshot using Wallaby.js by launching your Command Palette and selecting the command Wallaby.js: Run line tests.

Update the snapshot using Wallaby.js by launching your Command Palette and selecting the command Wallaby: Run Line Tests.

Update the snapshot using Wallaby.js by launching Visual Studio quick actions (Ctrl+.) and select Update Test Snapshots.

Update the snapshot using Wallaby.js by launching JetBrains Intention Actions (Alt+Enter) and select Update Test Snapshots, or by using the link in the Wallaby Failing Tests Console.

Using different commands you may update a snapshot for a specific test, a test file, or all snapshots for your project.

update test snapshots update test snapshots update test snapshots update test snapshots update test snapshots

You’ll see that the error has gone away, and our tests are passing again.

fixed tests fixed tests fixed tests fixed tests fixed tests

You’re now ready to use Wallaby to write your create react app tests. With Wallaby, you still write your tests the same way that you do today but now you get real-time in-editor feedback.

Learn More…

We’ve only covered the very basics of configuring and using Wallaby.js but the tool is capable of a whole lot more. Read through our docs to learn more about Wallaby.js features. Some notable features include:

  • Wallaby App updates in real-time and provides a strategic level view of coverage and test results.
  • Advanced Logging allows you to quickly and easily debug at runtime with keyboard shortcuts, comments, and console log.
  • Value Explorer provides the ability to explore runtime values right in your editor.

You may also learn about more Wallaby features in the VS Code tutorialJetBrains IDEs tutorialVisual Studio tutorialAtom tutorialSublime Text tutorial.

How did we come up with the config?

Under the covers, the create-react-app tool uses Jest, so we used wallaby.js jest docs as our starting point for the configuration.

Because the create-react-app stores some of the node modules under react-scripts/node_modules, we needed to let Wallaby.js’ node runner know about it by setting the NODE_PATH environment variable.

We also needed to configure babel compiler. The create-react-app tool is using a babel preset, react-app, so we needed to add that 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. This is done in the setup function by calling the same script that create-react-app calls to create jest config.

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

Troubleshooting

If you get stuck or something isn’t working for you, you may find a similar solved issue in our github issues repository. If you can’t find a solution, create a new issue.