Unit testing with Jasmine

If you used Create React App to start your project, you already have testing with Jest configured. If you would prefer to use Jasmine, follow the directions below:

Install Gulp (make sure its version is ^4.0.0), which we will use to run testing tasks:

yarn add --dev gulp@next

Install pui-react-tools, which provides helpful Gulp tasks for testing with Jasmine:

yarn add --dev pui-react-tools

Install jasmine_dom_matchers, which provides helpful Jasmine matchers for making assertions against the rendered DOM:

yarn add --dev jasmine_dom_matchers

Install babel-core, babel-loader, babel-preset-env, babel-preset-react, and babel-polyfill:

yarn add --dev babel-core babel-loader babel-preset-env babel-preset-react babel-polyfill

Install Puppeteer, which is used by pui-react-tools to run tests in Chrome:

yarn add --dev puppeteer

Install jQuery, which is used by jasmine_dom_matchers to select DOM elements:

yarn add --dev jquery

Install react-spy-on-render, which will let you spy on the render method of React components and assert that they are rendered with certain props:

yarn add --dev react-spy-on-render

Create a .babelrc file in your project root:

{
  "presets": ["env", "react"]
}

Create a file called gulpfile.babel.js at your project root to install Jasmine tasks from pui-react-tools with a Webpack config:

import {Jasmine} from 'pui-react-tools';
import 'babel-polyfill';

Jasmine.install({
  webpack: {
    test: () => {
      return {
        devtool: 'cheap-module-source-map',
        module: {
          rules: [
            {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['env', 'react']}},
            {test: /css$/, loader: 'css-loader'},
            {test: /svg$/, loader: 'file-loader'}
          ]
        },
        output: {filename: '[name].js'},
        watch: true
      };
    }
  },
  appGlobs: ['src/*.test.js'],
  headlessServerOptions: {
    includeStackTrace: true,
    random: false,
    isVerbose: false,
    port: 8888,
    driver: 'chrome'
  },
  headlessSpecRunnerOptions: {profile: true}
});

Create a spec_helper.js that imports necessary dependencies and sets up tests

import $ from 'jquery';
import 'jasmine_dom_matchers';
import ReactDOM from 'react-dom';
import 'react-spy-on-render';

Object.assign(global, {
  $,
  jQuery: $,
  ReactDOM
});

beforeEach(() => {
  $('body').find('#root').remove().end().append('<main id="root"/>');
});

afterEach(() => {
  ReactDOM.unmountComponentAtNode(root);
});

Import spec_helper.js in each test file. Render into root and make assertions with jQuery selectors and matchers from jasmine_dom_matchers.

import React from 'react';
import App from './App';
import '../path/to/spec_helper.js';

describe('app', () => {
  beforeEach(() => {
    spyOnRender(App).and.callThrough();
    ReactDOM.render(<App/>, root);
  });

  it('renders without crashing', () => {
    expect('.App').toExist();
    expect(App).toHaveBeenRenderedWithProps({});
  });
});