从玩笑测试访问useState值

Question

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

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

对于下面的基于钩子的组件，如何从测试中访问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：在化简器中提取状态逻辑，然后测试化简器

如果您真的想单独测试状态更新，则可以useReducer，并使用jest轻松测试化简器，因为它是纯JavaScript函数。