Skip to main content

Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

superplate's plugin of Enzyme is built on top of superplate's Jest plugin and automatically includes necessary wrappers and imports to run your component tests.

Implementation#

You can see how superplate's Enzyme plugin is implemented below.

tip

Configuration for Jest is not included. Please check out Jest Plugin to learn more about our Jest configuration.

warning

Currently, Enzyme is not fully supporting React 17. We will be using @wojtekmaj/enzyme-adapter-react-17 as an adapter for React 17 for compatibility.

Jest Setup#

We need to configure Enzyme with React 17 Adapter in our jest.setup.js file. We can do this with following code;

test/jest.setup.js
import "isomorphic-unfetch";import nock from "nock";import dotenv from "dotenv";import Enzyme from "enzyme";import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
dotenv.config({ path: ".env.test" });
Enzyme.configure({ adapter: new Adapter() });    afterAll(() => {    nock.cleanAll();    nock.restore();});

Custom Mount#

We may need to wrap our test components to context providers, data stores etc. It's a good practice to make this wrappers globally available. We will create a custom mount function in test/mount.tsx file.

test/mount.tsx
import React, { ReactNode } from "react";import { mount as mountBase, MountRendererProps, ReactWrapper } from "enzyme";/*import { ThemeProvider } from 'my-ui-lib'import { TranslationProvider } from 'my-i18n-lib'*/
export const AllTheProviders = ({ children }) => {    return (        // <ThemeProvider theme="light">        //     <TranslationProvider>                {children}        //     </TranslationProvider>        // </ThemeProvider>    );};

const mount: (node: ReactNode, options?: MountRendererProps) => ReactWrapper = (    node,    options,) => {    return mountBase(<AllTheProviders>{node}</AllTheProviders>, options);};
// override render methodexport default mount;

Example Test#

components/myComponent/index.spec.tsx
import mount from "@test/mount"; // <root>/test/mount.tsximport { MyComponent } from "./MyComponent";
describe("MyComponent", () => {    it("button is clickable", () => {        const mockFn = jest.fn();        const wrapper = mount(<MyComponent onClick={mockFn} />);
        const btn = wrapper.find("button");        btn.simulate("click");
        expect(mockFn).toHaveBeenCalledTimes(1);    });});
components/myComponent/index.tsx
import React from "react";
export const MyComponent: React.FC<{ onClick: () => void }> = ({    onClick,}) => {    return (        <div>            <button onClick={onClick}>                Click Me!            </button>        </div>    );};

Running Tests#

We will use Jest as our test runner. If Jest is already set up you can simply run

npm run test

Adding Enzyme to your project later#

tip

All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose Enzyme as testing plugin during the project creation phase.

If you want to add Enzyme to your existing project first install the dependencies

npm install -D enzyme @types/enzyme @wojtekmaj/enzyme-adapter-react-17

Then you can follow documentations for detail usage