vue-test-utils初使用详解

2020-06-14 06:08:29易采站长站整理

单元测试不应该追求代码的覆盖率;
单元测试主要是为了测试组件UI,数据驱动后UI的变化在可控范围之内;
测试组件应以纯组件为主(业务组件逻辑过于复杂或经常变动,涉及到的引入文件过多,不便于测试所有的功能性),纯组件作为项目的基础组件功能性上基本不变化。

遇到的问题总结

1.异步生命周期

vue-test-utils提供了对异步请求方法的mock,文档如下:https://vue-test-utils.vuejs.org/zh/guides/testing-async-components.html

但是对于生命周期函数是异步的情况要怎么处理呢?以下是亲测有效但是有点麻烦的姿势:


// 假设在异步生命周期方法中,调用的函数是init,那我们就通过jest.fn()提供的方法进行mock
init.default = jest.fn().mockImplementation(() => Promise.resolve(yourValue))

// 在Jest提供的全局方法中,调用异步生命周期的方法,以保证每个断言都是在生命周期之后
beforeEach(async () => {
init.default.mockClear()
await wrapper.vm.$mount() // 异步生命周期里会调用init方法
})

2.如果测试文件中包含require.context,请看这一条 :

这时候没有webpack怎么办?当然是用别人踩过坑的方法救急!

说实话,如果组件引用了这种东西,我觉得它不够纯洁,还是不要管它好了╮( ̄⊿ ̄”)╭,放它走吧。

但是为什么要解决这个问题呢?想到以后可能还要测试js文件,我们的标准也有可能是覆盖代码行数的测试,所以,还是解决一下吧。

其实思路很简单,我们需要在全局重写require.context,babel再遇到require.context就不会报错了。


// 别怕,不需要你手动写,有人已经写了个插件了:babel-plugin-require-context-hook
// 在babel.config.js的env.test中加上这个插件
...
plugins: [..., 'require-context-hook']...

// 在jest.config.json中配置一下setupFiles
// setupFiles表示在每个运行文件前添加的额外配置
...
"setupFiles": ["<rootDir>/.jest/register-context.js"],
...

// 创建.jest/register-context.js文件,引入时进行全局的注册
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();

3.测试过程总是报synax error ,诸如import无法解析这类es6语法引起的错误

小兄弟,只能说好好检查一下你的babel是否配置正确,并且安装了适合的babel-core版本。出现这个问题的时候,说明babel并没有解析es6语法,顺藤摸瓜,

(确保依赖包的安装源相同,建议用yarn)

if 是node_modules里的文件导致的,通过配置transformIgnorePatterns告诉babel需要它解析的模块;