当我用酶测试类组件时,我可以做wrapper.setState({})
来设置状态。当我用useState()
钩子测试功能组件时,我怎么能这样做呢?
例如,在我的组件中,我有:
const [mode, setMode] = useState("my value");
我想在我的测试中改变mode
当使用钩子中的状态时,您的测试必须忽略状态等实现细节才能正确测试它。您仍然可以确保组件将正确的状态传递给其子项。
你可以在Kent C. Dodds写的这个blog post中找到一个很好的例子。
以下是代码示例中的代码专家。
依赖于州实施细节的测试 -
test('setOpenIndex sets the open index state properly', () => {
const wrapper = mount(<Accordion items={[]} />)
expect(wrapper.state('openIndex')).toBe(0)
wrapper.instance().setOpenIndex(1)
expect(wrapper.state('openIndex')).toBe(1)
})
测试不依赖于州实施细节 -
test('counter increments the count', () => {
const {container} = render(<Counter />)
const button = container.firstChild
expect(button.textContent).toBe('0')
fireEvent.click(button)
expect(button.textContent).toBe('1')
})