vue项目整合jest单元测试

1. 创建项目

yarn create vite vueJest --template vue-ts

cd vueJest 

yarn

2. 安装Jest

yarn add @babel/core @babel/preset-env @testing-library/jest-dom @types/jest @vue/test-utils@next @babel/preset-typescript @vue/babel-plugin-jsx vue-jest@next jest-serializer-vue -D

// 下面三个包的版本需要固定，有些版本和 vue-test 的对应不上，则会出错
yarn add babel-jest@26.0.0 jest@26.0.0 ts-jest@26.4.4 -D

我的相关依赖版本

// package.json
"scripts": {
    ······
    "test": "jest"
  },
"dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-typescript": "^7.18.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@types/jest": "^29.2.0",
    "@vitejs/plugin-vue": "^3.1.0",
    "@vue/babel-plugin-jsx": "^1.1.1",
    "@vue/test-utils": "^2.0.0-rc.18",
    "babel-jest": "26.0.0",
    "jest": "26.0.0",
    "jest-serializer-vue": "^2.0.2",
    "ts-jest": "26.4.4",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-jest": "^5.0.0-alpha.10",
    "vue-tsc": "^0.40.4"
  }

3. 根目录下新建jest配置文件

// jest.config.js
export default {
  rootDir: process.env.INIT_CWD, //当前项目根目录
  clearMocks: true,
  coverageDirectory: 'coverage',
  coverageProvider: 'v8',
  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
  // 别名设置
  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/components/$1'
  },
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  // 测试文件
  testMatch: ['<rootDir>/src/__tests__/**/*.spec.(ts|tsx|js)'],
  testPathIgnorePatterns: ['/node_modules/'],
  moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
  // 快照
  snapshotSerializers: ["jest-serializer-vue"],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.(ts|tsx|js|jsx)$': [
      'babel-jest', {
        presets: [
          ['@babel/preset-env', { targets: { node: 'current' } }],
          ['@babel/preset-typescript']
        ],
        plugins: ['@vue/babel-plugin-jsx']
      }
    ]
  }
}

4. 新建测试文件

// src/__tests__/helloworld/index.spec.js
import { mount } from '@vue/test-utils'
import HelloWorld from '@/HelloWorld.vue'

test('displays message', async () => {
  const wrapper = await mount(HelloWorld, {
    props: {
      msg: 'test msg'
    }
  })
  const btn = wrapper.find('button')
  expect(btn.html()).toMatchSnapshot();
  // Assert the rendered text of the component
  expect(wrapper.find('h1').text()).toBe('test msg')
  expect(btn.text()).toBe('count is 0')
  await btn.trigger('click')
  expect(btn.text()).toBe('count is 1')
  await btn.trigger('click')
  expect(btn.text()).toBe('count is 2')
  expect(btn.html()).toMatchSnapshot();
})

5. 运行jest

yarn jest

生成的快照文件