使用 renderHook 进行 React Hook 测试

Question

我想使用 @testing-library/react-hooks 中的 renderHook 来测试组件的状态更新，这让我们可以像在 React 功能组件中一样渲染钩子。 只是想知道，这是否仅适用于自定义挂钩，因为当我尝试使用此方法来测试组件时，状态没有改变

it('test count update', () => {
    const { result } = renderHook(() => useState({ count: 0 }));
    const [state, setState] = result.current;
    const wrapper = mount(<ComponentToTest />);

    act(() => {
       wrapper.find('button').simulate('click');
    })
    expect(state).toBe({ count: 1 });
})

出现错误，因为计数未更新且仍为 0

有人可以帮忙吗

Answer 1

来自文档：

渲染一个测试组件，该组件将在每次渲染时调用所提供的回调，包括它调用的任何挂钩。

renderHook

用于测试钩子本身，而不是测试使用该钩子的组件。

renderHook

本身呈现一个测试组件；您无法通过渲染恰好使用该钩子的组件来测试该钩子的结果。

就你而言，你只是在测试

useState

，你绝对可以用

renderHook

来做到这一点：

import { useState } from 'react'
import { renderHook, act } from '@testing-library/react'

it('test count update', async () => {
  const { result } = renderHook(() => useState({ count: 0 }))
  const [state, setState] = result.current
  act(() => setState({ count: state.count + 1 }))
  const [nextState, _] = result.current
  expect(nextState.count).toBe(1)
})

但这似乎毫无意义；我们知道

useState

有效。

如果您想测试使用

useState

（或任何钩子）的组件，您需要渲染组件本身并在渲染的组件中断言该钩子的结果。例如

it('test count update', () => {
    const wrapper = mount(<ComponentToTest />);

    act(() => {
       wrapper.find('button').simulate('click');
    })
    // assuming the result is rendered in a span with a classname of 'result'
    expect(wrapper.find('span.result').text()).toBe('1');
})