Enzyme需要配置适配器

Question

我通过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() })

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

Answer 1

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

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

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

Answer 2

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

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

更新：

Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.

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

Answer 3

必须将文件'setupTests'导入到测试文件中:

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

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

Answer 4

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

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

开玩笑的配置文件

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

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

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

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

Answer 5

正如Priyank所说，如果您正在使用Create React App，它将从中获取配置src/setupTests.js。

加：

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

configure({ adapter: new Adapter() })

Answer 6

对我来说，在使用 React 时，create-react-app我必须确保文件名正确。该文件必须src/setupTests.js与s在年底Tests。

里面setupTests.js是这样的：

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

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

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