前端自动化测试（从0到1）

基础测试样例

代码演示

看看在浏览器中的情况（我在添加新的东西时，不小心更改了之前的代码，所以显示如下）

改进测试样例

测试框架：Jest

jest框架的运行环境是基于node的。

除了jest框架外，还有jasmine、mocha-chai。

而一个好的前端测试框架应具备：性能、功能、易用性。

Jest框架优点：速度快、API简单、易配置、隔离性好、监控模式、IDE整合、Snapshot、多项目并行、覆盖率、Mock丰富。

jest框架帮我们完成的是两类的内容：单元测试(模块测试)、集成测试(多模块测试)。因此我们在使用jest框架时需要将方法进行导入导出。

而加入导入导出后，代码在浏览器中需要通过添加一下代码才可以运行在浏览器中。（在前端框架或者node中就不需要这样写了，因为本来就是以模块的方式）

使用jest框架修改测试样例

npm init

npm install jest@24.8.0 -D

修改对应文件

npm run test

运行正确结果如下：

运行错误结果如下：

Jest的简单配置

通过npx jest --init会有一下选择：

·选择node还是浏览器环境

·选择覆盖率coverage

·选择是否清除mock

截至到这里，你就会看到有生成一个jest.config.js文件。

运行npx jest --coverage，你会看到如下图以及一个coverage目录文件：

而且你可以在生成的coverage文件里面的index.html中可以看到：