目前的项目已经维护了挺久,由于客户要求,我们要为项目加上单元测试,挑选一番后选择了Jest(配置简便,开箱即用),下面记录了此次为项目添加Jest作为单元测试的经历。

安装Jest

1. 在项目目录下,执行命令vue add @vue/cli-plugin-unit-jest,这个命令会帮我们把相关的配置都配好,相关的依赖都装好,还会帮我们生成一个jest.config.js文件,网上说还会生成tests文件夹,我试的没有,另外还会帮你在eslintr.js文件下配置好jest需要的配置。

一开始的时候,我在编辑器下的控制台输这个命令,提示错误,后来改到系统下的控制台才安装成功。

用这个命令安装是最方便的,我尝试了几次按照网上说的先安装unit-jest,再安装test-util之类的,都不成功。

2. 常用的一些jest配置项,在jest.config.js中配置。如果使用上面的命令,可以少配很多网上说的配置,比如下面标注了 不需要的

module.exports = {
"moduleFileExtensions": [ //不需要配置
"js",
"json",
// 告诉 Jest 处理 `*.vue` 文件
"vue"
],
testMatch: [ //test文件所在位置
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
"transform": { //不需要配置
// 用 `vue-jest` 处理 `*.vue` 文件
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
// 用 `babel-jest` 处理 js
"^.+\\.js$": "babel-jest"
},
"moduleNameMapper": { //不需要配置
"^@/(.*)$": "<rootDir>/src/$1"
},
"collectCoverage": true, //是否创建报告
"collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"], //创建报告的文件来源
"coverageReporters": ["html", "text-summary"] //报告的格式
"coveragePathIgnorePatterns":"[]" //生成报告需要忽略的文件,默认值为 node_modules
"globals":{ //配置全局变量,此处我配置了一个全局变量VUE_APP_DATA,也可以在setup file中配置,如下说的lodash
"VUE_APP_DATA": {
siteENV:'DEV'
}
}
setupFiles:['<rootDir>/src/jest-setup.js'] //启动jest需要的文件
};

3. 如果第一步没有自动生成tests文件夹,可以自己在项目目录下创建tests文件夹,再创建units文件夹,并添加example.spec.js文件,类似下面,具体原因可以看上面的配置项,testMatch,指定了test文件在这个目录下,这个可以自己配置

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld' describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).toMatch(msg)
})
})

4. 在package.json中添加启动命令,然后在控制台执行 npm run test:unit ,可以看到测试结果

"test:unit": "vue-cli-service test:unit"

Jest 踩坑

一开始的时候jes.config.js,其实没有配置这么多东西,有些配置是遇到问题后才加的,以下记录的是遇到的问题,以及解决办法

1.全局变量报错,可以配置globals(Object)属性

2.webpack没有打包进来的包,报错,比如lodash,是以cnd形式引入的,项目中直接用_., 像这种需要配置setupFiles,把lodash添加给window对象,在src下的jest-setup.js文件内加上如下代码,这个jest-setup.js就是jest测试需要的启动文件,上面有配置

import _ from 'lodash';
if (typeof window !== 'undefined') {
  window._ = _;
  window.VUE_APP_DATA.resource ={'app':'cfcf'}
}

3. canvas的api报错,比如CanvasRenderingContext2D,需要安装jest-canvas-mock,把他引入jest-setup.js文件中

import 'jest-canvas-mock';

4.项目中引入第三方库报错,测试时Jest报错,export default portalCommunication; ^^^^^^ SyntaxError: Unexpected token export > 1

报错原因是node_modules下的文件默认是不会被transform的(默认配置),所以es6的写法报错了。

解决办法就是在transformIgnorePatterns中把需要transform的文件排除掉,如下代码,node_modules的文件夹都不会被transform,除了element-ui/src/mixins,

transformIgnorePatterns:["/node_modules/(?!(element-ui/src/mixins)/)"],

5.webpack指定 raw-loader!导入的文件,无法找到模块
需要将路径映射添加到我的 jest 配置中,以便让我的测试识别我设置的路径映射
  "moduleNameMapper": {
      "!raw-loader!@/(.*)": "<rootDir>\\src/\\$1",

6. require.context is not a function 报错,需要添加新的依赖, babel-plugin-transform-require-context

.babelrc中增加

env:{
 test:{
  plugins:["transform-require-context"] //修复3个jest test报错
 }
}


7.
CDN引入的Element UI,Element组件提示没有注册,比如HelloWorld组件中使用到了 el-button组件,就会报错是否
解决办法就是在jest-setup.js中创建lcoalVue,localVue使用Element组件,这个localVue需要被引入测试文件,测试组件的时候,使用这个localVue就可以了

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld'
import {localVue} from '@/jest-setup' describe('HelloWorld.vue', () => { it('renders component', () => { const wrapper = shallowMount(HelloWorld, {localVue}) expect(wrapper.findAll('.hello-world').length).toBe(1) }) })

8.vue i18n国际化报错:Vue warn]: Error in config.errorHandler: "TypeError: _vm.$t is not a function"

解决办法就是,把某种国际化语言引入jest-setup.js,使用test-utils的mock api来mock全局对象

参考这篇文章
https://www.cnblogs.com/jiemao/p/12777826.html

在这里贴一下jest-setup.js文件

import _ from 'lodash';
if (typeof window !== 'undefined') {
window._ = _;
} import 'jest-canvas-mock'; //修复2个报错 import { config,createLocalVue } from '@vue/test-utils';
import ElementUI from 'element-ui';
import language from '@/i18n/en';
import $store from '@/store'; config.mocks={ //给test-utils设置全局变量,适用于prototype定义的方法
$t:(msg) => language[msg],
$store:$store,
} const testVue = createLocalVue(); testVue.use(ElementUI); export const localVue = testVue;

如果文章对你有帮助,不妨给我个赞,谢谢~

vue2项目,踩坑Jest单元测试的更多相关文章

  1. 首个hybird商业项目踩坑总结

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  2. electron项目踩坑--A JavaScript error occurred in the main process:document is not defined

    前言 记录electron-vue项目开发中遇到的一个错误,运行时报错如图: 控制台报错如下: ReferenceError: document is not defined at Object.&l ...

  3. vue2.0 踩坑记录之组件

    - did you register the component correctly? For recursive components, make sure to provide the " ...

  4. html2canvas在Vue项目踩坑-生成图片偏移不完整

    背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...

  5. mpvue微信小程序项目踩坑记录

    1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm - ...

  6. Vue(项目踩坑)_解决vue中axios请求跨域的问题

    一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...

  7. 在IIS上部署 .Net Core 3.0 项目踩坑实录

    在IIS上部署 .Net Core 3.0 项目的主要流程有: 安装并启用IIS 安装AspNetCoreModuleV2 添加.配置网站 设置应用程序池 通过VS发布 一.安装并启用IIS: 安装了 ...

  8. web项目踩坑过程

    sql函数设计: 一开始本来是直接用Java的jdbc直接传输操作语句的.但后来学了存储过程发现存储过程可以提高不少的效率.就重构了自己对数据库的操作代码.包括:开启,查找,修改,关闭. 开启:直接使 ...

  9. nuxt项目踩坑

    1.window or document is not undefined // .vue 页面 if (process.browser) { var Distpicker = require('v- ...

随机推荐

  1. C#winform控件序列化,反序列化

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...

  2. CSS基本语法(二)

    目录 CSS基本语法(二) 八.CSS复合选择器 1.后代选择器** 2.子选择器 3.并集选择器** 4.伪类选择器 链接伪类选择器 :focus伪类选择器 总结 九.CSS的元素显示样式 1.概念 ...

  3. 【程序6】用*号输出字母C的图案

    我自己写的 print(' * * *\n'); print(' * \n'); print(' * \n'); print(' * * * *\n'); 官方答案 print('*' * 10) f ...

  4. linux文件权限全面解析

    目录 linux文件权限全面解析 一:linux文件的权限有哪些? 1,权限分为3个部分 2,权限位 3,每一个权限拥有一个数字编号 4,在添加权限的时候,可以将权限加起来 5,linux添加权限命令 ...

  5. Mysql-5.7主从部署-yum方式

    一.环境准备 # rpm -qa |grep mariadb |xargs yum remove -y # setenforce 0(临时关闭),(selinux配置文件:SELINUX=disabl ...

  6. python网络爬虫-动态网页抓取(五)

    动态抓取的实例 在开始爬虫之前,我们需要了解一下Ajax(异步请求).它的价值在于在与后台进行少量的数据交换就可以使网页实现异步更新. 如果使用Ajax加载的动态网页抓取,有两种方法: 通过浏览器审查 ...

  7. lagou数据爬取

    1. 使用的工具 selenium+xpath+ 手动输入登录 2. 实现的功能: 1.手动登录后,按终端提示,就能下载所需要的内容 import requests import json impor ...

  8. Vue+webpack配置实现多页面应用开发

    为什么要配置多页面开发? · 由于单页面应用不利于SEO,对于某些资讯类网站不够友好,而多页面则能够更优的解决此问题. · 传统的多页面开发模式(如java的jsp等) 前后端耦合性大,开发效率低,代 ...

  9. ApacheCN 人工智能知识树 v1.0

    贡献者:飞龙 版本:v1.0 最近总是有人问我,把 ApacheCN 这些资料看完一遍要用多长时间,如果你一本书一本书看的话,的确要用很长时间.但我觉得这是非常麻烦的,因为每本书的内容大部分是重复的, ...

  10. Jvm和CPU保证特定情况下不乱序

    简介 CPU为了提高指令执行效率,会在一条指令执行过程中(比去内存读数据(慢100倍)),去同时执行另一条指令,前提是,两条指令没有依赖关系. CPU保证不乱序 MESI--CPU缓存一致性协议(In ...