无法从“src/setupTests.js”中找到模块“酶”

Question

我正在尝试使用 jest 和酶来测试反应组件，我已经为它们安装了必要的包，然后配置了我的 setupTests.js，如下所示，但仍然有相同的错误，即找不到 Enzyme 模块，以及“浅”。 这就是我尝试从酶中使用 Shallow 的地方

import React from "react";
import { render, screen, cleanup } from '@testing-library/react'
import { shallow } from "@wojtekmaj/enzyme-adapter-react-17"  
//some necessary  local imports
// some other tests
describe('Welcome Component', () => {
it('renders Button component', () => {
    const wrapper = shallow(<Welcome />);
    expect(wrapper.containsMatchingElement(<NextButton text={"Next"}/>)).toEqual(true);
}); 
});

这是我的 setupTests.js

import '@testing-library/jest-dom';
import enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
enzyme.configure({ adapter: new Adapter() });

这是我的 package.json

{
    "name": "react-app",
     "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@fontsource/rubik": "^4.5.0",
     "@material-ui/core": "^4.12.3",
     "@mui/core": "^5.0.0-alpha.54",
     "@mui/material": "^5.2.3",
     "@reduxjs/toolkit": "^1.6.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/react": "^17.0.33",
     "ajv": "^8.8.2",
     "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
     "enzyme": "^3.11.0",
     "formik": "^2.2.9",
     "fs": "0.0.1-security",
     "icomoon-react": "^2.0.19",
     "jest": "^27.4.5",
     "jodit-react": "^1.1.11",
     "js-file-download": "^0.4.12",
     "lodash": "^4.17.21",
     "lodash-redux-immutability": "0.0.3",
     "popper.js": "^1.16.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.0",
     "react-contenteditable": "^3.3.6",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-lottie": "^1.2.3",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "react-split": "^2.0.13",
     "react-split-pane": "^0.1.92",
     "react-toast-notifications": "^2.5.1",
     "react-web-vector-icons": "^1.0.2",
     "redux-persist": "^6.0.0",
     "redux-subscriber": "^1.1.0",
     "reselect": "^4.1.5",
     "web-vitals": "^1.0.1",
     "xml2js": "^0.4.23",
     "yup": "^0.32.11"
    },
     "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
    },
    "eslintConfig": {
     "extends": [
      "react-app",
      "react-app/jest"
     ]
    },
    "browserslist": {
      "production": [
       ">0.2%",
       "not dead",
       "not op_mini all"
      ],
     "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
     ]
    },
    "devDependencies": {
      "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
      "sass": "^1.43.2",
      "sass-loader": "^12.2.0"
     }
    }

Answer 1

1. 在 dev 中安装所有这些依赖项。就我而言，我使用的是打字稿，如果 您正在使用 javascript，跳过类型。运行 npm i -D 和所有这些 依赖关系。

   @types/酶 @types/enzyme-adapter-react-16 酶 酶适配器反应 16 开玩笑环境酶 开玩笑酶 @testing-library/jest-dom @测试库/反应 @testing-library/用户事件 @types/开玩笑 开玩笑的

2. 在项目的根目录下，创建一个名为 jest.config.js 的文件，并在其中放入以下代码：

module.exports = { 预设：'ts-jest'， 测试环境：'节点'， modulePathIgnorePatterns: ["/dist/"], };

1. 在项目的同一个根目录下，创建一个名为 jest.config.unit.js 的文件并将这段代码放在那里：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  modulePathIgnorePatterns: ["<rootDir>/dist/"],
  setupFilesAfterEnv: ["jest-enzyme"],
  setupFiles: ['<rootDir>/src/setupEnzyme.ts'],
  // ignore .js files
  testRegex: '(/__tests__/.*|(\\.|/)(test))\\.[t]sx?$',
  coverageReporters: ["lcov", "text"],
  coverageDirectory: "test-coverage",
  coverageThreshold: {
    global: {
      branches: 0,
      functions: 0,
      lines: 0,
      statements: 0
    }
  }
};

4. 进入src文件夹，创建这个文件：setupEnzyme.ts(js)，里面放这个代码：

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

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

5. 在 src 文件夹中，创建一个文件 setupTests.ts(js) 并将这段代码放入：

导入'@testing-library/jest-dom'；

6. 最后转到 package.json，在脚本下添加这个

"test": "jest -c jest.config.unit.js",

你们都准备好了。创建一些测试组件，例如返回简单 div 的 Test.js。创建一个对应的Test.test.js并添加这个测试代码：

import { shallow } from 'enzyme';
import { Test } from './test';

describe('<Test /> renders correctly', () => {
  it('Renders correctly', () => {
    const wrapper = shallow(<Test />);
    expect(wrapper).toMatchSnapshot();
  });
});

如果你运行 npm run test 它应该可以工作。