vue + jest 配置单元测试总结

最新推荐文章于 2024-07-31 00:17:50 发布

痴呆婷

最新推荐文章于 2024-07-31 00:17:50 发布

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44985350/article/details/121424114

版权

项目结构： vue-cli-4 初始化时未配置jest

采坑内容：

package.json 中未配置 jest 文件路径，npm run test 就会报错提示 @解析有问题

解决方法

方法1 在package.json 中添加如下代码

"jest": {
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  },

方法2 在package.json 中配置 jest 文件路径

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "BABEL_ENV=test && jest --config test/jest.conf.js --watchAll"
  },

配置完整的单元测试代码，步骤如下

依赖安装（使用Babel 7 或更高版本需要安装 babel-core@^7.0.0-bridge.0）

npm install --save-dev jest @vue/test-utils
npm install --save-dev vue-jest
npm install --save-dev babel-core@^7.0.0-bridge.0
npm install --save-dev babel-jest
npm install --save-dev babel-preset-env

jest.conf.js 文件配置

const path = require('path')

module.exports = {
  verbose: false,
  rootDir: path.resolve(__dirname, '../'),
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  transform: {
    '.*\\.(vue)$': 'vue-jest',
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '**/*.{js,vue}',
    '!**/node_modules/**'
  ],
  coverageReporters: ['html', 'text-summary'],
  testMatch: [
    '<rootDir>/src/**/__test__/**/*.spec.js'
  ],
  coverageDirectory: './test/coverage'
}

babel.config.js


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
    ['@babel/preset-env', { 'modules': false }]
  ],
  env: {
    test: {
      presets: [['env', { targets: { node: 'current' } }]]
    }
  },
  'plugins': [ // 项目中有 class 的写法，升级为 babel7 之后需要加一些依赖
    ['@babel/plugin-proposal-decorators', { 'legacy': true }],
    ['@babel/plugin-proposal-class-properties', { 'loose': false }]
  ]
}

如果项目中有eslint 则在 eslintrc文件中需要加上 jest: true 否则单元测试代码中的 describe， expect ... 就会提示未定义的变量