时间戳

首页 > 解决方案 > 测试时，我应该如何在具有状态钩子的功能性有状态组件中模拟状态？

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

问题描述

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

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

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

标签： reactjsreact-testing-library

解决方案

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

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

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

可以使用 mock 来测试 api 调用的加载状态。如果您不使用一些花哨的库而只是正常工作await apiCall()，那么您可以使用以下方法：

  1. 模拟你的 api 调用（你可能已经这样做了）
  2. Promise()从无法解析的模拟中返回 a

酶的例子：

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);
});

推荐阅读