Cypress

[hifizz]

本Issue对应分支：feature-cypress

Cypress 是一个对项目进行浏览器测试的工具（可以理解为一个执行器）。它可以让你可视化的看到你的测试代码如何执行的，同时可以看到应用界面的变化。

快速了解：https://player.vimeo.com/video/237527670

Cypress 能够让我们很轻松的写出端到端的测试（end-to-end testing），节约测试同学的时间成本。对代码质量要求较高的项目来说，端到端的测试就省去了很多一遍遍的手工回归。

Cypress 提供了和jQuery完全一致的selector，选取dom非常方便。而本项目使用了CSS Module，节点上的class name是会变化的，Cypress 选取节点的时候可以使用 data-* attributes 来做选择器。可查看这里： Selecting-Elements

比如：

<button id="main" class="btn btn-large" data-cy="submit">Submit</button>

则可以

cy.get('[data-cy=submit]').click()

这样就解决了我们的CSS Module带来的影响。

[hifizz]

由于 Cypress 深度集成了 mocha，自然是不能直接使用我们在项目中提供的Jest做测试框架了。Cypress本身就是作为一个测试框架。但React 的项目使用自家测试工具Jest是极其方便的。 那么怎么才能在Cypress中使用jest呢？

Using Jest matchers in Cypress – Nicholas Boll – Medium