react-redux-test-helpers

This package provides a few helpers to help test React/Redux components.

Table of contents

• Overview
• Installation
• API
  • ~renderWithDefaultProps(Component, defaultProps, options)~
  • ~testReduxComponent~
    • ~testRender()~
    • ~testProp(propName, action, parameterOrder)~
    • ~testAction(actionName, action)~

Overview

If you work with the traditional React/Redux components architecture, you’ll find yourself writing a lot of verbose tests, usually looking the same shape and involving a lot of manual mocking with the same assertions.

This helpers aim to reduce the amount of code you write so you can focus on the fun parts 😎.

Installation

yarn add https://github.com/asos-stephanemaniaci/react-redux-test-helpers.git

API

renderWithDefaultProps(Component, defaultProps, options)

This aptly named helper will render a component with a set of default props and let you specify which ones to override.

import { renderWithDefaultProps } from "react-redux-test-helpers"
import Component from "./Component";

const defaultProps = {
  title: "a title",
  description: "some content",
};

const render = renderWithDefaultProps(Component, defaultProps);

render(); // { title: "a title", description: "some content" }
render({ description: "dang" }); // { title: "a title", description: "dang" }

It accepts an additional argument to specify options, which at the moment is only useMount and that decides whether the underlying Enzyme render process uses shallow or mount to render the component.

render({ description: "dang" }, { useMount: true }); // same as above using mount().

testReduxComponent

This function provides you three functions you can use to assess your Redux wrapper is passing the proper props/actions to your component.

testRender()

testRender just makes sure your connected component passes rendering and does render your underlying component.

testProp(propName, action, parameterOrder)

testProp ensures what you would declare in mapStateToProps, by checking that the correctly-named prop maps to the correct store value.

testAction(actionName, action)

testAction ensures what you would declare in mapDispatchToProps, by checking that the correctly-named prop maps to the correct store action.

In action (Redux puns are a thing), it looks like this:

import { testReduxComponent } from "react-redux-test-helpers";

import ConnectedComponent from ".";
import Component from "./component";
import { isUserLoggedIn, dispatchUserLogin } from "./path/to/state/module";

jest.unmock("redux");
jest.mock("./Component");

const { testProp, testAction, testRender } = testReduxComponent(ConnectedComponent, Component);

describe("my connected component", () => {
  testRender();

  testProp("isLoggedIn", isUserLoggedIn);

  testAction("onSubmit", setUserLogin);
});