jest 学习入门
/* 2019.07.15 夏 晴*/
今天开始正式接触Jest，从前也许听说过，但从来没有了解过。
今天很高兴有机会可以进入Jest世界，准备边学边记录学习过程，以便自己之后的回顾以及希望来看我博客的人可以更容易的学习Jest。
什么是Jest
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
这是我引用官网的一句介绍，简单来说Jest是一个JavaScript测试框架，我们可以在这里配置，测试我们的代码。
向vue项目模板中部署jest
1、安装jest：npm install --save-dev jest @vue/test-utils
2、添加 jest 运行配置
在package.json中定义一个单元测试的脚本
3、在 Jest 中处理单文件组件
为了告诉 Jest 如何处理 *.vue 文件，我们需要安装和配置 vue-jest 预处理器：npm install --save-dev vue-jest
接下来在 package.json 中创建一个 jest 块：
4、运行 npx babel-upgrade --write --install
我之前模板中原使用babel-preset-stage-0 6.24.1，但从发布7版本之后，删除了大量之前版本Babel’s Stage presets，所以我们需要通过该命令进行升级，解决babel版本不兼容问题。
运行结果：package.json、package-lock.json、.babelrc将会更新。
更新后请确认我们上述修改没有变动，若有变动，修改回来。
5、修改.babelrc配置
测试：
1、测试文件
2、测试配置
3、运行
update
1、将jest配置从package.json摘出
注： test/specs 中放置测试配置； test/unit 中放置jest配置
更改package.json中的配置，并可以把原 jest 配置删除
运行结果：
2、添加覆盖率测试
测试含义：
- %stmts是语句覆盖率（statement coverage）：是不是每个语句都执行了？
- %Branch分支覆盖率（branch coverage）：是不是每个if代码块都执行了？
- %Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？
- %Lines行覆盖率（line coverage）：是不是每一行都执行了？
注：
collectCoverage：开启覆盖率测试
collectCoverageFrom：收集测试覆盖率信息的文件
coverageReporters：配置测试覆盖率报告
运行结果：
3、添加快照测试
install工具：npm install --save-dev jest-serializer-vue
测试：
自动生成__snapshots__文件夹，存放生成的快照文件
生成快照后，更改我们之前的hello.vue页面
再次测试运行，结果如下
测试报错，因为渲染出来的页面和之前不符
再将hello.vue添加的那个语句注释，在跑测试，结果如下：
这就是我这两天学习jest，安装测试的步骤，如果有问题，请多多指教，谢谢