前几天在基础API上面转了一下 现在准备向原理源码进军了。有个小问题先要处理一下。就是研究一下如何把Vue3的单元测试跑起来。毕竟光读代码不运行是没有灵魂的。歪歪一下中国的球迷是不是就是光看不踢。
Vue3代码是基于Jest进行测试，我们先简单看看什么是jest
Jest简介
Jest 是Facebook的一个专门进行Javascript单元测试的工具，适合JS、NodeJS使用，具有零配置、内置代码覆盖率、强大的Mocks等特点。
总之目前来讲JS界Jest是一套比较成体系的测试工具。为什么这么说呢比如拿以前的测试框架Mocha对比 他只是一个测试框架，如果你需要断言还需要专门的断言库比如assert shoud expect等等 如果需要Mock还需要住啊们的库来支持很不方便。不过Jest基本上可以一次性搞定。
目录文件名约定
Jest测试代码和逻辑代码是遵从约定优于配置（convention over configuration）其实这个也是目前编程世界普遍接受的原则。
Jest的测试代码是基于以下约定
- 测试文件名要以spec结果
- 测试文件后缀为js，jsx，ts，tsx
- 测试文件需要放在tests/unit/目录下或者是/tests/目录下 只要满足这三个要求的测试文件，使用运行jest时就会自动执行。
其实这个规定类似于Maven对于测试代码和逻辑代码的约定只是test目录换成了
__tests__
下面我们具体看一下Vue3源码的目录结构
其实逻辑代码和测试代码对应放置还是很方便的 我们再看看另外一个reactive这个包
运行全量测试
package.json文件中已经配置好了jest
npm run test
覆盖率
我们增加一个参数把覆盖率跑出来
npx jest --coverage
实际上跑覆盖率的时候是有错的 我们先不去管他 我们先解析一下这个报告怎么看，如果大家学过软件工程会知道一般从理论上讲覆盖率包括
- 语句覆盖
- 节点覆盖
- 路径覆盖
- 条件组合覆盖
但是一般来讲不同框架理解不一样 在Jest这里大概是这样分解的
- %stmts是语句覆盖率（statement coverage）：是不是每个语句都执行了？
- %Branch分支覆盖率（branch coverage）：是不是每个if代码块都执行了？
- %Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？
- %Lines行覆盖率（line coverage）：是不是每一行都执行了？
单独运行一个测试
比如我们看看vue的index这个测试
有两种方法进行单独测试
// 全局安装 npm i jest -g jest index // 或者更更简便一点 npx jest index
index.spec.ts
import { createApp } from '../src' it('should support on-the-fly template compilation', () => { const container = document.createElement('div') const App = { template: `{{ count }}`, data() { return { count: 0 } } } createApp().mount(App, container) // 断言 expect(container.innerHTML).toBe(`0`) })
声明中说为了确认模板编译可以生效，这个就是一个简单的数据绑定 最后 断言也是看了一下 count是否为 0 这个例子其实除了断言部分其实直接拷贝到第一次讲的那个html文件里面是可以运行的。
响应式Reactive的单元测试
看一下每个包对应的测试代码都放在__tests__文件件中
npx jest reactive --coverage
好了后面我们就可以开始向源码进军了
