vite+vue3+ts项目单元测试配置教程

本人喜欢简单粗暴直接上代码，如下：

1.yarn安装插件

安装vue单元测试插件
yarn add --dev @vue/test-utils@next
yarn add --dev vue3-jest

安装测试工具jest
yarn add --dev jest

ts-jest是一个 TypeScript 预处理器，它支持 Jest 的源映射，让您可以使用 Jest 测试用 TypeScript 编写的项目。
yarn add --dev ts-jest
yarn add --dev @types/jest

Jest 通过 Babel 支持 TypeScript，需要安装如下：
yarn add --dev @babel/preset-typescript
yarn add --dev babel-jest
yarn add --dev @babel/preset-env

至此插件安装完毕

2. 配置babel.config.js

module.exports = {
  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript']
}

3. 配置jest.config.js

module.exports = {
  preset: 'ts-jest',
  globals: {},
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': 'vue3-jest',
    '^.+\\js$': 'babel-jest'
  },
  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node']
}

4.配置package.json，运行yarn test进行单元测试

"scripts": {
	"test": "jest tests"
}

需要的配置文件就这么多，愉快的进行vue3的单元测试吧，更多资料可查看vue3官方文档。

链接

链接: jest配置