网站底部代码下载,wordpress子目录建站,中色十二冶金建设有限公司网站,vps 256 wordpress文章目录 一、前言二、环境检测三、集成问题汇总四、拓展阅读 一、前言
在前期博文《Vue进阶#xff08;八十八#xff09;Jest》中#xff0c;讲解了Jest基本用法及应用示例。一切顺利的话#xff0c;按照文档集成应用即可#xff0c;但是集成过程中遇到的问题可能五花八… 文章目录 一、前言二、环境检测三、集成问题汇总四、拓展阅读 一、前言
在前期博文《Vue进阶八十八Jest》中讲解了Jest基本用法及应用示例。一切顺利的话按照文档集成应用即可但是集成过程中遇到的问题可能五花八门此篇博文主要分享Vue集成Jest阶段遇到的问题及解决方案。
首先需要确认项目自身环境参数配置主要涉及babel、jest、babel-jest应用其中某个不合适的版本可能会导致各种嵌套问题出现最终无法集成Jest。
二、环境检测
首先检查项目应用的babel-core、babel-loader版本号如果babel-core的版本号高于7且babel-loader的版本号高于8则可按照以下步骤安装jest相关依赖。
如果babel-core版本为6则需要安装babel-loader的版本也是6不能高于8另外安装下面依赖时需注意
jest版本为21、22推荐^22.4.0babel-jest为21、22推荐^22.4.0
检测项目node、npm版本。版本低可能导致安装jest,vue/test-utils等依赖安装失败。
推荐使用npm版本6.9.0npm -v,推荐node版本10.15.0node -v
安装jest通用js可以使用jest写单元测试。 安装命令:npm i -D jest^22.4.0 或者 npm install --save-dev jest^22.4.0
安装babel-jestBabel-jest对Es6js进行转译。 安装命令:npm i -D babel-jest^22.4.0 或者 npm install --save-dev babel-jest^22.4.0
安装vue/test-utils。可以用来编写vue文件的单元测试 安装命令:npm i -D vue/test-utils^1.3.6或者 npm install --save-dev vue/test-utils^1.3.6
安装vue-jest配合vue/test-utils使用。 安装命令:npm i -D vue-jest3.0.6 或者 npm install --save-dev vue-jest3.0.6
安装jsdom-global为vue/test-utils运行器提供浏览器环境。 安装命令:npm i -D jsdom-global^3.0.2 或者 npm install --save-dev jsdom-global^3.0.2
安装jest-serializer-vue序列化测试结果。 安装命令:npm i -D jest-serializer-vue^3.1.0 或者 npm install --save-dev jest-serializer-vue^3.1.0
依赖安装完成后要关注关注项目能否正常启动。
三、集成问题汇总
1、npm install --save-dev jest^27.5.1 执行这个命令时会把node_modules里面的jquery删掉所以执行完后要启动项目看下是否缺少了jquery依赖如果缺少需要再次安装jquery
npm install --save-dev jquery^3.3.12、启动npm run dev时报错信息Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
报错原因babel-core和babel-loader版本冲突。 解决方案首先检查项目的babel-core、babel-loader版本号如果babel-core版本号高于7且babel-loader的版本号高于8则可按照以下步骤安装jest相关依赖。
如果babel-core版本为6则需要安装babel-loader的版本也是6不能高于8另外安装下面依赖时需注意
jest版本为21、22推荐^22.4.0babel-jest为21、22推荐^22.4.0
3、启动run test:unit时报错信息Error: Cannot find module jest-transform-stub
报错原因缺少相应依赖模块。 解决方案安装相应模块。
4、报错信息
报错原因js文件没有转换 解决方案修改jest.config.js在文件中transform中加上
5、报错信息
报错原因babel-core、babel-loader、jest、babel-jest版本冲突。 解决方案参考问题2如果babel-core、babel-loader版本大于7则需要安装27以上的jest、babel-jest。
6、报错信息 Test suite failed to run TypeError: $export is not a function
报错原因在报错文件中用到了ES6的语法 解决方案修改jest.config.js在文件中transformIgnorePatterns中添加报错文件忽略转换测试文件例如
transformIgnorePatterns: [node_modules/(?!(.)/),node_modules/(?!(core-js)/)],或者可以忽略node_modules下面所有文件transformIgnorePatterns: [node_modules/]
7、配置过程可能缺少的模块babel-plugin-require-context-hook
8、报错信息 SecurityError: localStorage is not available for opaque origins 报错原因jest-unit运行环境未设置。 解决方案修改jest.config.jsmodule.export中添加
testEnvironment: jsdom,
testURL:http://localhost,9、报错信息
TypeError: Cannot set property $router of #Vue$3 which has only a getter14 | ]15 | }) 16 | localVue.prototype.$router router17 | localVue.use(router)18 | const wrapper mount(App,{localVue,router, store,19 | mocks:{at Object.anonymous (tests/unit/src/App.spec.js:16:28)报错原因在测试文件中声明变量用了同一个变量名。 解决方案修改变量名称 10、报错信息
Failed to collect coverage from ...
ERROR: Cannot read property fileCoverage of undefined
STACK: TypeError: Cannot read property fileCoverage of undefined报错原因项目中存在其他单元测试配置使用了babel的istanbul代码覆盖率插件在.babelrc文件中多了istanbul导致冲突 解决方案修改.babelrc文件去掉istanbul。
11、报错信息
Failed to collect coverage from ...t/funcinit.js: Unexpected token, expected ; (7:25)报错原因报错文件中存在语法错误或者不规范使用需要自己排查 解决方案需自己排查。
12、报错信息
FAIL tests\unit\src\views\newModel\homePage\todolist\todolist\index.spec.js● Test suite failed to runTypeError: _vm.$t is not a function1037 | aplno: row.aplno || , // 序号1038 | recorddate: row.crtdt || , 1039 | customercode: row.customercode1040 | }1041 | }1042 | this.$router.push({at Proxy.render (src/views/newModel/homePage/todolist/todolist.vue:1039:1887)at Object.anonymous (tests/unit/src/views/newModel/homePage/todolist/todolist/index.spec.js:16:36)报错原因测试文件对应的文件中存在i18n用于中英文翻译。 解决方案 方案1在测试文件断言文件中添加$t定义。 方案2在测试文件断言文件中引入i18n定义i18n 13、报错信息require.context is not a function
报错原因语法不支持ES6 解决方案npm install babel-plugin-require-context-hook^1.0.0 在.babelrc文件plugins节点中添加
plugins: [npm install babel-plugin-require-context-hook]14、报错信息Unknown custom element:el-table - did you........ 报错原因elementui组件未注册。 解决方案 方案一在main.js全局注册
方案二在jest.setup.js里面全局注册
15、报错信息document is not function 报错原因未设置测试环境 解决方案修改jest.config.jsmodule.export中添加
testEnvironment: jsdom,
testURL:http://localhost, 添加完成后如果报缺少模块可依照提示安装对应模块
16、报警告信息
报错原因handlebar版本问题 解决方案npm install handlebar^4.5.3
17、 Note: If you’ve turned off transpilation of ES6 modules with the option { “modules”: false }, you have to make sure to turn this on in your test environment. {presets: [[env, {modules: false}], react],env: {test: {presets: [[env], react]}}
}总结配置过程中可能因为版本的原因某些模块不需要安装这些可忽略。各个模块最后实现的package.json可能不一致。
配置成功后启动run test:unit后出现下面截图表示运行成功。项目中会多出来coverage文件夹该文件夹不需要上传。 PSJest集成成功之后需要启动项目看是否能启动成功是否能组包成功
四、拓展阅读
《Vue进阶八十八Jest》Jest 官网babel
