开玩笑如何等待基于模拟事件调用模拟答案

【问题标题】：Jest how to wait for mock to be called based on simulate event开玩笑如何等待基于模拟事件调用模拟
【发布时间】：2018-03-24 02:36:25
【问题描述】：

我有一个这样的测试失败，因为没有调用模拟，问题是模拟被调用但在测试完成之前。

test('should submit if proper values', () => {
  const spy = jest.fn().mockReturnValue({
    data: {
      authenticateUser: {
        id: 123,
        token: 'lol'
      }
    }
  });
  mountedWrapper.setProps({
    loginMutation: spy
  });
  expect(spy).not.toHaveBeenCalled();
  email.simulate('change', {
    target: { name: 'username', value: 'email@test.com' }
  });
  password.simulate('change', {
    target: { name: 'password', value: 'secret' }
  });
  form.simulate('submit');
  expect(spy).toHaveBeenCalled();
});

但是，如果我添加以下 setTimeout，我可以通过测试

  setTimeout(() => {
    expect(spy).toHaveBeenCalled();
  }, 0);

但是，我正在寻找一种更好的方法来解决上述问题。没有 setTimeout 的任何解决方案？

【问题讨论】：

你能多写一些关于挂载 Wrapper 的代码 sn-ps，电子邮件来自哪里等吗？
抱歉，你的代码还是有点不清楚。在form 上模拟submit 时会发生什么。 loginMutation 是直接调用的，还是在一些动作之后调用的？能否请您添加 sn-ps 以说明这一点？
是通过还是误报？我的意思是，如果你在你的setTimeout 中添加一个expect(true).toBe(false)，它还会通过吗？

标签： reactjs enzyme jestjs

【解决方案1】：

您似乎正在尝试测试一些异步代码。你读过this吗？在callbacks 部分您可以找到：

默认情况下，Jest 测试在执行结束后完成。这意味着此测试将无法按预期进行：

// Don't do this!
test('the data is peanut butter', () => {
  function callback(data) {
    expect(data).toBe('peanut butter');
  }

  fetchData(callback);
});

问题在于，一旦 fetchData 完成，测试就会在调用回调之前完成。有一种替代形式的测试可以解决这个问题。不要将测试放在一个带空参数的函数中，而是使用一个名为 done 的参数。 Jest 会等到 done 回调被调用后才完成测试。

test('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }

  fetchData(callback);
});

如果从不调用 done()，则测试将失败，这就是您想要发生的情况。

这是callback 的示例，但您也可以使用promises、.resolves/.rejects 和async/await。

【讨论】：