Question

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

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

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

Answer 1

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

在您的情况下，我将使用以下方法：

调用应设置发送状态的功能（单击按钮，表单提交）
测试发送状态是否在您的计算机中正确处理组件（显示成功消息吗？）

可以通过模拟来测试api调用的加载状态。如果您不使用某些精美的库，而只是使用常规的await apiCall()，则可以使用以下方法：

模拟您的api调用（您可能已经这样做了）
从无法解决的模拟中返回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);
});

测试时，如何在带有状态挂钩的功能性有状态组件中模拟状态？

1 个答案: