使用 React Testing Library 测试自定义 React Hooks

测试 React组件

首先，让我们回顾一下如何测试一个基本的React组件。我们来考虑一个名为Counter的组件的例子，该组件显示一个计数和一个在点击时增加计数的按钮。Counter 组件接受一个可选的prop，名为initialCount，如果未提供，则默认为零。以下是代码：

import { useState } from 'react'

type UseCounterProps = {
  initialCount?: number
}

export const Counter = ({ initialCount = 0 }: CounterProps = {}) => {
  const [count, setCount] = useState(initialCount)
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

要使用 React Testing Library测试 Counter组件，我们按照以下步骤进行：

• 1. 使用 React Testing Library的 render 函数渲染组件。
• 2. 使用 React Testing Library的screen对象获取 DOM元素。ByRole 是推荐的查询元素的方法。
• 3. 使用 @testing-library/user-event库模拟用户事件。
• 4. 对渲染输出进行断言。

以下测试验证了Counter 组件的功能：

import { render, screen } from '@testing-library/react'
import { Counter } from './Counter'
import user from '@testing-library/user-event'

describe('Counter', () => {
  test('renders a count of 0', () => {
    render(<Counter />)
    const countElement = screen.getByRole('heading')
    expect(countElement).toHaveTextContent('0')
  })

  test('renders a count of 1', () => {
    render(<Counter initialCount={1} />)
    const countElement = screen.getByRole('heading')
    expect(countElement).toHaveTextContent('1')
  })

  test('renders a count of 1 after clicking the increment button', async () => {
    user.setup()
    render(<Counter />)
    const incrementButton = screen.getByRole('button', { name: 'Increment' })
    await user.click(incrementButton)
    const countElement = screen.getByRole('heading')
    expect(countElement).toHaveTextContent('1')
  })
})

第一个测试验证了Counter组件默认渲染为0。在第二个测试中，我们为 initialCount prop 传入了值1，并测试渲染的计数值是否也为1。

最后，第三个测试检查 Counter 组件在点击增加按钮后是否正确更新了计数。

测试自定义 React hooks

现在，让我们看一个自定义hook的例子以及如何使用React Testing Library进行测试。我们已将计数逻辑提取到名为 useCounter 的自定义React hook中。

该hook 接受一个初始计数作为可选prop，并返回一个具有当前计数值和增加函数的对象。以下是useCounter hook 的代码：

// useCounter.tsx
import { useState } from "react";

type UseCounterProps = {
  initialCount?: number
}

export const useCounter = ({ initialCount = 0 }: CounterProps = {}) => {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return { count, increment };
};

使用这个自定义hook，我们可以很容易地向我们React应用的任何组件添加计数功能。现在，让我们探讨如何使用 React Testing Library进行测试。

// useCounter.test.tsx
import { renderHook } from "@testing-library/react";
import { useCounter } from "./useCounter";

describe("useCounter", () => {
  test("should render the initial count", () => {
    const { result } = renderHook(useCounter);
    expect(result.current.count).toBe(0);
  });
})

在这个测试中，我们使用renderHook() 渲染我们的useCounter() hook，并使用 result 对象获取其返回值。然后，我们使用 expect()验证初始计数是否为 0。

请注意，值保存在result.current 中。将 result视为最近提交值的引用。

使用 renderHook() 的option

我们还可以通过将选项对象作为 renderHook()函数的第二个参数传递来测试 hook是否接受并呈现相同的初始计数：

test("should accept and render the same initial count", () => {
    const { result } = renderHook(useCounter, {
      initialProps: { initialCount: 10 },
    });
    expect(result.current.count).toBe(10);
});

在这个测试中，我们使用renderHook()函数的initialProps属性将一个initialCount属性设置为10的options对象传递给我们的useCounter()钩子。然后使用expect()验证计数是否等于10。

使用 act() 更新状态

对于我们的最后一个测试，让我们确保增加功能按预期工作。

为了测试 useCounter() hook 的increment功能是否按预期工作，我们可以使用 renderHook()渲染 hook并调用 result.current.increment()。

然而，当我们运行测试时，它失败并显示错误消息：“Expected count to be 1 but received 0”。

test("should increment the count", () => {
    const { result } = renderHook(useCounter);
    result.current.increment();
    expect(result.current.count).toBe(1);
});

错误消息还提供了出错的线索：“An update to TestComponent inside a test was not wrapped in act(...).”。这意味着导致状态更新的代码，在这种情况下是增加函数，应该被包装在 act(...)中。

具体来说，当测试涉及状态更新的代码时，将该代码与 act()函数一起包装是非常重要的。这有助于准确模拟组件的行为，并确保测试反映真实世界的场景。

请注意，act()是 React Testing Library提供的一个辅助函数，用于包装导致状态更新的代码。尽管该库通常会将所有此类代码包装在 act()中，但在测试直接调用导致状态更新的函数的自定义hook时，这是不可能的。在这种情况下，我们需要手动使用 act()将相关代码包装起来。

// useCounter.test.tsx
import { renderHook, act } from '@testing-library/react'
import { useCounter } from './useCounter'

test("should increment the count", () => {
    const { result } = renderHook(useCounter);
    act(() => result.current.increment());
    expect(result.current.count).toBe(1);
});

通过用 act() 包装increment()函数，我们确保在执行断言之前应用了对状态的任何修改。这种方法还有助于避免由于异步更新而可能引起的潜在错误。

结论

在使用 React Testing Library 测试自定义 hook时，我们使用 renderHook()函数来渲染我们的自定义 hook，并验证它是否返回了预期的值。如果我们的自定义 hook 接受 props，我们可以使用renderHook()函数的initialProps选项传递它们。

此外，我们必须确保任何导致状态更新的代码都被act()实用工具函数包装起来，以防止错误发生。