【送红宝书】JavaScript 测试系列实战（四）：掌握 React Hooks 测试技巧

「为了回馈图雀社区的读者，图雀酱特地挑选了几本书籍送给大家，文末有送书活动详情哦~」

React Hooks 作为复用共同业务逻辑的强大工具，已经在开源库和业务代码中得到了广泛的使用。但是如果一个钩子没有完善的测试覆盖，我们就很难有信心去使用或者分享它。在这篇文章中，我们将体验强大的 react-hooks-testing-library，学习如何去测试钩子的同步和异步逻辑，并最终通过一个完整的例子去了解如何结合 Redux 框架进行测试。

开始使用 react-hooks-testing-library

在上一篇教程中，我们手工编写了非常原始的 React Hooks 测试代码。所幸，由于测试 React Hooks 的需求非常普遍，因此就有了测试 Hooks 的神器：react-hooks-testing-library。它提供了一系列专门用于测试 Hook 的工具函数，能够模拟在真实组件中使用 Hooks。

提示

如果你不熟悉 React Hooks 相关的知识，推荐先学习我们的 React Hooks 相关实战教程。

让我们先安装 react-hooks-testing-library:

npm install @testing-library/react-hooks

react-hooks-testing-library 中最重要的工具之一就是 renderHook 函数，它的工作方式与我们之前创建的 testHook 函数类似。它的参数是至少调用一个 Hook 的回调函数，返回值是一个对象，其中我们需要关心的是其中的 result 属性。result 属性又包含两个属性：

• current：所测试 Hook 的返回值

• error：所测试 Hook 抛出的错误（如果有的话）

让我们来结合实际的例子看一下。在之前 useModalManagement 钩子的测试代码中，我们仅仅只测试了调用 Hook 时不会报错。实际上，我们还希望测试以下用例：

• 默认渲染一个关闭的模态框

• 当调用 openModal 函数时，能够打开模态框

我们来看看新的测试代码：

// src/useModalManagement.test.js
import useModalManagement from './useModalManagement';
import { renderHook, act } from '@testing-library/react-hooks';

describe('The useModalManagement hook', () => {
  it('should not throw an error', () => {
    renderHook(() => useModalManagement());
  });

  it('should describe a closed modal by default', () => {
    const { result } = renderHook(() => useModalManagement());
    expect(result.current.isModalOpened).toBe(false);
  });

  describe('when the openModal function is called', () => {
    it('should describe an opened modal', () => {
      const { result } = renderHook(() => useModalManagement());
      act(() => {
        result.current.openModal();
      });
      expect(result.current.isModalOpened).toBe(true);
    });
  });
});

内容有点多，我们来逐个用例讲解：

1. 测试 Hook 不会报错：我们将原来的 testHook 函数改成 react-hooks-testing-library 的 renderHook 函数，这个函数接受的参数是一个调用 Hook 的函数

2. 测试模态框默认关闭：还是通过 renderHook 渲染 Hook，然后获取到之前提到的 result 对象，进一步通过 result.current.isModalOpened 来获取到模态框的状态，然后用断言语句测试这个状态是 false（关闭状态）

3. 测试打开模态框：这个测试的难点在于怎么去触发 openModal ，所幸 react-hooks-testing-library 提供了 act 工