Jest 测试 React 应用遇到的问题及解决方法

前言

随着前端技术的不断发展，代码质量和测试覆盖率也成为了我们关注的焦点。在众多前端测试框架中，Jest 是一个非常强大的测试工具，它拥有着快速、简单、适用性广等特点。然而，在实际使用中，我们也会遇到一些问题，这篇文章将会向你介绍 Jest 在测试 React 应用时可能会遇到的问题及解决方法。

问题一：Enzyme 与 Jest 配合

在测试 React 应用时，我们常常使用 Enzyme 来模拟组件的渲染及 DOM 操作。然而，由于 Enzyme 的版本升级过程中，与 Jest 的配合可能会有一些问题。当我们在测试中使用 Enzyme 的 mount 或 shallow 方法时，可能会得到以下错误信息：

Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })` before using any of Enzyme's top level APIs, where `Adapter` is the adapter corresponding to the library currently being tested. For example: import Adapter from 'enzyme-adapter-react-15'; // for React 15.x import Adapter from 'enzyme-adapter-react-16'; // for React 16.x or 17.x

发生该错误的原因是 Enzyme 在 3.x 版本中需要手动安装适配器。可参考以下命令安装适配器：

npm install --save-dev enzyme enzyme-adapter-react-16

同时，在测试文件中引入并配置适配器即可解决该问题：

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

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

问题二：React 异步处理

当我们在测试 React 的异步代码时可能会遇到一些问题，比如在测试 componentDidMount 生命周期方法时，由于请求数据是异步的，导致测试无法立即执行并等待数据加载。此时，我们可以使用 Jest 的 done() 方法来处理异步代码。例如：

it('fetches async data', done => {
  const wrapper = shallow(<AsyncFetch />);
  setImmediate(() => {
    expect(wrapper.state().data).toEqual(mockResponseData);
    done();
  });
});

在上述代码中，我们使用 Jest 提供的 setImmediate 方法来表示请求数据后立即执行测试。然后在回调函数中使用 Jest 的 done 方法来通知测试已经执行完毕。注意，在测试中一定要记得执行 done 方法，否则测试将会一直等待异步代码的执行结果。

问题三：组件快照不稳定

在测试 React 组件时，我们可以通过快照测试来保证组件的 UI 显示与预期一致。但是，快照测试也可能会遇到一些问题。比如每次运行测试结果都发生了变化，即使在组件的 UI 没有发生变化的情况下。这是因为 Jest 中的快照测试是基于组件的所有状态和属性来生成快照的。当组件的状态或属性改变时，快照也会进行更新。而在一些场景中，组件的某些状态或属性不是真正影响组件 UI 显示的，因此不应该出现在快照中。例如一个随机 ID 或时间戳等值。在这种情况下，我们可以为组件添加 data-* 属性，并在测试时排除这些属性。示例代码：

it('matches snapshot without dynamic data', () => {
  const wrapper = render(<MyComponent data-testid='my-component' dynamic-data='12345' />);
  expect(wrapper).toMatchSnapshot({
    // 此处 data-testid 属性是为了选中组件节点，如果没有可以忽略
    // 排除 dynamic-data 属性
    // 。。。
  });
});

我们可以使用 Jest 的 toMatchSnapshot 方法，并将 toMatchSnapshot 方法返回的快照对象用对象形式进行修改，以去掉不需要的属性。例如，我们可以为组件的动态值添加 data-* 属性后，在测试时排除这些属性。

总结

Jest 是一个非常强大的测试工具，能够提高我们前端应用的代码质量和测试覆盖率。但是在实际使用中，我们也会遇到一些问题。本文讨论了在测试 React 应用时常遇到的三个问题，以及解决方法。除此之外，在编写 Jest 测试用例时，还需要注意不同的测试场景，细心排查错误，严格定义测试用例。这样才能使我们的测试更加严谨，让我们的应用程序稳如老狗。

参考链接

• Jest 官方文档
• Jest を使って React 開発におけるテストを効率的に実行するには？
• React Testing with Jest and Enzyme Part 1: Introduction and Installation

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