前端单元测试都能做什么呢
1.在测试之前，我们先来了解两个东西，这个东西我们用的太多了，一定要分清楚，那么我们先来看一下，他们之间有什么区别。
vue-test-utils?提供了两种方式用于渲染，或者说?加载（mount） ?一个组件 --?mount?和?shallowMount。一个组件无论使用这两种方法的哪个都会返回一个?wrapper，也就是一个包含了 Vue 组件的对象，辅以一些对测试有用的方法。那么?mount?和?shallowMount到底有什么不同呢，让我们来运行下面的代码进行尝试
2.测试文件，我们要写道哪里呢？其实写道哪里都是可以的。test runner 会在项目test文件夹下索引xxx.spec.js来执行.
我们不在test文件夹中创建测试文件会发生什么呢？下面是我们做出的操作，通过运行测试，我们可以看到，不在test文件夹中的测试文件，并没有得到执行。
3.好了，讲了这么多，我们的第一个测试用例还没有编写，赶紧让我们行动起来把。
我们现在views文件夹中创建一个test1.vue 并写上下面的内容。
<template>
<div>
{{ greeting }}
</div>
</template>
<script>
export default {
name: "Greeting",
data() {
return {
greeting: "Vue and TDD"
}
}
}
</script>
这样的一个vue文件我们可以测试什么呢？首先我们就可以确定这个div内渲染的东西是不是我们想要的。
import { mount } from '@vue/test-utils'
import Greeting from '@/views/test1.vue'
describe('Greeting.vue', () => {
it('renders a greeting', () => {
const wrapper = mount(Greeting)
expect(wrapper.text()).toMatch("Vue and TDD")
})
})
我们先看一看这个测试文件都干了什么!
第一步，他引入了@vue/test-utils为我们提供的mount方法来渲染组件，然后引入了对应我们要测试的test1.vue文件。
执行describe方法，那么这个方法是什么东西呢？让我们打开Jest的官方文档来看一下。
我靠，这个文档翻译的不是很好啊，英文不好的小伙伴怎么办啊。当然是一点点借助翻译工具了。
describe(name, fn)?creates a block that groups together several related tests. For example, if you have a?myBeverage?object that is supposed to be delicious but not sour, you could test it with:
翻译下就是创建将几个相关测试组合在一起的块。?例如，如果你有一个myBeverage对象，它应该是美味的，但不是酸的，你可以用以下方法来测试它，他有两个参数第一个是测试套件名称，第二个参数是一个函数。
it 又是什么呢，这个东西就是创建一个测试用例，这里面有很多API，我们需要在vue-test-utils.vuejs.org/zh/这个网址来查看。
expect(wrapper.text()).toMatch("Vue and TDD")
我们来打印一下试试哦。
我们修改test1.spec.js
import { mount } from '@vue/test-utils'
import Greeting from '@/views/test1.vue'
describe('Greeting.vue', () => {
it('renders a greeting', () => {
const wrapper = mount(Greeting)
console.log(wrapper.text())
expect(wrapper.text()).toMatch('Vue and TDD')
})
})
expect()这个方法又是什么东西。
这个图有点问题安排，这应该反应成你很少会单独使用expect()
toMatch()是什么意思呢?
.toMatch(regexp | string)
使用. tomatch检查字符串是否与正则表达式匹配。
例如，你可能不知道essayOnTheBestFlavor()到底返回什么，但你知道它是一个很长的字符串，子字符串葡萄柚应该在那里的某个地方。?你可以用以下方法来测试这个:
describe('an essay on the best flavor', () => {
test('mentions grapefruit', () => {
expect(essayOnTheBestFlavor()).toMatch(/grapefruit/);
expect(essayOnTheBestFlavor()).toMatch(new RegExp('grapefruit'));
});
});
这个匹配器也接受一个字符串，它将尝试匹配：
describe('grapefruits are healthy', () => {
test('grapefruits are a fruit', () => {
expect('grapefruits').toMatch('fruit');
});
});
那么像.toMatch()这样的匹配器有多少呢？我们可以打卡Jest官网从jestjs.io/zh-Hans/doc…
not()这个节点开始看。下面的都是匹配器。我后期会逐步翻译好，这个会很快，后面大家看这个就行，毕竟之前翻译过flutter的英文文档。
单元测试范围
·一个方法
· 一个简单操作
为什么进行单元测试
·分模块开发，方便定位到哪个单元出了问题 （单元测试后进行代码合并）
·保证了代码质量
·驱动开发 （测试驱动开发，敏捷开发核心）
function a(num1 + num2) {
retrun num1 + num2
}
function a() {
var num = b()
}
测试本身进行a方法本身，单元测试需要排除b方法（b方法本身是外部，应该屏蔽b方法），不进行测试。
核心工作
1.编写测试用例 写一个a方法，对于a方法的测试就是一个测试用例。
2.测试套件 测试page1页面，包含了12方法。 包含12个测试用力， 12个方法组成一个测试套件 一个测试套件就是针对一个页面 就是一套测试用力的包装。
测试流程
1.import 对应组件 拿到的组件并不是真正的组件实力，而是这个组件的选项配置。
2.测试一个组件测试的是方法和渲染结构，拿到的是mounted阶段的组件。
3.利用@vue/test-util 把一个选项配置编程一个实力（依靠里面的方法，mount，shallMount）。
4.二者区别 mount联通自组件一起渲染到mounted阶段 shallMount 不会渲染组件中的自组件。
5.jest.spyOn() 因为Vue中的jest版本比较老。
6.vue的渲染是异步的 nextTick 重新渲染完成，我们怎么通过单元测试进行渲染。
7.什么是微任务，什么是宏任务 包裹在settimeout 中。
8.vue单元测试中我们大量测试渲染结果的。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
