NNGX,又踩坑了。换个了环境，代码里面的api接口没还完，uat环境测试测着测到sit环境去了，记大过。抛开其他种种，发现自己不懂前端单元测试的东西，大过！今天翻出来vue官方自带vue-test-utils，虽然之前见到，但是没有重视，趁此机会赶紧补补.
快速尝鲜
按照官方教程，先安装官方案例跑起来一个简单的计数器测试案例。
git clone https://github.com/vuejs/vue-test-utils-getting-started
cd vue-test-utils-getting-started
npm install
安装完成之后打开里面我们要测试的单元代码，就是一个按钮，显示数字，点击按钮，数字+1，小小的案例。
export default {
template: `
<div>
<span class="count">{{ count }}</span>
<button @click="increment">Increment</button>
</div>
`,
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count++
}
}
}
写一个单元测试的代码，代码如下,里面包含了一个单元测试的三条测试用例，每个it函数里面包含一个。 mount是可以将要进行测试的组件处理成可用的对象。官方翻译mount方法创建包裹器。（这里吐槽，能不能不要起各种奇奇怪怪的名字了。谷歌翻译的包装纸倒也挺贴切）
import { mount } from '@vue/test-utils'
import Counter from './counter'
describe('计数器', () => {
// Now mount the component and you have the wrapper
const wrapper = mount(Counter)
it('渲染正确的标记', () => {
expect(wrapper.html()).toContain('<span class="count">0</span>')
})
// it's also easy to check for the existence of elements
it('是一个按钮', () => {
expect(wrapper.contains('button')).toBe(true)
})
it('点击按钮应该使得计数递增', () => {
expect(wrapper.vm.count).toBe(0)
const button = wrapper.find('button')
button.trigger('click')
expect(wrapper.vm.count).toBe(1)
})
})
然后我们运行一下
npm test
//下面是运行结果
计数器
√ 渲染正确的标记 (14ms)
√ 是一个按钮 (26ms)
√ 点击按钮应该使得计数递增 (8ms)
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 5.191s
Ran all test suites.
总共总共1个测试套件，1个通过，总共3条测试，通过3个，快照没有，时间5.191s，运行完了所有的测试套件。
差不多意思就是最后会生成一个报告，不过只有大标题和小标题，还有结果。
describe it expect 相关
单元测试，目的最后呈现出来
describe是一个全局函数，声明一个测试套件（大标题）。两个参数，一个字符串（叫啥名），一个回调函数（干啥事）。
it 是一个全局函数,声明一条测试用例（小标题）。依然两个参数，一个字符串（叫啥名）,一个回调函数（干啥事）。
expect 在编写测试时，通常需要检查值是否符合某些条件。api地址： https://jestjs.io/docs/zh-Hans/expect
- toContain 看内容中是否包含 ‘0’ 这个html
- toBe 等于
- .toMatchSnapshot() 写入快照，例如 expect(wrapper.element).toMatchSnapshot()
- .toBeTruthy() 断言
下面是还有四个其他全局函数，用于做些铺垫工作，准备测试数据，建立测试场景等等，测试完之后还要卸载。 beforeEach it测试用例执行前做的事儿 afterEach it测试用例执行后做的事儿 beforeAll describe测试套件执行前做的事儿 afterAll describe测试套件执行后做的事儿
可测试对象的创建（包裹器wrapper）
使用 mount 创建一个可测试对象，会把其中的内容进行组件及子组件全部渲染。默认传入组件，可选传入挂载内容。
使用 shallowMount 创建一个可测试对象，只挂载需要的组件，子组件不渲染。默认传入组件，可选传入挂载内容。
挂载内容包含插槽、模拟mock数据、prop对象、等等。另外本地我测试的没生效， TypeError: (0 , _testUtils.shallowMount) is not a function ）
可测试对象Wrapper包裹器的属性与方法 https://vue-test-utils.vuejs.org/zh/api/wrapper/
常用
- .element 跟目录DOM
- contains() 判断 Wrapper 是否包含了一个匹配选择器的元素或组件。
- emitted() 返回一个包含由 Wrapper vm 触发的自定义事件的对象。
- exists() 断言 Wrapper 或 WrapperArray 是否存在。
- find() 返回匹配选择器的第一个 DOM 节点或 Vue 组件的 Wrapper。
- findAll() 返回一个 WrapperArray。可以使用任何有效的选择器。
- html() 返回 Wrapper DOM 节点的 HTML 字符串。
- is() 断言 Wrapper DOM 节点或 vm 匹配选择器。
- isEmpty() 断言 Wrapper 并不包含子节点。
- isVisible() 断言 Wrapper 是否可见。
- isVueInstance() 断言 Wrapper 是 Vue 实例。
- name() 如果 Wrapper 包含一个 Vue 实例则返回组件名，否则返回 Wrapper DOM 节点的标签名。
- props() 返回 Wrapper vm 的 props 对象。如果提供了 key，则返回这个 key 对应的值。
- setData() 设置 Wrapper vm 的属性。
- setMethods() 设置 Wrapper vm 的方法并强制更新。
- setProps() 设置 Wrapper vm 的 prop 并强制更新。
- setValue() 设置一个文本控件或 select 元素的值并更新 v-model 绑定的数据。
- trigger() 在该 Wrapper DOM 节点上触发一个事件。
呃，WrapperArray就是一组wrapper还有的方法和属性。呃，https://vue-test-utils.vuejs.org/zh/api/wrapper-array/
jest测试覆盖率
jest里面增加配置即可生成测试覆盖率的报告，控制台也会显示对应的结果。
=============================== Coverage summary ===============================
Statements : 96.67% ( 29/30 )
Branches : 61.11% ( 11/18 )
Functions : 87.5% ( 7/8 )
Lines : 95% ( 19/20 )
================================================================================
另外自己会新建一个coverage文件夹,里面有html版本的覆盖率报告。
留下疑问：
目前算是笔记学习吧，后面在项目中跑跑，才能有更深入的理解了。
- 一个文件时候，控制台会打出所有的结果，逐条打勾的效果。2个测试文件的时候，居然只显示了结果，不明显，还没有详细的去了解具体配置。
