# vue-unit-test-with-jest

**Repository Path**: xiaolingjs/vue-unit-test-with-jest

## Basic Information

- **Project Name**: vue-unit-test-with-jest
- **Description**: 吃透本仓库，变身vue项目单体测试大神
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 3
- **Created**: 2019-12-19
- **Last Updated**: 2022-07-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-unitTest-with-jest
> 收录于ruanyf/weekly-[55期](https://github.com/ruanyf/weekly/blob/master/docs/issue-55.md#%E8%B5%84%E6%BA%90)
+ 最近项目进入测试期，为了能够更好地进行单元测试，查阅了很多单元测试相关的资料，其中包括拜读了一本关于vue单元测试的书。
+ 该仓库目标是实现从零开始到单元测试无障碍的进阶。
+ 列举了所有可能出现在vue项目中的，需要进行测试的项。可与实际项目中一一对应
+ 当然基于项目的复杂程度，肯定有没有提及到的需测试项，不过相信如果能够理解本仓库内的测试思路，其他测试也是一样的套路。


+ 【追加说明1】本仓库内都是基础的测试用例，为了能更好理解，伪造的例子都比较简单。实际项目中需要在理解本仓库测试思路的前提下，根据项目实际情况写测试。
+ 【追加说明2】覆盖率是用来衡量代码质量的标准，越是复杂的项目要求的覆盖率越低，但是最低不能低于80%，不然就失去测试的意义了。
+ 【追加说明3】本仓库内未进行测试的【router，第三方插件等】并不是绝对不需要测试，如果有单独对插件和router进行设置的话，设置部分是需要测试的。也就是说第三方插件本身我们默认是经过严密测试的，而我们添加的部分需要自己添加测试。
+ 【追加说明4】本仓库有更新计划，但是由于最近实在没时间更新，也就搁置了，零散的知识点都以笔记的形式添加在issue了，有心人可以参考
   - 计划更新内容：由于已存在的内容过于基础，不适合实际项目中直接使用，所以计划在仓库内选择一个开源项目，添加单元测试
+ 【追加说明5】测试代码也要遵循项目的代码规范，和代码书写的基本修养，比如:
``` js
expect(wrapper.vm.mockFn).toBeCalled();
expect(wrapper.vm.mockFn).toBeCalledWith('xx'); 
```
上面测试代码看似没有问题，其实toBeCalledWith('xx')就能保证toBeCalled()，所以toBeCalled()这一行应该删除。但是本仓库基于教学的目的并没有这么做，而是保留了。

⭐关于本仓库的文档，请参考[博客](https://holylovelqq.github.io/vue/VueUnitTest.html#vue-unittest)(业余时间不定时更新，欢迎关注)⭐ 

代码注释很多基本都能看懂，文档会包括一些概括的说明，是代码中未能体现的


<img  src="/vue-unit-test-with-jest/public/test_result.png" />

<img  src="/vue-unit-test-with-jest/public/スクリーンショット 2019-05-27 16.14.04.png" />