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

【问题标题】：Which Enzyme adapter works with React 17?哪种酶适配器适用于 React 17？
【发布时间】：2021-02-15 20:19:26
【问题描述】：

我有一个 React 应用程序，我想开始使用 Enzyme 编写单元测试。 Enzyme 的 documentation 讨论了 React 最多 16 的版本。

在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 有哪些酶适配器？

【问题讨论】：

标签： reactjs unit-testing enzyme

【解决方案1】：

React 17 有什么酶接头？

如果你有 React 版本 17，你可以使用这个unofficial adapter for React 17 for enzyme。

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

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

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

【讨论】：

哇，已经快一年了，还没有发布适用于 React 17 的适配器（来自 Enzyme 团队）

【解决方案2】：

我尝试使用非官方适配器“@wojtekmaj/enzyme-adapter-react-17”，它工作正常。 感谢@super Jade。

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

npm cache verify 然后npm cache clean --force

删除您的

node_modules 和 package-lock.json

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

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

【讨论】：

在安装 @wojtekmaj/enzyme-adapter-react-17 时不再需要 --legacy-peer-deps 标志 0.6.0。照常进行！ :)

【解决方案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() });

【讨论】：