vue如何添加jest測試

更新時間：2023年07月06日 09:48:28 作者：鶸者為何戰(zhàn)斗

這篇文章主要介紹了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、項目創(chuàng)建好后，可以看到自動創(chuàng)建的tests文件夾和其下的一個測試文件，以及jest.config.js配置文件

5、運行package.json中的腳本命令 npm run test:unit，即可執(zhí)行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：測試報告，執(zhí)行這個命令，會生成一個junit.xml文件，但要成功執(zhí)行這條命令，必須執(zhí)行 npm i jest-junit --save-dev，安裝jest-junit依賴

jest.config.js文件配置

module.exports = {
? preset: "@vue/cli-plugin-unit-jest",
? verbose: true, // 多于一個測試文件運行時展示每個測試用例測試通過情況
? bail: true, // 參數指定只要有一個測試用例沒有通過，就停止執(zhí)行后面的測試用例
? testEnvironment: 'jsdom', // 測試環(huán)境，jsdom可以在Node虛擬瀏覽器環(huán)境運行測試
? 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: [ // 需要進行收集覆蓋率的文件，會依次進行執(zhí)行符合的文件
? ? '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監(jiān)視插件
? ? require.resolve('jest-watch-typeahead/filename'),
? ? require.resolve('jest-watch-typeahead/testname')
? ]
};