Enzyme 期望配置一个适配器答案

【问题标题】：Enzyme expects an adapter to be configuredEnzyme 期望配置一个适配器
【发布时间】：2018-10-17 18:03:07
【问题描述】：

我通过 create-react-app 创建了一个新的 React 应用程序，我想为我在应用程序中创建的名为“MessageBox”的组件编写一个单元测试。这是我写的单元测试：

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

test('message box', () => {
   const app = {setState: jest.fn()};
   const wrapper = shallow(<MessageBox app={app}/>);
   wrapper.find('button').at(0).simulate('click');
   expect(app.setState).toHaveBeenLastCalledWith({modalIsOpen: false});
});

我还在“src”文件夹下添加了一个名为“setupTests.js”的文件，内容如下：

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

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

我运行它：

npm 测试

我得到了错误：

Enzyme 内部错误：Enzyme 需要配置适配器，但是没有找到。要配置适配器，您应该调用Enzyme.configure({ > adapter: new Adapter() })

你知道什么可以解决这个问题吗？

【问题讨论】：

截至此评论日期的当前错误消息还包含文档的 URL。访问该 URL 主要解释了要做什么。
@CrazySynhax，请接受来自“@Mikel”的另一个答案，因为它使配置共享，您的测试看起来会更清晰。在每个测试中都有这样的显式配置太冗长了。

标签： reactjs enzyme create-react-app

【解决方案1】：

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

你有

"esModuleInterop": true,

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

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

【讨论】：

【解决方案2】：

npm i enzyme-adapter-react-16 enzyme-to-json --save-dev
添加到package.json enter image description here

"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:

const requestAnimationFrame = global.requestAnimationFrame = callback => {
          setTimeout(callback,0);
      };
export default requestAnimationFrame;

如果浅 -> 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();
        });
     });

【讨论】：

【解决方案3】：

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

npm 测试 -- --watchAll=false

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

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

【讨论】：

【解决方案4】：

对我来说，在将 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 文件。无需将其导入每个测试文件中。

【讨论】：

这只有当我把它放在.test.js 文件中时才有效，奇怪的是当我把相同的代码放在setupTests.js 文件中添加依赖项npm i enzyme-adapter-react-16 enzyme-to-json --save-dev 时不起作用让我们看看

【解决方案5】：

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

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

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

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

【讨论】：

【解决方案6】：

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

在您创建的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() })

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

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

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

此后，错误消失了。

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

不确定到底是什么导致了问题！

【讨论】：

【解决方案9】：

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

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

更新：

Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.

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

【讨论】：

为了得到有用的答案，这个反应需要扩展。解释为什么这是问题的答案。
对于使用 creat-react-app 的人，您不必在 package.json 文件中进行输入。只需在 src 下创建 setupTests.js ，它将自动被选中。也只需导入适配器而不是 * 作为适配器
这里有更多支持 Priyank 评论的信息：github.com/airbnb/enzyme/issues/1265 Mikel 在另一个答案中给出了一个示例 src/setupTests.js 文件。

【解决方案10】：

使用最新版本的库，我在这个问题的每个答案中都遇到了同样的错误。错误：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() });

就这样，你就可以测试你的组件了。

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

【讨论】：

不确定 2) TEST SETUP 是否仍然可行。至少如果 React 应用程序是“开箱即用”的。您会收到如下错误：These options in your package.json Jest configuration are not currently supported by Create React App: • setupTestFrameworkScriptFile
观察良好@Daedalus。我将使用最新版本更新我的答案。谢谢

【解决方案11】：

对于以后阅读本文的每个人，setupTestFrameworkScriptFile 在新版本中被documentation 弃用，取而代之的是setupFilesAfterEnv。我们可以像这样添加我们的文件：

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

【讨论】：

【解决方案12】：

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

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

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

【讨论】：

这给了我TypeError: Adapter is not a constructor。必须将其更改为 import Adapter from 'enzyme-adapter-react-16'; 才能正常工作。
如果你不想把它放到每一个测试中怎么办？
这似乎应该作为“合理的默认值”放入 Enzyme 中。所有这些配置噪音都令人筋疲力尽。
@MaxwellLynn 您可以创建一个 setup.js 文件。检查链接。 github.com/airbnb/enzyme/issues/1265
如果你把 setupTests.js 放在你的 src 目录中并添加酶配置它应该可以工作

【解决方案13】：

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

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

jest.config.js

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

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

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

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

【讨论】：

这就是为我做的。我什至从来没有从 create-react-app 中弹出我的应用程序，它只是没有把它捡起来！

【解决方案14】：

作为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”，而是将其命名为“setUpTests.js”。当我更改名称时它起作用了。
这行得通。对于 Typescript 项目，它需要有一个 .ts 扩展名：src/setupTests.ts

【解决方案15】：

这样试试；

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);
  });
});

【讨论】：

【解决方案16】：

您需要像这样使用导入：

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

这样：(import * as Adapter from ...) 返回消息“TypeError: Adapter is not a constructor.”

【讨论】：

【解决方案17】：

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

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

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

【讨论】：

这是为我解决的问题。
这也是唯一对我有用的东西，但我注意到它只是 VS Code 的 Jest Runner 扩展中的一个问题，所以我找到了一些配置。见my post。

【解决方案18】：

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

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

【讨论】：

谢谢。但这样做，又产生了另一个问题。我编辑了我的问题。