reactjs - 从 Jest 测试中访问 useState 值

Question

在基于类的组件中，我可以通过执行以下操作轻松访问状态:

const control = shallow(<Test />);
control.state()

对于像下面这样的基于钩子(Hook)的组件，如何从我的测试中访问 count？

const Test = () => {
    const [count, setCount] = useState(0);

    return (
        <>
            <button onClick={() => setCount(count + 1)}>Count</button>
            <div>{count}</div>
        </>
    )
}

Answer 1

这是不可能的，也不应该如此，因为状态是一个实现细节。如果将状态重命名为 myCount，组件仍然可以工作，但测试会失败。

替代方案 1:测试 DOM

但是，由于您渲染了计数，因此您可以简单地期望渲染正确的计数。

使用react-testing-library的示例:

import { render, fireEvent } from 'react-testing-library'

const rendered = render(<Test />)
rendered.getByText(0) // Test that 0 is present in the DOM
fireEvent.click(rendered.getByText('Count'))
rendered.getByText(0) // Test that 1 is present in the DOM

替代方案2:提取reducer中的状态逻辑，并测试reducer

如果您确实想单独测试状态更新，您可以 useReducer ，并使用 jest 轻松测试 reducer ，因为它是纯 JavaScript 函数。