Question

所以我使用React并使用Mocha / Chai / Enzyme / Sinon进行测试。我的组件中有很多异步调用，我想测试后面的代码，但无法弄清楚如何。

例如，这是我的AddToCart组件中的reserveSession（）方法：

reserveSession() { 
  this.props.reserveExam(id).then((json) => {
    // Code I want to test 
   }).catch(...);
}

以下是我测试的当前设置：

describe('AddToCartButton', () => {
  beforeEach(() => { 
    props = { 
      // set all props to empty or () => null 
    }
    wrapper = mount(<AddToCartButton {...props} />)
  }); 
});

所以我到目前为止发现的是，当我在每个之前模拟this.props.reserveExam，因为它没有调用实际的函数，它从不调用当时的代码，但如果我只要调用它不了解当时的方法。关于如何测试这个的任何想法？谢谢！

Answer 1

如果您熟悉存根，则可以存储变量'props'的属性，因此在调用函数reserveExam时，您强制返回一个解析了json_data的promise。

let json_data = {..custom data};
let stubed = sinon.stub(props,'reserveExam').callsFake(function(){
    return Promise.resolve(json_data);
});

Answer 2

正如它所写的那样，在单元测试中隔离你的then处理程序非常困难。正如您所看到的，必须直接通过promise api来间接调用您的代码是一种痛苦。随着项目的增长和承诺变得更加复杂，维护成本将继续增加。

如果你试图测试你的承诺链的第5步怎么办？你必须在第5步之前删除所有处理程序吗？

通过在承诺链之外定义处理程序，可以创建更加孤立的测试：

var iExist = (json) => {
    dostuff();
}

reserveSession() { 
  this.props.reserveExam(id).then(
     iExist
  ).catch(...);
}

现在看看直接测试你的方法是多么微不足道!!!

当然，在某种程度上，行使您的承诺代码会很好。但它应该只需要一到两次测试来确保所有内容都正确连接，或者你可以间接地将其作为端到端/功能测试的一部分来进行。

测试then（）块内的代码

2 个答案: