一、起因

  在#单元测试#以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就不会报错了,会显示执行成功的消息。

解决未安装unit测试和jest的Vue项目运行karma start时的错误的更多相关文章

  1. Linux下Vue项目搭建karma测试框架

    前提:vue项目已创建,node.js.npm已安装 1.全局安装karma脚手架 karma-cli  [貌似可以不安装] #npm i -g karma-cli 2.转到Vue项目目录,项目下安装 ...

  2. 安装Node,创建vue项目,运行及打包

    1.安装node js 下载地址:http://nodejs.cn/download/ 2.安装完成后运行Node.js command prompt(node -v查看安装版本) 3.安装npm(由 ...

  3. 使用nodeJs安装Vue-cli并用它快速构建Vue项目

    部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs ...

  4. vue全家桶安装以及修改webpack配置新增vue项目启动方式

    一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...

  5. 安装VM虚拟机提示 尝试创建目录 C:\Public\documents\SharedVirtual Machines 时发生错误解决方法

    把Windows Defender安全中心的“受控制文件夹的访问”给关闭了,然后就可以顺利安装上了. 作者:耑新新,发布于  博客园 转载请注明出处,欢迎邮件交流:zhuanxinxin@foxmai ...

  6. centOS7下 安装nodejs+nginx+mongodb+pm2部署vue项目

    一.购买服务器并远程连接 1.购买服务器和域名 可以选择阿里云或者是其他的厂商的服务器.然后会获得服务器ip地址,用户名和密码. 购买域名,将域名绑定到ip地址上. 2.下载xshell,winscp ...

  7. 我的Android进阶之旅------>Android项目运行报java.lang.NoClassDefFoundError错误的解决办法

    今天在运行一个Android项目的时候,报了以下错误: D/AndroidRuntime( 3859): Shutting down VM E/AndroidRuntime( 3859): FATAL ...

  8. ubuntu安装多个qt版本--不同qt版本编译同一个程序时出现错误--解决方案

    方法: 在ubuntu终端: # make clean   //有Makefile文件的情况 # rm Makefile *.pro.user # qmake  //有多个qt版本,最好指定qmake ...

  9. 安装好maven后,在cmd中运行mvn报一下的错误

    当然报错,你这个路径下并没有pom.xml文件.你可以运行这个命令: mvn -version.

随机推荐

  1. P3066 [USACO12DEC]逃跑的BarnRunning Away From (树上二分)

    题意 给出以1号点为根的一棵有根树,问每个点的子树中与它距离小于等于l的点有多少个. 树上二分.这个做法还是基于树上差分的,也就是对于每一个点uu,我们要找到它向上跳LL的长度最高能够跳到的祖先.(当 ...

  2. AngularJS 中ng-model通过$watch动态取值

    这个例子的意思是,当xxxx的长度不超过6时,xxxx和yyyy两个input的model是无关的,但当xxxx超过6,则yyyy会跟随其值而变化. 另一种做法是在input的ng-model后面添加 ...

  3. 一种简单快速的模板解析方法,活用with javascript版

    //一种简单快速的模板解析方法,活用with var parseTpl = function( str, data ) { var tmpl = 'var __p=[];' + 'with(obj|| ...

  4. git平台创建项目(码云)

    一.在码云创建项目 1.新建仓库 2,项目名称等 3.创建后的界面 4.克隆远程项目到本地(项目地址和用户名密码) git clone 仓库地址 注意,如果当前目录下出现git仓库同名目录时,会克隆失 ...

  5. PIE SDK去相关拉伸

    1.算法功能简介 由于高度相关的数据集经常生成十分柔和的彩色图像,因此经常使用 去相关拉伸工具来体消除多光谱数据集中的高度相关性, 从而生成一幅色彩亮丽的彩色合成图像.去相关拉伸需要 3 个输入波段, ...

  6. Jmeter4.0----HTTP Cookie管理器(9)

    1.说明 在脚本编写的过程中,我们常常会遇到用户登录之后的相关操作,但是又不想去通过脚本先模拟用户登录,再使用cookie值保持登录,做后续的操作的情况下,我们就会用到HTTP Cookie管理. H ...

  7. zabbix 千台服务器自动添加实战

    一,模式   zabbix 的自动添加 主机有梁祝方式: 自动发现-----被动模式 由服务端主动发起,Zabbix Server开启发现进程,定时扫描局域网中IP服务器.设备, 自动注册----主动 ...

  8. (转)淘宝系统信息采集和监控工具tsar

    淘宝系统信息采集和监控工具tsar 项目地址:https://github.com/alibaba/tsar 一.介绍 Tsar是淘宝的系统信息采集和监测工具,主要用来收集服务器的系统信息(如cpu, ...

  9. [转]ClassPath是什么

    from: https://my.oschina.net/GivingOnenessDestiny/blog/603505 classpath 是什么classpath实际上就是编译后的 以 clas ...

  10. 《HTTP权威指南》之HTTP连接管理及对TCP性能的考虑

    在上一篇博客中(<HTTP权威指南>之HTTP相关概念详解)我们简单对HTTP相关的基本概念做了一些简单的了解,但未对HTTP连接管理的内容做一些详细的介绍.本篇博客我们就一起来看一下HT ...