vue-test-utils怎么用-创新互联
小编给大家分享一下vue-test-utils怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
vue-test-utils官网：https://vue-test-utils.vuejs.org/zh/
jest官网：https://jestjs.io
依赖包
请安装它们?
yarn add @vue/test-utils vue-jest yarn jestjest-serializer-vue yarn add babel-jest babel-core@^7.0.0-bridge.0
⚠️：vue-jest依赖与babel-core。我们的环境现在都是babel7，通过npm安装的babel-core默认的还是6版本，所以要指定babel-core安装的系列为7，否则会出现解析问题。
配置
jest配置：告诉jest它需要哪些额外的配置
jest相关的配置可以配置在package.json中或者单独的jest.config.json文件中：
// jest.config.json
{
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "/node_modules/babel-jest", // jest使用babel解析js
".*\\.(vue)$": "/node_modules/vue-jest" // jest对vue单文件的解析
},
"snapshotSerializers": [
"/node_modules/jest-serializer-vue"
],
"moduleNameMapper": {
"^@/(.*)$": "/src/$1", //为了解析webpack配置的alias字段
"^tim-architect/(.*)$": "/tim-architect/$1"
},
"transformIgnorePatterns": [
"node_modules/(?!(yourModuleName))"
]
} ⚠️：transformIgnorePatterns的默认配置是["node_modules"]，表示所有的node_modules下的包都不需要babel解析。但是一些3rd库提供的文件仍然是未编译的es6语法，jest在解析时会报语法错误。因此需要指定白名单，需要那些node_modules下的包被babel转换。
babel配置：告诉babel你需要用哪些工具去处理一坨（?香么 ？? ： ? ）代码
推荐使用babel.config.js（babel需要转换的node_modules同样生效）而不是.babelrc（当前项目生效）。
{
...,
env: {
test: {
presets: [[
'@babel/env',
{
modules: 'auto', // 现在不能通过webpack来解析s6 module，需要使用babel来解析，所以要开启
targets: {
node: 'current' // 指定环境为当前node版本，减少解析不识别语法的范围
}
}
]],
plugins: [[
'@babel/plugin-transform-runtime', {
corejs: 2,
useESModules: false // 不允许使用es modules，babel需要通过@babel/plugin-transform-modules-commonjs将es module转换为commonjs模块解析
}
]
]
}
}
}⚠️：通过babel的env.test指定jest测试时需要的babel配置（同webpack转换解析时不同），jest会自动识别env.test的配置。
单测文件
理解：
单元测试不应该追求代码的覆盖率；
单元测试主要是为了测试组件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": ["/.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需要它解析的模块；
else if 是项目的文件导致的，那就查看下自己的babel.config.js（确保不是.babelrc文件）是否配置正确，如果使用了@babel/preset-env，请注意module参数的配置；
以上是“vue-test-utils怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
文章名称：vue-test-utils怎么用-创新互联
当前网址：http://cdiso.cn/article/coijgg.html
