vue3配置jest自动化测试

前排提醒，并不是所有的项目都需要单元测试，因为写单元测试真的很耗时间。单元测试主要针对需求变更不多，项目时间充裕的项目。如elementui这种框架类的项目

本文主要针对vue3+vuecli4

这里主要有两种情况：新建项目和老项目

对于新建项目，在通过脚手架生成时可选择"unit testing"，之后会自动生成相应配置。

这里主要介绍的是老项目添加单元测试。进入项目根目录，控制台输入

vue add @vue/unit-jest 

此时脚手架会自动安装jest相关依赖，并生成对应配置，修改文件如下：

1. package.json

"scripts": {
    "test:unit": "vue-cli-service test:unit",
  },
"devDependencies": {
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "jest": "^27.0.5"
},
"rules": {},
"overrides": [
   {
     "files": [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)"
     ],
     "env": {
        "jest": true
      }
   }
 ]

2. jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest'
}

3. test 文件夹，其中包含unit文件夹及example.spec.js文件，该文件为示例代码，可删除

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      props: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

文件生成之后其实已经可以进行单元测试了，可以在自动生成的unit文件下新建 xxx.spec.js 并引入需要测试的组件，也可以在对应的组件文件夹中新建__tests__文件，并在文件夹下新建xxx.test.js（规则可参考package.json中的override配置）

需要注意的是，有些项目可能配置了别名，这时就需要在jest.config.js中配置moduleNameMapper了

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@base/(.*)$': '<rootDir>/base_component/$1'
  } // 别名
}

 这里我需要测试的是公共组件，因此在公共组件的button文件夹下新增了__tests__文件，并新建测试文件button.spec.js

import { mount } from '@vue/test-utils'
import ButtonComp from '../index'

test('button', () => {
  // const wrapper = mount(ButtonComp)
})

控制台运行jest发现报错

 因为项目用到的插件不符合规范，因为需要做兼容配置，在jest.config中新增transformIgnorePatterns配置

transformIgnorePatterns: [
    'node_modules/(?!lodash-es/.*)'
  ],

在此运行jest可以发现运行成功了

 

至此配置完毕，可以愉快的进行测试用例编写了。以下为vue官方测试用例文档

Vue Test Utils