Question

我最近不得不修复一个旧的反应组件的错误。通常在修复错误时，我们会用它编写测试。问题是，react组件从服务器进行异步提取（我可以重构代码，以便将异步操作移动到redux中，但我们不会在此处进行重构作为bug修复的一部分）所以在测试组件是什么时应该渲染，我必须等待500ms允许承诺解决。

我知道如果我创建组件的实例并直接调用方法，我就不必执行setTimeout，我可以只做一个.then，但我们想测试输入/输出组件没有调用内部方法。

是否有比设置超时更优雅的解决方案？这是当前的代码：

it('autofills and locks all the fields where user data is present', function(done) {
    const emailInput = $wrapper.find('#email');
    emailInput.value = 'email@example.com';
    emailInput.simulate('blur');

    // - autofill does an async request
    // - we need to wait for the promise to resolve before
    //   checking if the inputs are disabled or not
    setTimeout(() => {
      const identifierInput = $wrapper.find('#id');
      const lastNameInput = $wrapper.find('#last-name');
      const phoneNumberInput = $wrapper.find('#phone-number');
      const firstNameInput = $wrapper.find('#first-name');

      expect(firstNameInput.html().includes('disabled')).to.be.true;
      expect(lastNameInput.html().includes('disabled')).to.be.true;
      expect(phoneNumberInput.html().includes('disabled')).to.be.true;
      expect(identifierInput.html().includes('disabled')).to.be.true;
      done();
    }, 500);
});

Answer 1

＆＃34;我们不会在这里进行重构作为错误修复的一部分＆＃34; ...哇。

无论如何，如果你需要编写测试来完成你的工作，你需要模拟你的API调用。只要网络有点慢或任何时候，500毫秒的超时都会失败，这是一个非常非常脆弱的测试。

由于您没有详细说明请求是如何生成的，我无法告诉您任何其他内容，但您会发现所有HTTP请求风格的模拟库：fetch-mock for fetch，nock ..有吨。

这个想法是你应该预先设置一个假答案并立即返回（如果需要的话，使用Promise.resolve（））。

一种更优雅的方式来测试摩卡时间

1 个答案: