Jasmine 测试：如何测试 Promise.then() 块？

Question

我想测试一个场景，我正在调用一个函数（returns 一个承诺），然后在 then 块中，我正在调用另一个名为 'calledInThenBlock()' 的函数。我想测试当 then 块执行时，名为 count 的组件变量的值设置为 2，并调用 calledInThenBlock()。

testIt(){
    this.returnPromise().then((res)=>{
      if(res.data[0].name=="Ankit"){
        this.count=2;
        this.calledInThenBlock();
      }
    }).catch(()=>{
      this.calledInCatchBlock();
    })
  }


 returnPromise(){
    return Promise.resolve({data:[{name:"Ankit"}]});
  }

我不知道如何测试这个场景。如有任何建议，我们将不胜感激。

谢谢！

Answer 1

在您的代码中，您不是在等待 Promise 解析。

testIt() {
  // testIt() returns before the Promise returned by returnPromise() is
  // resolved.
  this.returnPromise().then((res) => {
    if (res.data[0].name == "Ankit") {
      this.count = 2;
      this.calledInThenBlock();
    }
  }).catch(() => {
    this.calledInCatchBlock();
  })
}

it('test testIt()', () => {
  testIt();

  // okay, now how do I know when the Promise returned by returnPromise()
  // is resolved? Or when the value of count will change?
  // Of course, I can make it work by calling the assertions after an
  // arbitrary amount of time, but it doesn't seem like the natural way
  // of doing things.
});

代码很臭。依赖于 testIt() 的客户端希望知道它执行的工作何时完成。在编写单元测试时也会变得麻烦。在 testIt() 调用 之后在测试用例中做出的任何断言可能 在 Promise 解析之前得到评估。将您的函数更改为以下将修复它。

testIt() async {
  try {
    const res = await this.returnPromise(); // wait for the Promise to resolve
    if (res.data[0].name == "Ankit") {
      this.count = 2;
      this.calledInThenBlock();
    }
  } catch (e) {
    this.calledInCatchBlock();
  }
}

要编写异步测试，您可以使用 async/await with Jasmine 解决测试期间返回的承诺。

it('test Example#testIt()', async () => {
  const example = new Example(); // or however you instantiate it.
  await example.testIt(); // wait for the Promise to resolve

  // followed by assertions to validate behaviour correctness.
  expect(example.count).toEqual(2);
});

我提供的代码仅用于说明目的。它可能无法按原样工作。

Jasmine 测试：如何测试 Promise.then() 块？

Jasmine Test : How to test Promise.then() block?

javascript

unit-testing

jasmine

karma-jasmine

angular