哪种酶适配器适用于 React 17？

Question

我有一个 React 应用程序，我想开始用 Enzyme 编写单元测试。Enzyme 的文档讨论了高达 16 的 React 版本。

在src/setupTests.js我目前有

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

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

但我的应用程序使用 React 版本 17.0.1。React 17 有什么酶接头？

Answer 1

React 17 有什么酶接头？

如果你有React 版本 17，你可以使用这个非官方的 React 17 适配器​​来处理酶。

// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

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

有关非官方适配器的更多信息，请参阅此GitHub 问题。

Answer 2

我尝试使用非官方适配器“@wojtekmaj/enzyme-adapter-react-17”，效果很好。谢谢@super Jade。

1. 清除 npm 缓存（清除这可能会使 npm 变慢，但请尝试一下）。

• npm cache verify进而npm cache clean --force

2. 删除你的

• node_modules和package-lock.json

3. 更新你的 npm 依赖package.json项"@testing-library/react": "^11.2.5","@wojtekmaj/enzyme-adapter-react-17": "^0.4.1","react": "^17.0.1","react-dom": "^17.0.1",
4. npm i --legacy-peer-deps
5. 正如@wojtekmaj/enzyme-adapter-react-17提到的在测试文件中进行更改。

• 从以下位置导入适配器'@wojtekmaj/enzyme-adapter-react-17';
• 配置({ adapter: new Adapter() });

Answer 3

在 setupTests.js 文件中添加此代码

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

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