React Test Stepper

A HOC to step throught actions in order to test a Component.

Instalation

# Using yarn
yarn add --dev react-test-stepper

# Or using npm
npm install --dev  react-test-stepper

Use

The idea of this package is to assert conditions while making some changes or steps to a component.

The only funcion exported is setUpStepper(renderFunction: (this) => ReactComponent, steps[]: (props, this) => null) => ReactComponent.

This function has two arguments:

1. renderFunction: The function is used as the render function. The this object is changed to the hoc's one. In addition, it receives that component's this as first argument.
2. steps: It's an array of functions. Each function should be an step. The this object is changed to the hoc's one. Two arguments are passed:
3. the props of the hoc.
4. hoc's this

The function returns a React Component.

Note: Each step is executed on componentDidMount / componentDidUpdate phase, so all steps should trigger that phases.

See the example.

Examples

React Router

A simple example is testing something that involves url triggering. The following example is done with React Router.

import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { renderRoutes } from 'react-router-config';
import { mount } from 'enzyme';
import { setUpStepper } from 'react-test-stepper';

describe('Testing memory router', () => {
  it('should render the correct component', done => {
    const ComponentA = jest.fn().mockReturnValue(null);
    const ComponentB = jest.fn().mockReturnValue(null);
    const steps = [
      ({ history }) => history.push('/a'),
      ({ history }) => {
        expect(ComponentA).toHaveBeenCalled();
        expect(ComponentB).not.toHaveBeenCalled();
         history.push('/b');
      },
      () => {
        expect(ComponentB).toHaveBeenCalled();
        done();
      },
    ];

    const routes = [
      {
        component: setUpStepper(t => renderRoutes(t.props.route.routes), steps),
        routes: [
          {
            component: ComponentA,
            path: '/a',
          },
          {
            component: ComponentB,
            path: '/b',
          },
        ],
      },
    ];

    mount(
      <Router>{renderRoutes(routes)}</Router>
    );
  });
});

Fetching function is called

import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { renderRoutes } from 'react-router-config';
import { mount } from 'enzyme';
import { setUpStepper } from 'react-test-stepper';

describe('Component', () => {
  it('should call fetchSth when the component is mounted', done => {
    const fetchSth = jest.fn();
    class Component extends React.Component {
      componentDidMount() {
        fetchSth(this.props.arg);
      }

      render() { return null; }
    }

    const steps = [
      (props, t) => t.setState({arg: 1}),
      function() {
        expect(fetchSth).toHaveBeenLastCalledWith(1);
        // In order to trigger again Component::componentDidMount
        // (if we only change the props, Component is never unmounted, so it won't be mounted again, only it's props will change
        this.setState({arg: undefined});
      },
      (props, t) => t.setState({arg: 2}),
      () => {
        expect(fetchSth).toHaveBeenLastCalledWith(2);
        done();
      }
    ];

    const Stepper = setUpStepper(function() {
      // Initial state is null
      const { arg } = this.state || {};
      if (arg)
        return <Component arg={arg} />;
      return null;
    }, steps);

    mount(<Stepper />);
  });
});