测试你的前端代码 – part4（集成测试）

正文

请到「今天看啥」查看全文

, function () {

...

it ( 'should work' , function () {

ReactDom . render ( e ( CalculatorApp ), document . getElementById ( 'container' ))

const displayElement = document . querySelector ( '.display' )

expect ( displayElement . textContent ). to . equal ( '0' )

注意看第 10 – 14 行，首先 render 了 CalculatorApp 组件，这个操作同时也 render 了 Display 和 Keypad。第 12 和 14 行测试了 DOM 中计算器的显示是否是 0（初始化状态下）。

上面的代码是可以运行在 Node 下的，注意到里面用的是 document。我第一次使用它的时候特别惊讶。全局变量 document 是一个浏览器变量，竟然可以使用在 NodeJS 中。在这简单的几行代码背后有着大量的代码支撑着，这些 jsdom 代码几乎是完美地实现了浏览器的功能。所以这里我要感谢 Domenic Denicola, Elijah Insua 和为这个工具包做过贡献的人们。

第 10 行中也使用了 document（调用 ReactDom 来渲染组件），在 ReactDom 经常会使用它。那么在哪里创建的这些全局变量呢？在测试中创建的，见下面代码：

before ( function

请到「今天看啥」查看全文