解决 Enzyme 在 React 16 中报错的问题

前言

在 React 16 版本中，由于采用了 Fiber 架构，导致了一些第三方库的不兼容性问题，其中就包括了 Enzyme。Enzyme 是一个 React 测试工具库，它提供了一种方便的方式来测试 React 组件的渲染结果、事件行为等。然而在 React 16 中，使用 Enzyme 会遇到一些报错的问题，本文将对这些问题进行分析和解决。

问题一：React 16 无法使用 ReactTestUtils

在 React 15 中，我们可以直接使用 ReactTestUtils 来帮助我们进行 React 组件的测试。但是在 React 16 中，由于 Fiber 架构的引入，ReactTestUtils 已经无法使用了。此时我们需要使用新的测试工具库——React Testing Library。

React Testing Library 是一个轻量级的测试工具库，它会以用户的角度出发，进行 DOM 操作和事件触发，以测试组件的行为是否正确。

我们可以使用 npm 来安装 React Testing Library:

npm install --save-dev @testing-library/react

问题二：Enzyme 的 Shallow 无法正确渲染

在 React 15 中，我们可以直接使用 Enzyme 的 Shallow 方法来进行单元测试。但是在 React 16 中，由于 Fiber 的使用，Shallow 将无法正确渲染组件。此时我们可以使用 mount 方法来完成渲染。不过使用 mount 方法会使得测试变得更慢，并且会增加组件之间的相互影响。

另外，我们也可以使用 React Testing Library 的 render 方法来替代 Enzyme 的 Shallow 方法。render 方法会在组件渲染后返回一个包含 DOM 元素的节点结构。

import React from 'react';
import { render } from '@testing-library/react';

test('renders welcome message', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/Welcome to React/i);
  expect(linkElement).toBeInTheDocument();
});

问题三：Snapshots 不再准确

在 React 16 中，由于 Fiber 架构的引入，Snapshots 不再准确。因为 Fiber 的优化会重新安排组件的渲染顺序，从而导致快照的结构发生变化。

此时我们需要通过手动设置测试快照的方式来解决这个问题。我们可以使用 react-test-renderer 库来创建组件的快照，并手动指定组件的样式和属性。

import React from 'react';
import renderer from 'react-test-renderer';
import App from '../App';

test('App render correctly', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

总结

通过本文的介绍，我们了解到了在 React 16 中 Enzyme 的使用问题和解决方案。我们需要转而使用 React Testing Library 来进行组件的测试，并使用 mount 方法来替代 Shallow 方法，以及手动设置测试快照的方法来解决 Snapshot 不准确的问题。希望本文能够对大家学习和使用 React Testing 有一定的指导意义。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3d63848841e989401018e