Question

我的react / redux应用程序中有一个保存工作流，需要两个API调用。仅当第一个呼叫成功完成后，第二个呼叫才发生。该应用程序运行良好，现在我要添加一些自动化的端到端测试。

我能够触发onSave函数并验证对saveRates的调用，但是我无法在测试中触发第二个API调用。这是代码

function onSave() {
  // PUT to /rates/<id>
  dispatchProps.saveRates()
  .then(() => {
    // PUT to /apps/<id>
    dispatchProps.saveApplications()
    .then(() => {
      // Done
    });
  });
}

这是测试代码。我正在使用Axios进行应用程序中的API调用，并使用jest-mock-axios在测试中模拟axios。

// At this point, `onSave` has been called


// This test passes
expect(mockAxios.put).toHaveBeenCalledWith(`rates/${rateId}`, { rate: { id: rateId }});
mockAxios.mockResponse({ status: 200 }, mockAxios.lastReqGet());

// This test fails with the error indicating that the expected API call was actually `PUT rates/<id>`
expect(mockAxios.put).toHaveBeenCalledWith(`app/${appId}`, { app: { id: appId, rate: rateId }});
mockAxios.mockResponse({ status: 200 }, mockAxios.lastReqGet());

第一个API调用saveRates的承诺似乎尚未解决。 mockResponse调用可以解决诺言，但是使用笑话调试器，我发现对saveApplications的调用从未发生。

https://www.npmjs.com/package/jest-mock-axios#axiosmockresponseresponse-requestinfo

如何告诉玩笑等下一个API调用发生？我需要从onSave通话中退还诺言吗？

更新

这可行...所以我怀疑可以在某个地方使用await来解决。

expect(mockAxios.put).toHaveBeenCalledWith(`taxes/event/${window.storeAdminTaxEventUuid}/rates/customer`, taxRatesResponse.data.customer);
    mockAxios.mockResponse({ status: 200 }, mockAxios.lastPromiseGet());

    setTimeout(() => {      
      expect(mockAxios.put).toHaveBeenCalledWith(`taxes/event/${window.storeAdminTaxEventUuid}/application/products`, taxApplicationsResponse.data);    
      mockAxios.mockResponse({ status: 200 });
    }, 0);

如何在React with Jest中测试链接的API调用？

0 个答案: