如何使用Sinon JS测试异步功能？

问题描述

下面是我要实现的一个最小示例：我想测试fn3()是否在异步函数fn2()解析后（调用fn1时）被调用。但是我以某种方式无法使用sinon的存根语法来做到这一点。我想知道我误会了。

// System Under Test

export function fn1() {
    fn2().then(() => {
        fn3();
    });
}

export async function fn2() {
    return new Promise((resolve,reject) => {
        // expensive work
        resolve();
    });
}

export function fn3() {
    console.log("fn3");
}

// Test

import * as Page from "xxx";

it("test async",() => {
    // stub this async to isolate the SUT
    sinon.stub(Page,"fn2").resolves();
    const stub = sinon.stub(Page,"fn3");

    Page.fn1();

    sinon.assert.calledOnce(stub);
});


/*

    AssertError: expected fn3 to be called once but was called 0 times

      276 |         Page.fn1();
      277 |
    > 278 |         sinon.assert.calledOnce(stub);
          |                      ^
      279 |     });
      280 | });

      at Object.fail (node_modules/sinon/lib/sinon/assert.js:107:21)
      at failAssertion (node_modules/sinon/lib/sinon/assert.js:66:16)
      at Object.calledOnce (node_modules/sinon/lib/sinon/assert.js:92:13)
      at Object.<anonymous> (src/test.test.tsx:278:22)
*/

解决方法

正如@jonrsharpe所建议的那样，您的sinon.assert.calledOnce(stub);将在解析fn2内的Page.fn1承诺（即调用.then(() => { fn3(); })之前被调用，基于JavaScript“单个线程，事件循环”性质。以下是供参考的文章：https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke。

您可以尝试将代码更改为：

    ...

    return Page.fn1().then(() => {
      sinon.assert.calledOnce(stub);
    });
    
    ...

或

it("test async",async () => {
    // stub this async to isolate the SUT
    sinon.stub(Page,"fn2").resolves();
    const stub = sinon.stub(Page,"fn3");

    await Page.fn1();

    sinon.assert.calledOnce(stub);
});

以便在解决sinon.assert.calledOnce(stub);之后调用Page.fn1()。