jest单元测试,
目前测试是大型应用开发中非常重要的环节，在Vue项目中可以使用Jest进行单元测试。本文主要介绍Vue-Jest的自动化测试，有兴趣的可以看看。
目录
安装和配置中的常见错误。测试前的工作处理依赖于生成实例和DOM摘要引用。目前测试是大型应用开发中非常重要的环节，在Vue项目中可以使用Jest进行单元测试。Jest是facebook推出的测试框架，集成了Mocha、chai、jsdom、sinon等功能。而且在Vue的脚手架中已经集成了Jest，所以在Vue项目中使用Jest进行单元测试是唯一的选择。从提供的示例来看，很容易成功配置和测试。然而，在实际项目中有许多差异，我在测试我自己的一个业务组件时报告了许多错误。本文将总结我的踩坑经验，帮助读者快速解决配置方面的问题。
安装
可以通过官方@vue/cli直接创建Vue项目，然后选择单元测试这个选项。
？检查项目所需的功能：
选择Vue版本
巴贝尔
打字稿
渐进式Web应用程序(PWA)支持
路由器
沃克斯
CSS预处理程序
棉绒/格式器
单元测试
E2E测试
然后在测试框架中选择Jest。
？选择一个单元测试解决方案：Jest
？你更喜欢把Babel，ESLint等的配置放在哪里？在专用con中
fig文件
Vuts的项目最后生成的jest.config.js配置文件太长了，好像在告诉我们，我已经给你全部设置好了，直接用吧。但是对于项目，还是需要手动配置兼容性，否则会报错很多，无法进行。
模块.导出={
预设： @ vue/CLI-plugin-unit-jest/presets/typescript-and-babel
}
配置
先看看这个预置配置里写的是什么，找到包@ vue/CLI-plugin-unit-jest/presets/typescript-and-babel。实际上，该输出的配置如下：
模块.导出={
ModuleFileExtensions: [//测试的文件类型
js ，
jsx ，
json ，
//告诉Jest来处理*。vue文件
vue ，
ts ，
tsx
],
转换：{//转换模式
//进程*。使用vue-jest的vue文件。\\.vue $ :require . resolve( vue-jest )。\\.(CSS styl less sass scss SVG png jpg TTF woff woff 2)$ :
require . resolve( jest-transform-stub )。\\.jsx？$: require.resolve(babel-jest )。\\.tsx？$: require.resolve(ts-jest )，
},
转换模式：[/node_modules/]，//在转换过程中忽略node_modules。
//支持源代码中相同的@ - src别名映射
ModuleNameMapper: {//@符号表示当前项目下的src。
^@/(.*)$: rootDir/src/$1
},
测试环境： jest-environment-jsdom-fifth ，
//快照的序列化程序
snapshotserializer:[//快照的配置
jest-serializer-vue
],
测试：[//默认测试文件
**/tests/unit/**/*.spec.[jt]s？(x)，
* */_ _测试__/*。[jt]s？ x
],
//https://github.com/facebook/jest/issues/6766
testURL:“http://localhost/”，
watchPlugins: [
require . resolve( jest-watch-type ahead/filename )，
require . resolve( jest-watch-type ahead/testname )
],
全局：{
ts-jest :
babelConfig:对
}
}
}
其中，比较重要的配置也是我们用来解决问题的配置：
ModuleFileExtensions:要测试的文件类型。这里的默认配置基本涵盖了文件类型，所以这里一般不需要更改。
Transform:转换方法，匹配的文件只有翻译后才能识别，否则报错。
TransformIgnorePatterns:转换忽略配置
ModuleNameMapper:模块别名，如果有的话，应该填写。
常见错误
语法错误：语法错误，可能是因为没有转换，比如下面的提示：
/用户/庄冰。Cai/Documents/workspace/projects/WMS-ui/node _ modules/vue-runtime-helpers/dist/normalize-component。乔丹：76
导出默认标准化组件
^^^^^^
语法错误：意外的标记"导出"
由于我们没有对。全方位高压喷射工法文件进行转换导致了报错，最快的解决方式就是在改变补充。全方位高压喷射工法的转化
转换：{。\\.mjs$ :巴别-笑话
}
只需要在对。全方位高压喷射工法的文件，提供转化方式即可。
另一种语法错误，是节点模块内的某些文件需要转化，然而被transformIgnorePatterns配置忽略了。
你可以这样做：
要转换一些"节点模块"文件，可以在配置中指定一个自定义的transformIgnorePatterns .
如果需要自定义转换，请在配置中指定"转换"选项。
如果你只是想模仿你的非射流研究…模块（例如二进制资产),你可以用" moduleNameMapper "配置选项把它们剔除。
您可以在文档中找到这些配置选项的更多详细信息和示例：
https://jestjs.io/docs/en/configuration.html
详细信息：
/用户/庄冰。Cai/Documents/workspace/projects/WMS-ui/node _ modules/vue-runtime-helpers/dist/normalize-component。乔丹：76
导出默认标准化组件
^^^^^^
语法错误：意外的标记"导出"
图中vue-运行时-助手被用到了，然而因为transformIgnorePatterns的配置忽略了转化，从而导致语法错误。解决方法就是改变transformIgnorePatterns的配置，如下：
transformIgnorePatterns: [
//转化时忽略节点模块，但不包括vue-运行时-助手
/node _模块/(?(vue-runtime-helpers)/)，
],
将vue-运行时-助手排除后，转化的时候就不会忽略它，从而解决语法报错的问题。
分时（同分时)类型错误
以打字打的文件诊断（使用`[ jest-config]。全局。ts-jest。诊断学选项自定义):
src/views/inventory-map/_ _ tests _ _/available。规格。ts:15:1-错误TS2304:找不到名称“每个人之前”.
15 beforeEach(()={
~~~~~~~~~~
src/views/inventory-map/_ _ tests _ _/available。规格。ts:19:1-错误TS2593:找不到名称描述一下.您需要为测试运行程序安装类型定义吗？请尝试使用" npm i @types/jest "或" npm i @types/mocha "，然后将“玩笑”或“摩卡”添加到tsconfig的类型字段中。
19描述(可用-库存-地图,()={
~~~~~~~~
src/views/inventory-map/_ _ tests _ _/available。规格。ts:20:3-错误TS2593:找不到名称它.您需要为测试运行程序安装类型定义吗？请尝试使用" npm i @types/jest "或" npm i @types/mocha "，然后将“玩笑”或“摩卡”添加到tsconfig的类型字段中。
根据提示需要在tscofig.json中添加
{
编译器选项:{
类型:[
webpack-env ，
"玩笑"
],
}
}
测试前的工作
在编写测试用例前，我们需要玩笑提供组件实例伏特计和渲染的数字正射影像图结构。对代码逻辑、页面效果的双重测试保障，那么如何获取到这个业务组件？
直接引用组件是不行的，因为你的业务组件需要的依赖很多，比如用户界面组件库、工具函数、Vuex的状态等，所以首先我们需要处理好这些依赖。
处理依赖
首先要知道要测试的这个业务组件依赖了哪些东西，全局的依赖可以参照主页面或主页。射流研究…入口文件处，其他可根据组件中的引用来判断。有了依赖后如何在玩笑中获得组件实例？
某视频剪辑软件提供了一个单元测试实用工具库- Vue测试工具，编写测试用例的时候可以用到它，首先利用createLocalVue创建一个某视频剪辑软件的类供你添加组件、混入和安装插件而不会污染全局的某视频剪辑软件类，接着将依赖引用进去。
const _ local vue=创建本地vue()；
_本地vue。使用(Vuex)；
_本地vue。使用(UI)；
_本地vue。使用(i18n安装)；
_localVue.component(s-filter ，s filter)；
_localVue.component(w-table ，WTable)；
_localVue.directive(xxx ，{
已插入：(el，binding)={
.
},
});
export const localVue=_ localVue
这样我们得到一个包含依赖关系的Vue类，然后处理Vuex。例如，我们需要枚举值。
从导入枚举。/enums ；
export const systemStore=new Vuex。商店({
动作：{}，
状态：{
枚举：{
系统枚举：枚举，
},
},
});
生成实例和 DOM
在获得localVue并存储之后，我们将使用它来生成结果，并通过mount呈现组件。
从“@/utils/unit-test/common”导入{ localVue，system store }；
从“@vue/test-utils”导入{ mount }；
要求(交集-观察者)；//兼容的jsdom不支持IntersectionObserver
从导入任务列表./available-inventory-map/index . vue ；//引用要测试的业务
let store:任意；
beforeEach(()={
store=systemStore
});
描述(可用-库存-地图，()={
It(过滤测试，()={
const renderer=create renderer()；
const wrapper=mount(任务列表，{
localVue，
店，
attachToDocument: true，
});
const html=wrapper . html()；//获取完整的html结构
const vm=wrapper.vm//组件实例
console.log(html，VM)；
})
}
实例及其DOM结构最终通过挂载localVue获得并存储。接下来，您可以根据示例和DOM编写自己的测试用例。
总结
主要介绍在Vue Ts项目中配置Jest自动化测试所遇到问题的总结，介绍基本配置和常见错误的解决方法，以及如何在编写测试用例之前获取完整的组件信息和DOM。为接下来的用例编写打下基础。
引用
Vue测试工具
这就是这篇关于Vue-Jest自动化测试的详细配置的文章。更多相关的Vue-Jest自动化测试内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。