Enzyme 期望配置一个适配器

将其添加到您的测试用例文件中。

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

configure({adapter: new Adapter()});
test('message box', ()=> {
     ...
})

---

此外，如果您不想将 setupTests.js 文件导入每个测试文件，您可以将其放在 package.json 文件夹中：

  "jest": {
     "setupTestFrameworkScriptFile": "./test/setupTests.js" }

更新：

Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.

https://jestjs.io/docs/en/configuration

---

必须将文件“setupTests”导入到测试文件中：

import MessageBox from "../MessageBox";
import { shallow } from 'enzyme';
import React from 'react';
import "../setupTests"

test('message box', ()=> {
     ...
})

---

作为 Priyank said，如果您使用 Create React App，它将从 src/setupTests.js 中获取配置。

添加：

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

configure({ adapter: new Adapter() })

---

很多答案都说将 setupTests.js 导入您的测试文件。或者在每个测试文件中配置酶适配器。这确实解决了眼前的问题。

但从长远来看，如果您将 jest.config.js 文件添加到项目根目录。您可以将其配置为在启动时运行设置文件。

jest.config.js

module.exports = {
  setupTestFrameworkScriptFile: "<rootDir>/src/setupTests.ts"
}

这告诉 Jest 每次启动时都运行 setupTest.ts。

这样，如果您需要添加 polyfill 或添加全局模拟（如 localstorage），您可以将其添加到您的 setupTests 文件并在任何地方对其进行配置。

Enzyme 文档不涉及与 Jest 的集成，因此将这两者融合在一起会令人困惑。

---

对我来说，在将 React 与 create-react-app 一起使用时，我必须确保文件名正确。该文件必须是 src/setupTests.js，并且在 Tests 的末尾有一个 s。

setupTests.js 内部如下：

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

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

运行 npm run test 时，它会自动查找 setupTests.js 文件。无需将其导入每个测试文件。

---

您需要像这样使用导入：

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

这样： (import * as Adapter from ...) 返回一条消息“TypeError：Adapter 不是构造函数”。

---

将 import React from 'react'; 添加到文件顶部。

您正在使用 JSX 语法 <MessageBox app={app}/>，其中 transpiles 变为 React.createComponent(...)。为了使它工作 React 变量必须在文件的范围内定义。

---

像这样尝试；

import React from 'react';
import App from './containers/App';
import enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

describe('App Screen', () => {
  let mountedAppScreen;
  let props;

  const appScreen = () => {
    if (!mountedAppScreen) {
      mountedAppScreen = enzyme.mount(
        <App {...props} />
      );
    }
    return mountedAppScreen;
  }
  it("it always renders div", () => {
    const divs = appScreen().find("div");
    expect(divs.length).toBeGreaterThanOrEqual(1);
  });
});

---

使用最新版本的库，我在这个问题的每个答案中都遇到了同样的错误。错误：TypeError：适配器不是构造函数。

我已经对所有必要的步骤进行了分组，以便使用 Enzyme 正确测试您的 ReactJS 组件（我使用过 Jest，但它也可能适用于 Mocha，在这种情况下，只需切换主测试包）：

1）库（package.json）：

"dependencies": {
    "jest": "^24.6.0",
    (...)
}
"devDependencies": {
    "chai": "^4.2.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
   (...)
}

2) 测试设置：您可以在每次测试中设置酶。但正如 type_master_flash 明智地建议的那样，您可以添加一个脚本来执行此操作。为此，请在您的 package.json 文件中创建一个与会话脚本、依赖项等相同级别的新设置：

Jest 版本 23.x（或之前）：

"devDependencies": { 
     (...) 
 },
"jest": {
    "setupTestFrameworkScriptFile": "./tests.setup.js"
 },

Jest 24.0 版本之后：根据 Jest Documentation，“setupTestFrameworkScriptFile 已被弃用，取而代之的是 setupFilesAfterEnv”。

"devDependencies": { 
     (...) 
 },
"jest": {
    "setupFilesAfterEnv": ["./tests.setup.js"]
 },

这个文件可以放在任何你喜欢的地方，你可以随意命名。请记住设置正确的文件位置。在当前示例中，我将文件存储在项目的根目录中。

3) tests.setup.js：正如我在 Enzyme: TypeError: Adapter is not a constructor 中发现的，这里的问题是我们不能“import '' 带有默认导出的模块"。配置文件的正确方法是：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

就是这样，您可以很好地测试您的组件。

干杯，希望这会有所帮助。

---

对于将来阅读本文的每个人，在新版本中，documentation 已弃用 setupTestFrameworkScriptFile，而使用 setupFilesAfterEnv。我们可以像这样添加我们的文件：

"setupFiles": [
    "<rootDir>/src/setupTests.js"
]

---

我遇到了同样的错误，由于某种原因，React 没有自动拾取 setupTests.js 文件。

我在根目录创建了一个名为 jest.config.js 的新文件并添加了

{ "jest": { "setupTestFrameworkScriptFile": "<rootDir>/path/to/your/file.js", } }

在此之后，错误消失了。

注意：后来，我删除了 jest.config.js 文件，但它现在仍然有效。

不知道到底是什么导致了这个问题！

---

文件配置必须在 jest.config.js 的 setupFilesAfterEnv 属性中

{
  ...
  setupFilesAfterEnv: ["<rootDir>/jest.transform.js"],
  ...
}

---

如果有人在 GatsbyJs (https://www.gatsbyjs.org/docs/testing-react-components/) 中使用 Jest 设置测试 React 组件后尝试解决此问题

在您制作的 setup-test-env.js 中，将其编辑为如下所示：

import "@testing-library/jest-dom/extend-expect"
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

---

在项目的根目录中创建一个名为 setupTests.js 的文件。 jest 将在运行任何测试套件之前自动查找此文件。将以下内容添加到文件中。

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({adapter:new Adapter()})

注意：文件名应该完全一样。不需要将此 setupTests.js 文件导入您的测试文件。它会自动工作

---

对于那些将 VS Code 和 Jest Runner 扩展用于 React CRA 应用程序的用户，不要忘记 configure Jest Runner 通过将 jest 命令设置为来使用 CRA 的内置脚本运行程序：

npm 测试 -- --watchAll=false

如果您忘记这样做，您将收到主题错误。而且由于您使用的是 CRA，您将无法在 package.json 或 jest.config.js 中配置 setupFilesAfterEnv。尝试这样做会导致此错误：

Create React App 目前不支持 package.json Jest 配置中的这些选项

---

npm i酶适配器反应16酶到json--save-dev添加到package.json在此处输入图像描述

"jest": {
       "collectCoverageFrom": [  "src/**/*.js", "!src/index.js" ]
};

将两个文件添加到 src 文件夹 ->

setupTests.js

tempPolyfills.js

setupTests.js：

import requestAnimationFrame from './tempPolyfills';

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

        configure({adapter: new Adapter(), disableLifecycleMethods:true});

tempPolyfills.js：

常量 requestAnimationFrame = global.requestAnimationFrame = callback => { setTimeout(callback,0); };导出默认 requestAnimationFrame；

如果 shallow -> expect() 在测试用例中失败，请使用 toJson() ：示例：

    import { shallow } from "enzyme";
    import App from "./App";
    import toJson from 'enzyme-to-json';
    describe('App', () => {
        const app = shallow(<App />);
        it('renders correctly', () => {
            expect(toJson(app)).toMatchSnapshot();
        });
     });

---

如果您认为您已经正确设置了所有内容（例如，安装了用于 React 17 支持的 @wojtekmaj/enzyme-adapter-react-17），使用 Typescript 检查另一个陷阱：

你有

"esModuleInterop": true,

以及适配器的匹配导入格式？

import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import Enzyme from 'enzyme';

---