Enzyme 需要配置一个适配器

IT技术 reactjs enzyme create-react-app
2021-04-02 00:00:22

我通过 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.configure({ > adapter: new Adapter() })

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

6个回答

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

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';在它起作用之前必须将其更改为。
2021-05-31 00:00:22
@MaxwellLynn 您可以创建一个 setup.js 文件。检查链接。 github.com/airbnb/enzyme/issues/1265
2021-06-02 00:00:22
如果你制作setupTests.js并把它放在你的 src 目录中并添加酶配置它应该可以工作
2021-06-11 00:00:22
如果您不想将其放入每个测试中怎么办？
2021-06-13 00:00:22
这似乎应该作为“合理的默认值”放入 Enzyme。所有这些配置噪音都令人筋疲力尽。
2021-06-17 00:00:22

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

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

更新：

Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.

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

以下是支持Priyank评论的更多信息：github.com/airbnb/enzyme/issues/1265 Mikel 在另一个答案中给出了一个示例 src/setupTests.js 文件。
2021-06-05 00:00:22
对于使用 creat-react-app 的人，您不必在 package.json 文件中进行输入。只需在 src 下创建 setupTests.js ，它就会被自动选择。也只是 ust import Adapter 而不是 * as Adapter
2021-06-16 00:00:22
为了获得有用的答案，需要扩展此反应。解释为什么这是对问题的回答。
2021-06-19 00:00:22

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

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

test('message box', ()=> {
     ...
})
这就是为我修复它的原因。
2021-06-06 00:00:22
这也是唯一对我有用的东西，但我注意到它只是 VS Code 的 Jest Runner 扩展中的一个问题，所以我找到了一些配置。看我的帖子。
2021-06-06 00:00:22

正如Priyank 所说，如果您使用 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”。当我更改名称时，它起作用了。
2021-05-27 00:00:22
这有效。对于 Typescript 项目，它需要有一个 .ts 扩展名：src/setupTests.ts
2021-05-28 00:00:22
为什么我们需要适配器，就像在官方文档中一样，他们也告诉使用适配器，但为什么需要它。初学者玩笑和酶。我不知道这是否是一个好问题
2021-06-01 00:00:22

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

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

开玩笑的配置文件

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

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

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

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

这就是为我所做的。我什至从未从 create-react-app 中弹出我的应用程序，它只是从来没有拿起它！
2021-06-21 00:00:22
其它你可能感兴趣的问题
上一篇呈现不同组件警告时无法更新组件 下一篇如何使 javascript scrollIntoView 平滑？