vue3使用jest

vue3使用jest

jest官网文档：https://jestjs.io/docs/getting-started
test-utils官网文档：https://test-utils.vuejs.org/zh/guide/

一.安装与配置

1.安装依赖

安装jest、@vue/test-utils（用于Vue组件的测试工具）以及babel-jest等必要的包

npm install --save-dev jest @vue/test-utils vue-jest babel-jest @babel/core @babel/preset-env

为了更好地支持Vue 3，建议使用@vue/vue3-jest而不是vue-jest

为了更好地支持Vue 3，建议使用@vue/vue3-jest而不是vue-jest

需要安装 jest-environment-jsdom

npm install --save-dev jest-environment-jsdom

2.配置Babel

项目没有配置Babel，或者你想确保它能正确处理最新版本的JavaScript，可以在项目根目录下创建或更新.babelrc文件：

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" }}]
  ]
}

3.配置Jest

module.exports = {
  moduleFileExtensions: [
    'js',
    'json',
    // 告诉 Jest 处理 `*.vue` 文件
    'vue'
  ],
  transform: {
    // 处理 js 文件以支持 ES6+ 语法
    '^.+\\.js$': 'babel-jest',
    // 使用 @vue/vue3-jest 来处理 *.vue 文件
    '.*\\.(vue)$': '@vue/vue3-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
   testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)', // 匹配.spec文件
    '**/__tests__/*.(js|jsx|ts|tsx)', // 匹配__tests__目录下的文件
    '**/*.test.(js|jsx|ts|tsx)' // 匹配.test文件
  ],
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
  customExportConditions: ["node", "node-addons"],
  }
}

4.设置npm脚本

package.json中配置"test": "npx jest"

"scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "test": "npx jest",
    "preview": "vite preview"
  },

5.编写一个测试文件

describe('Hello component', () => {
  it('should work as expected', () => {
    expect(true).toBe(true);
  });
});

6.安装实用插件

Jest
Jest Runner
Jest Snippets