如何在异步函数中测试 jest.fn().mock.calls

Question

我正在使用 Enzyme 和 Jest 测试 React Native 组件。我已经能够测试是否调用了模拟函数（在这种情况下为 Alert.alert），如下所示：

Alert.alert = jest.fn();
someButton.simulate('Press');

expect(Alert.alert.mock.calls.length).toBe(1);

这种方法效果很好。

无论如何，我有一个登录按钮，它启动一个提取。我的 fetch 函数是这样的：

fetch(ipAddress, {
           ...
        })
            .then(response => response.json())
            .then((responseJson) => {
                if (responseJson.login === 'success') {
                    Alert.alert('Login', 'Logged in succesfully!');
                    console.log('i'm here');

我用 promise 模拟了一个 fetch。我将控制台打印添加到我的 fetch 函数中，并注意到它们打印在测试用例中，就像我预期的那样。这意味着 'i'm here' 在测试运行时打印出来。

无论如何，当我在测试用例中模拟登录按钮按下时，Alert.alert.mock.calls.length 为零。我在这里做错了什么？

Answer 1

我没有用 react native 来检查这一点，但我确实为 React 中的服务调用编写了一些测试（我确实使用了你没有使用的 Flux - 但这很好，在不同的地方它是相同的原理）。本质上，当您执行expect 时，承诺链尚未完成。这意味着，Alert 和console.log 都在expect 之后执行，因为默认的承诺实现将所有后续步骤置于事件队列的末尾。

解决这个问题的一种方法是使用https://www.npmjs.com/package/mock-promises - 您的规范中的beforeEach 方法需要像这样调用install：

beforeEach(() => {
  Q=require('q');
  mp=require('mock-promises');
  mp.install(Q.makePromise);
  mp.reset();
  // more init code
});

别忘了

afterEach(() => {
  mp.uninstall();
});

如果您不使用 Q（我当时就这样做了），上面的链接会为您提供有关如何安装其他 Promise 的说明。

现在您有了承诺，不会将事情放在事件队列的末尾，您可以通过调用 mp.tick() 来调用下一个 then。在您的情况下，那将是

it("...", () => {
  Alert.alert = jest.fn();
  someButton.simulate('Press');
  mp.tick();
  mp.tick(); // then and then
  expect(Alert.alert.mock.calls.length).toBe(1);
});

另一种方式，开箱即用是附加另一个 then 和 expects 并返回整个承诺。您可以在这里找到详细信息：https://facebook.github.io/jest/docs/en/tutorial-async.html

基本上，这就是它的样子：

functionReturningPromise = () => {
  // do something
  return thePromise;
}

// now testing it
it("...", () => {
  return /* !!! */ functionReturningPromise().then(() => {
    expect(/*something*/).toBeSth();
  });
});

但是，在您的情况下，这将很难，因为您无法在测试代码中处理承诺。但是，您可以将所有 fetch 逻辑拆分为一个专用方法（该方法至少返回 promise 用于测试）并为此编写一个测试。