解决未安装unit测试和jest的Vue项目运行karma start时的错误
一、起因
在#单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)文中,说明了是对已有的Vue项目进行测试框架的搭建,并进行测试。但是此项目在利用 vue-cli 创建时并没有安装 unit 测试和 jest 工具,于是造成了karma start 测试运行时的一些错误。本文意在解决主要的错误。
二、错误论述
共有两个大错误:
1、关于mocha关键字未定义的错误
Error:describe is not define
Error:it is not define
2、关于 fs 的错误
Error:Can't resolve ‘fs’ in ‘.......path......’
三、解决方法
1、解决mocha关键字未定义的错误
(1) 猜测错因:
既然识别不了mocha语法,但是又安装成功了,猜测配置文件出错或者webpack编译时识别不了mocha。
(2) 调查错误:
在测试脚本编写 require('mocha'),以便对‘mocha’进行Ctrl+鼠标左键能快速进入它的module index文件。
发现此文件后缀名是.ts,表示是一个typescript文件,而非js文件。由于项目中并没有引进typescript,故而编译不了它。需要引进能够编译 ts 文件的工具。
因为缺失vue的 unit测试工具 和 jest 工具才导致的错误,那么必然是它们已经帮我们做了支持 ts 文件的工作。百度了一下,应该是 jest 的作用,它支持ts。接下来就需要安装 jest相关插件 && 设置配置文件了。
(3) 解决:
安装jest 和 babel-jest :
#npm install jest --save-dev
#npm install babel-jest --save-dev
配置文件:
在 /test/unit/ 目录下新建三个配置文件【jest.conf.js setup.js .eslintrc】,我是直接从之前能正确运行的demo中拷贝过来的:
① /test/unit/jest.conf.js
const path = require('path') module.exports = {
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
'js',
'json',
'vue'
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
},
testPathIgnorePatterns: [
'<rootDir>/test/e2e'
],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
setupFiles: ['<rootDir>/test/unit/setup'],
mapCoverage: true,
coverageDirectory: '<rootDir>/test/unit/coverage',
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**'
]
}
② /test/unit/setup.js
import Vue from 'vue' Vue.config.productionTip = false
③ /test/unit/.eslintrc
{
"env": {
"jest": true
},
"globals": {
}
}
目录结构:
(4) 运行karma:
#karma start
不再报 Error:describe is not define 错误,但是出现了Error:Can't resolve ‘fs’ in ‘.......path......’错。解决它请继续阅读。
2、解决fs的错误
修改webpack的配置文件,增加:
node: {
fs: 'empty'
},
/bulid/webpack.base.conf.js:
问题解决完了,此时再 karma start就不会报错了,会显示执行成功的消息。
最新文章
- Netty:数据处理流程
- 无法分配超出32(XXX)的MINEXTENTS报错的解决方法
- 【Java数据格式化】使用DecimalFormat 对Float和double进行格式化
- Eclipse发布地址不同引发的问题
- WPF 复制和粘贴
- PHP json_encode() 函数介绍
- Jquery图片放大镜
- myeclipse启动服务器时,tomcat出错问题
- 重装助手教你如何在Windows 10中更改您的帐户名称
- hdu3949 异或空间 + 求矩阵的主元
- Spark ML机器学习
- TStrings与Memo.Lines赋值的问题
- swift -inout关键字
- Magento模块升级修改数据库表结构
- hdoj3652 B-number
- homestead 暴露接口到外网
- Kafka(四)Kafka在zookeeper中的存储
- Jprofiler监控工具(内存泄漏)
- Comet OJ - Contest #0题解
- 【BZOJ 3527】 3527: [Zjoi2014]力 (FFT)