无法从 'src/setupTests.js' 中找到模块 'enzyme'

Question

我正在尝试使用 jest 和 enzyme 测试一个反应组件，我已经为它们安装了必要的包，然后配置我的 setupTests.js 如下所示，但仍然有与 Enzyme 相同的错误找不到模块，也“浅”。这是我尝试使用酶的浅层

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

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

@types/enzyme @types/enzyme-adapter-react-16 酵素酶适配器反应 16 开玩笑环境酶笑话酵素 @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest ts-笑话
在项目的根目录中，创建一个名为 jest.config.js 的文件并在其中放入以下代码：

module.exports = { preset: 'ts-jest', testEnvironment: 'node', modulePathIgnorePatterns: ["/dist/"], };

在项目的同一根目录中，创建一个名为 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
    }
  }
};

转到 src 文件夹，并创建此文件：setupEnzyme.ts(js)，将此代码放入其中：

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

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

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

import '@testing-library/jest-dom';

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

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

一切准备就绪。创建一些测试组件，例如 Test.js 其中 returns 是一个简单的 div。创建一个通讯员 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 运行测试它应该工作。

无法从 'src/setupTests.js' 中找到模块 'enzyme'

Cannot find module 'enzyme' from 'src/setupTests.js'

reactjs

jestjs

enzyme