首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue添加jest测试

vue如何添加jest测试

2023-07-06 09:48:28 作者：鶸者为何战斗

这篇文章主要介绍了vue如何添加jest测试问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue添加jest测试

用vuecli搭建了vue框架,想弄个单元测试，但是不是SecurityError: localStorage is not available for opaque origins,就是找不到包。

这里分为两种情况解决。

第一、如果是终端敲npm run unit，那么需要修改jest.conf.js文件添加一行testURL

const path = require('path')
module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e'
  ],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  mapCoverage: true,
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ],
  'testURL': 'http://localhost'
}

第二、如果想在webstorm里面直接点击*.test.js或者*.spec.js两种文件运行

那么你需要修改package.json里面的

{
  "name": "frontlearn",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "ruvikvan",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "better-scroll": "^1.15.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vue-test-utils": "^1.0.0-beta.11"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "nightwatch": "^0.9.12",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ],
    "testURL": "http://localhost"
  }
}

vue项目中添加单元测试

Vue项目的单元测试用的是Vue Test Utils，这是Vue.js 官方的单元测试实用工具库，在Vue和Jest之间提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试

官网链接：介绍 | Vue Test Utils

新建Vue项目并使用Jest

1、运行命令vue create ，选择自定义配置

2、按需选择配置，单元测试选择Unit Testing，端到端测试选择B2B Testing

3、接下来按需选择Vue版本以及其他配置，选择Jest，一路回车确定即可，最后需不需要保存配置由你决定

4、项目创建好后，可以看到自动创建的tests文件夹和其下的一个测试文件，以及jest.config.js配置文件

5、运行package.json中的脚本命令 npm run test:unit，即可执行tests文件夹下所有的测试文件（默认后缀为spec.js/spec.ts）以及所有的js/ts文件

已有Vue项目集成Jest

1、在vue项目目录下运行 vue add @vue/cli-plugin-unit-jest 命令，这个命令会帮我们把相关的配置都配好，相关的依赖都装好，并生成jest.config.js文件和一个tests文件夹，目录结构同上面新建的Vue项目的目录结构相同

2、npm run test:unit 运行测试命令

package.json中的测试脚本命令

"scripts": {
    "test:unit": "vue-cli-service test:unit --coverage test --reporters=jest-junit",
 }

--coverage：全量覆盖率报告，会生成一个coverage文件夹，打开里面的index.html 里面会有详细的信息展示
test jest --reporters=default --reporters=jest-junit：测试报告，执行这个命令，会生成一个junit.xml文件，但要成功执行这条命令，必须执行 npm i jest-junit --save-dev，安装jest-junit依赖

jest.config.js文件配置

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  verbose: true, // 多于一个测试文件运行时展示每个测试用例测试通过情况
  bail: true, // 参数指定只要有一个测试用例没有通过，就停止执行后面的测试用例
  testEnvironment: 'jsdom', // 测试环境，jsdom可以在Node虚拟浏览器环境运行测试
  moduleFileExtensions: [ // 需要检测测的文件类型
    'js',
    'jsx',
    'json',
    // tell Jest to handle *.vue files
    'vue'
  ],
  transform: { // 预处理器配置，匹配的文件要经过转译才能被识别，否则会报错
    '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$':
    require.resolve('jest-transform-stub'),
    '^.+\\.jsx?$': require.resolve('babel-jest')
  },
  transformIgnorePatterns: ['/node_modules/'], // 转译时忽略 node_modules
  moduleNameMapper: { // 从正则表达式到模块名称的映射，和webpack的alisa类似
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [ // Jest在快照测试中使用的快照序列化程序模块的路径列表
    'jest-serializer-vue'
  ],
  testMatch: [ // Jest用于检测测试的文件，可以用正则去匹配
    '**/tests/unit/**/*.spec.[jt]s?(x)',
    '**/__tests__/*.[jt]s?(x)'
  ],
  collectCoverage: true, // 覆盖率报告，运行测试命令后终端会展示报告结果
  collectCoverageFrom: [ // 需要进行收集覆盖率的文件，会依次进行执行符合的文件
    'src/**/*.{js,vue}',
  ],
  coverageReporters: ['html', 'lcov', 'text-summary'], // Jest在编写覆盖率报告的配置，添加"text"或"text-summary"在控制台输出中查看覆盖率摘要
  coveragePathIgnorePatterns: ['/node_modules/'], // 需要跳过覆盖率信息收集的文件目录
  coverageDirectory: "<rootDir>/tests/unit/coverage", // Jest输出覆盖信息文件的目录，运行测试命令会自动生成如下路径的coverage文件
  coverageThreshold: { // 覆盖结果的最低阈值设置，如果未达到阈值，jest将返回失败
    global: {
      branches: 60,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
  testURL: 'http://localhost/', // 官网没有解释，经过尝试可以随意配置ip，如果识别不出是ip则会报错
  watchPlugins: [ // jest监视插件
    require.resolve('jest-watch-typeahead/filename'),
    require.resolve('jest-watch-typeahead/testname')
  ]
};

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。