时间戳

首页 > 解决方案 > 开玩笑 - 承诺在模拟中解决多少时间后？

reactjs - 开玩笑 - 承诺在模拟中解决多少时间后？

问题描述

我有一个开玩笑的测试，我在其中模拟 axios 的实现。

当我渲染我的组件时，它会发出一个 api 调用。

我需要测试我们拨打电话时是否出现了微调器。我需要测试调用完成后微调器是否消失。

我怎么知道模拟承诺何时解决？

axios.get.mockImplementationOnce(() => Promise.resolve({
data:{ query_scores: someData },
}));

const { queryByTestId, getByText } = renderWithRouter(
    <MyComponent />,
  );

  expect(queryByTestId('spinner')).not.toBeNull();

not.toBeNull我如何确定在调用时承诺尚未解决？

注意：我正在使用反应测试库，但问题通常与模拟承诺解决的时间有关。

标签： reactjsjestjsreact-testing-library

解决方案

根据https://jestjs.io/docs/en/asynchronous，承诺返回的时间并没有太大的延迟，而是您需要从测试中返回 Promise 并且 Jest 将等待该 Promise返回（不管有多长）。

test('the data is peanut butter', () => {
  return fetchData().then(data => {
  expect(data).toBe('peanut butter');
  });
});

在您的情况下，根据 jest.io，（https://jestjs.io/docs/en/mock-functions.html）您将使用以下方法返回值：

axios.get.mockResolvedValue(resp);

然后对此进行测试

return Users.all().then(resp => expect(resp.data).toEqual(users));

如果你想为你的 Promise 添加一个时间延迟，你可以使用 setTimeout 来控制返回

const getData = async () => {
  return new Promise(resolve => {
     setTimeout(resolve, 1000);  //added arbitrary delay
   });
 };

然后，如果您使用 await 调用 getData 函数，您可以测试前后响应以查看微调器是否按预期显示和消失

expect(queryByTestId('spinner')).not.toBeNull(); //expect spinner on render
await getData();
expect(queryByTestId('spinner')).toBeNull();  //expect no spinner on data returned

推荐阅读