在 then() 块内测试代码答案

【问题标题】：Testing code inside of a then() block在 then() 块内测试代码
【发布时间】：2017-11-11 20:03:14
【问题描述】：

所以我正在使用 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 时，由于它从不调用实际函数，它从不调用 then 中的代码，但如果我只是调用该方法不明白 then 是什么。关于如何测试这个的任何想法？谢谢！

【问题讨论】：

标签： node.js unit-testing reactjs asynchronous mocha.js

【解决方案1】：

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

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

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

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

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

现在看看直接测试你的方法是多么的简单！！！

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

【讨论】：

这是一个很好的说明，因为我们现在正在构建项目，所以现在是这样做的好时机。我认为 cshion 可以在短期内解决我的问题，但这绝对是长期解决方案。

【解决方案2】：

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

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

【讨论】：