使用 create-react-app 为 React 应用配置 Jest 和 Enzyme

Question

I have built a sample React application using create-react-app (CRA), I am trying to write the unit testing for the application.

Using Jest and Enzyme, I have installed the required packages as the dev dependencies

    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "jest": "^24.9.0"

jest.config.js - located outside of src folder

module.exports = {
    verbose: true,
    setupFilesAfterEnv: ["./src/setupTest.js"],
};

setupTest.js - located inside of src folder root

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

configure({ adapter: new Adapter() });

App.test.js

import React from "react";
import { shallow } from "enzyme";

import App from "./App";

describe("<App />", () => {
    it("Renders the app component", () => {
        const wrapper = shallow(<App />);
        expect(wrapper).toMatchSnapshot();
    });
});

When I try to do npm run test , it's giving the below error:

Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
      To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
      before using any of Enzyme's top level APIs, where `Adapter` is the adapter
      corresponding to the library currently being tested. For example:

      import Adapter from 'enzyme-adapter-react-15';

      To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

   6 | describe("<App />", () => {
   7 |     it("Renders the app component", () => {
>  8 |         const wrapper = shallow(<App />);
     |                         ^
   9 |         expect(wrapper).toMatchSnapshot();
  10 |     });
  11 | });

Answer 1

You must name your setupFilesAfterEnv file as src/setupTests.js or src/setupTests.ts . This cannot be configured using without ejecting from create-react-app.

Here is a functional setup file for CRA:

src/setupTests.js

(note that it's setupTests and not setupTest in the file name)

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

configure({ adapter: new Adapter() });

More information

Answer 2

I think there is typo in your file name you forgot to add s at the end of file name (setupTests), the expected path for your setup file is src/setupTests.js .

You can go with this filename also but then you have to include it in the jest config like below.

// package.json
{
    ...,
    "jest": {
        "setupFilesAfterEnv": "<rootDir>/test-setup.js"
    }
}

Hope this helps