[指南] Vue 结合 Jest + TypeScript 导入单元测试 – 1

章节连结

Vue 2.X 版本若要结合 TypeScript 的模式导入单元测试,其中要绕掉的坑比想像中复杂许多。因此,这一篇是笔记下相关的设定值,来减少日后要再度研究的烦恼。当然,你也可以使用 Sinon, Mocha 或是 Chai…等,但如此一来,你就得花时间研究“测试环境专用的编译工具、打包工具……等”,那花费的工夫实在太大了些。
vue.js logo vue


准备步骤

1.  package.json 设定档

新增以下指令和档案,如果有漏掉的,请自行看 Terminal 来除错。
npm i -D <套件 1> <套件 2> …….

2.  jest.config 设定档

新增在根目录下

3. tsconfig 设定档

基本概念

1. 用 Vue-Test-Utils 所提供的 shallowMount ,来模拟一个 Vue 档读取
2. 承上,读取进来的 .vue 档,可以用 .vm 来获取该 Instance 里的值,例如 $data
3. 若你要对读取的生成的 Vue Instance 作操作,那你得参照 Vue Test Utils Wrapper 所提供的说明进行


范例程式码

Github:Demo Spec.ts


参考资料

1. [vue]使用jest和官方的vue test utils来写单元测试(vue单元测试系列-5)
2. Vue Test Utils Wrapper

按赞加入粉丝团

延伸阅读