vue3+typescript+jest单元测试环境搭建

一、概念

单元测试是软件开发中的一个重要实践。它不仅可以提高代码质量和开发效率，还可以减少错误和维护成本。引入单元测试可以更好地管理和控制代码的质量，从而交付更可靠和稳定的软件产品。

二、核心流程

2.1 运行环境

vue版本：3.2.37

vite版本：3.0.4

测试框架：jest

2.2 安装配置jest

jest官方文档：jestjs.io/zh-Hans/doc…

1、安装依赖

安装配置以下依赖，为Vue 3 项目搭建单元测试环境：

npm install @types/jest @vue/test-utils @vue/vue3-jest @babel/plugin-proposal-private-methods @vue/babel-preset-jsx jest jest-environment-jsdom ts-jest

• jest：JavaScript 测试框架，用于编写和运行测试。
• jest-environment-jsdom： 提供类似于浏览器的环境，支持在 Node.js 中运行测试。
• ts-jest：识别和处理 TypeScript 文件。
• @types/jest：提供 Jest 的类型定义，使得在 TypeScript 中编写测试代码时能够获得类型检查和自动补全功能。
• @vue/test-utils：提供一些方法和工具，用于挂载和测试 Vue 组件。
• @vue/vue3-jest：识别和处理 Vue 3 组件文件。
• @babel/plugin-proposal-private-methods：支持 JavaScript 中的私有方法和私有字段语法。
• @vue/babel-preset-jsx：支持在 Vue 组件中使用 JSX 语法。

2、配置jest.config.js

详细选项参数，可参考：jestjs.io/zh-Hans/doc…

module.exports =  {
  // 预设配置，允许Jest识别和处理.ts和.tsx文件
  preset: 'ts-jest',
  // 测试环境配置，支持在Node.js中模拟浏览器环境
  testEnvironment: 'jest-environment-jsdom',
  testEnvironmentOptions: {
    // 为测试环境提供自定义导出条件
    customExportConditions: ["node", "node-addons"],
  },
  // 使用 babel-jest 转换器来处理 TypeScript 和 JavaScript 文件，并配置 Babel 预设和插件
  transform: {
    '^.+\.(ts|tsx|js|jsx)$': [
      'babel-jest',
      {
        presets: [['@babel/preset-env', { targets: { node: 'current' } }], ['@babel/preset-typescript']],
        plugins: ['@vue/babel-plugin-jsx'],
      },
    ],
  },
  // 指定测试文件的匹配模式
  testMatch: ['**/**/*.spec.(ts|tsx)'],
  // 指定模块文件的扩展名
  moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
  // 指定 Jest 忽略的路径模式
  testPathIgnorePatterns: ['/node_modules/'],
};

3、配置package.json

{
   "scripts": {
      "test": "jest"
   },
   "dependencies": {
      "@babel/plugin-proposal-private-methods": "^7.18.6",
      "@vue/babel-preset-jsx": "^1.4.0",
      "@vue/test-utils": "^2.4.6",
      "@vue/vue3-jest": "^29.2.6",
      "jest-environment-jsdom": "^29.7.0",
   },
   "devDependencies": {
      "@jest/globals": "^29.7.0",
      "@types/jest": "^29.5.14",
      "jest": "^29.7.0",
      "ts-jest": "^29.2.5",
   }
}

2.3 测试函数

定义一个简单的sum函数

export const sum = (a, b) => {
  return a + b
}

使用测试脚本，对函数输出的结果进行测试

import { describe, expect, test } from '@jest/globals'
import { sum } from './sum'

describe('sum module', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3)
  })
})

测试结果：

2.4 测试组件

// TODO：待补充。由于TS转码问题，demo未跑通