使用 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

谁能帮忙

enter image description here

Answer 1

From the docs:

Renders a test component that will call the provided callback, including any hooks it calls, every time it renders.

renderHook 用于测试钩子本身，而不是使用该钩子的组件。 renderHook 本身 呈现一个测试组件；您无法通过呈现恰好使用该挂钩的组件来测试挂钩的结果。

在您的情况下，您只是在测试 useState，您完全可以使用 renderHook:

it('test count update', () => {
    const { result } = renderHook(() => useState({ count: 0 }));
    const [state, setState] = result.current;
    setState({count: state + 1});
    expect(state).toBe({ count: 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');
})

使用 renderHook 进行 React Hook 测试

React Hook testing with renderHook

reactjs

react-testing-library

react-hooks

use-state