🛠 component-test-setup

Standardized test setup methods for React components.

Tired of copy and pasting default prop templates for React component tests? Use this cute little package with React Testing Library or Enzyme to standardize your component setups.

🧠 This library is a very small wrapper on top of Enzyme or RTL, and exists only to help standardize test setup behavior.

Usage

npm install component-test-setup --save-dev

For both RTL and Enzyme, this library provides a setup* function that takes in:

1. Your React component class or function
2. Any prop defaults for the component (optional)

That function returns a render* function that takes in any more props and returns:

• The library's rendered equivalent: view for RTL and wrapper for Enzyme.
• props: The computed props the component rendered with.

React Testing Library

Use setupRtl to create a renderView function. It returns a view result from RTL and a props object of the computed props used to render.

import { setupRtl } from "component-test-setup";

import { MyComponent } from "./MyComponent";

const renderView = setupRtl(MyComponent, {
  someProp: "value",
});

describe("MyComponent", () => {
  it("does a thing", () => {
    const { props, view } = renderView({
      someProp: "otherProp",
    });

    view.getByText(props.someProp);
  });
});

RTL options

The setupRtl API in particular allows a .options function on the returned renderView function to set the RTL RenderOptions.

const { view } = renderView(MyComponent).options({
  wrapper: AllTheProviders,
});

Enzyme

Use setupEnzyme to create a renderWrapper function. It returns a wrapper result from RTL and a props object of the computed props used to render.

import { setupEnzyme } from "component-test-setup";

import { MyComponent } from "./MyComponent";

const renderWrapper = setupEnzyme(MyComponent, {
  someProp: "value",
});

describe("MyComponent", () => {
  it("does a thing", () => {
    const { props, wrapper } = renderWrapper({
      some: "otherProp",
    });

    wrapper.getByText(props.someProp);
  });
});

Updating Props

Often you'd like to test lifecycle methods/hooks and component-test-setup is written to help accommodate that.

For both RTL and Enzyme the API is the same, the update method returned in the render* method:

const renderWrapper = setupEnzyme(MyComponent, {
  someProp: "value",
});

describe("MyComponent", () => {
  it("does a thing", () => {
    const { wrapper, update } = renderWrapper({
      some: "otherProp",
    });

    update({ someProp: "another-value" });

    wrapper.getByText("another-value"); // It has been updated to render with the new someProp value
  });
});

Please note: This currently does not update the props object that's returned in the render* method. It will be locked into whatever the initial completed props were for the first render.

TypeScript Usage

component-test-setup is written in TypeScript and generally type safe.

• Props passed to components are typed as the component's props.
• If a subset of required props are passed as defaults, the returned render* function will require only remaining required props.

type MyComponentProps = {
  requiredA: string;
  requiredB: string;
};

declare const MyComponent: React.ComponentType<MyComponentProps>;

const renderView = setupRtl(MyComponent, {
  requiredA: "a",
});

describe("MyComponent", () => {
  it("does a thing", () => {
    const { props, view } = renderView({
      requiredB: "b",
    });

    view.getByText(props.someProp);
  });
});

• It is also set up to understand which of the required props have already been passed and which ones have not, allowing you to bypass sending anything at all into the render* method if you've already passed everything it needs:

type MyComponentProps = {
  requiredA: string;
  requiredB: string;
};

declare const MyComponent: React.ComponentType<MyComponentProps>;

const renderView = setupRtl(MyComponent, {
  requiredA: "a",
  requiredB: "b",
});

describe("MyComponent", () => {
  it("does a thing", () => {
    const { props, view } = renderView();

    view.getByText(props.someProp);
  });
});

• And of course, you may always provide overrides and/or optional props into your render* methods:

type MyComponentProps = {
  requiredA: string;
  optional?: string;
};

declare const MyComponent: React.ComponentType<MyComponentProps>;

const renderView = setupRtl(MyComponent, {
  requiredA: "a",
});

describe("MyComponent", () => {
  it("does a thing", () => {
    const { props, view } = renderView({
      requiredA: "override",
      optional: "I don't need to be here, but I wanna be",
    });

    view.getByText(props.someProp);
  });
});

Heck yes. 🤘

Development

Requires:

• Node.js >12
• Yarn

After forking the repo from GitHub:

git clone https://github.com/<your-name-here>/component-test-setup
cd component-test-setup
yarn

Publishing New Versions

CI will automatically publish a new version when it sees a new version tag. Locally, you can trigger this if you have admin permissions:

git checkout main
npm version <patch|minor|major>
git push

Contribution Guidelines

We'd love to have you contribute! Check the issue tracker for issues labeled accepting prs to find bug fixes and feature requests the community can work on. If this is your first time working with this code, the good first issue label indicates good introductory issues.

Please note that this project is released with a Contributor Covenant. By participating in this project you agree to abide by its terms. See CODE_OF_CONDUCT.md.