在测试时，我应该如何模拟具有状态挂钩的功能性有状态组件中的状态

Question

如果我有一个使用状态挂钩的有状态功能组件，我如何从组件外部操作状态？我希望能够更改测试中的状态，以便测试dom是如何更改的。

我希望能够从组件外部更改这样的东西的值：

const [sent, setSent] = useState(false);

Answer 1

我不会测试组件的内部状态，而是测试这个状态可能代表什么。状态的使用是一个实现细节，您应该测试规范是否正确实现，而不是如何实现。

在你的情况下，我会使用以下方法：

1. 调用应设置发送状态的功能(单击按钮，表单提交(
2. 测试在您的组件(显示成功消息？(

测试api调用的加载状态可以通过mock来实现。如果您不使用一些花哨的库，而只使用普通的await apiCall()，那么您可以使用以下方法：

1. 模拟你的api调用(你可能已经在做了(
2. 从mock返回一个不会被解析的Promise()

酶示例：

import { apiCall } from '../api';
jest.mock('../api');
// ...
it('Contains a <Loading /> on loading', () => {
// The promise won't be resolved so the loading state will persist
apiCall.mockReturnValue(new Promise(() => null));
// await act... and wrapper.update() might not be needed 
// depending on your implementation
await act(async () => {
wrapper.find(SubmitButton).simulate('click');
});
wrapper.update();
expect(wrapper.find(Loading)).toHaveLength(1);
});