Vue3 单元测试 Jest

技术栈

Jest + @vue/test-utils

Jest 是目前流行的测试框架，简单好用，覆盖单测所需要的断言、快照测试、异步测试、测试覆盖率等功能，满足组件库单测的需求。

但是他测试 Vue 项目并不太方便，需要开发自己手动挂载 Vue 的实例，较为麻烦。因此我们引用 @vue/test-utils 库，是 Vue.js 官方的单元测试实用工具库。

架构设计

具体措施

下面展示怎么搭建测试环境。

jest.config.js 创建此文件在项目的根目录下面。

module.exports = {
  verbose: true,
  testEnvironment: 'jsdom',
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'ts',
    'tsx',
    // tell Jest to handle *.vue files
    'vue',
  ],
  transform: {
    // process *.vue files with vue-jest
    '^.+\.vue$': '@vue/vue3-jest',
    '.+\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$':
    require.resolve('jest-transform-stub'),
    "\.[jt]sx?$": "babel-jest"
  },
  transformIgnorePatterns: [
    '/node_modules/(?!@icon-park)',
  ],
  snapshotSerializers: [
    'jest-serializer-vue',
  ],
  testEnvironmentOptions: {
    customExportConditions: ['node', 'node-addons'],
  },
}

package.json 中配置 script 字段

  "scripts": {
    "test": "jest --config jest.config.js"
  }

安装下面这些包

  "devDependencies": {
        "@babel/preset-typescript": "^7.18.6",
        "@vue/test-utils": "^2.0.0",
        "@vue/vue3-jest": "^28.0.0",
        "babel-jest": "^29.2.2",
        "babel-preset-env": "^1.7.0",
        "jest": "^29.2.2",
        "jest-environment-jsdom": "^29.0.3",
        "jest-serializer-vue": "^2.0.2",
        "jest-transform-stub": "^2.0.0",
        "ts-jest": "^29.0.3",
        "@vue/babel-plugin-jsx": "^1.1.1",
}

配置一下 babel.config.js

module.exports = {
  presets: [['env', { modules: false }]],
  env: {
   // jest 会自动来 env 中找 test 的配置
    test: {
      presets: [
        ['env', { targets: { node: 'current' } }],
        '@babel/preset-typescript'
      ],
      "plugins": [
          "@vue/babel-plugin-jsx",   // 解析 vue jsx 语法
          "@babel/plugin-proposal-export-namespace-from"  // 解析 export * as name from './xxxx'
      ],  
    },
  },
}

简单的 demo，测试用例的文件名限制为 *.spec.js，jest 会自动的去寻找项目中所有的此文件并执行。

import { mount } from '@vue/test-utils'
import Progress from '../progress.vue'

// 测试 Progress 组件是否正常渲染，并且是否正确渲染出 props precent 对应的 dom
test('render Progress', () => {
  const wrapper = mount(Progress, {
    props: {
      percent: 20,
    },
  })

  expect(wrapper.find('.d-progress__text').text()).toEqual('20%')
})

运行项目中所有的测试用例

npm run test