vue adds jest test
I built a vue framework with vuecli and wanted to get a unit test, but either SecurityError: localStorage is not available for opaque origins, or the package cannot be found.
Here are two solutions.
First, if the terminal is hitting npm run unit, then you need to modify the file and add a line of testURL.
const path = require('path')
= {
rootDir: (__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/',
'!src/router/',
'!**/node_modules/**'
],
'testURL': 'http://localhost'
}Second, if you want to directly click on the *. or *. in webstorm to run the two files
Then you need to modify the
{
"name": "frontlearn",
"version": "1.0.0",
"description": "A project",
"author": "ruvikvan",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/",
"start": "npm run dev",
"unit": "jest --config test/unit/ --coverage",
"e2e": "node test/e2e/",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/"
},
"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"
}
}Add unit tests to vue project
The unit test of the Vue project uses Vue Test Utils, which is the official unit testing utility library. It provides a bridge between Vue and Jest, exposing some interfaces, making it more convenient for us to write unit tests for Vue applications through Jest.
Official website link:Introduction | Vue Test Utils
Create a new Vue project and use Jest
1. Run the command vue create and select custom configuration
2. Select configuration on demand, select Unit Testing for unit tests, and select B2B Testing for end-to-end tests
3. Next, select Vue version and other configurations as needed, select Jest, and enter all the way to determine whether the configuration needs to be saved is up to you.
4. After the project is created, you can see the automatically created tests folder, a test file under it, as well as the configuration file.
5. The running script command npm run test:unit can execute all test files in the tests folder (the default suffix is /) and all js/ts files.
Already integrated with Vue projects Jest
1. Run the vue add @vue/cli-plugin-unit-jest command in the vue project directory. This command will help us configure all the relevant configurations, install all the relevant dependencies, and generate files and a tests folder. The directory structure is the same as the directory structure of the newly created Vue project above.
2. npm run test:unit runs the test command
Test script commands in
"scripts": {
"test:unit": "vue-cli-service test:unit --coverage test --reporters=jest-junit",
}- --coverage: Full coverage report, a coverage folder will be generated, and the detailed information will be displayed inside.
- test jest --reporters=default --reporters=jest-junit: Test report, executing this command will generate a file, but to successfully execute this command, you must execute npm i jest-junit --save-dev, and install jest-junit dependencies
File configuration
= {
preset: "@vue/cli-plugin-unit-jest",
verbose: true, // More than one test file is run to show the test pass of each test case bail: true, // Parameter specifies that as long as one test case fails, the subsequent test case will be stopped testEnvironment: 'jsdom', // Test environment, jsdom can run tests in Node virtual browser environment moduleFileExtensions: [ // File type that needs to be detected 'js',
'jsx',
'json',
// tell Jest to handle *.vue files
'vue'
],
transform: { // Preprocessor configuration, matching files must be translated before they can be recognized, otherwise an error will be reported '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$':
('jest-transform-stub'),
'^.+\\.jsx?$': ('babel-jest')
},
transformIgnorePatterns: ['/node_modules/'], // Ignore node_modules during translation moduleNameMapper: { // The mapping from regular expression to module name is similar to webpack's alisa '^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [ // List of paths to the snapshot serializer module used by Jest in snapshot testing 'jest-serializer-vue'
],
testMatch: [ // Jest is used to detect test files, and can be matched using regular '**/tests/unit/**/*.spec.[jt]s?(x)',
'**/__tests__/*.[jt]s?(x)'
】,
collectCoverage: true, // Coverage report, the terminal will display the report results after running the test command
collectCoverageFrom: [ // Files that need to collect coverage will be executed in turn
'src/**/*.{js,vue}',
],
coverageReporters: ['html', 'lcov', 'text-summary'], // Jest is writing the configuration of coverage report, adding "text" or "text-summary" to view coverage summary in console output coveragePathIgnorePatterns: ['/node_modules/'], // File directory that needs to be skipped for coverage information collection coverageDirectory: "<rootDir>/tests/unit/coverage", // Jest outputs the directory of the overwrite information file. Running the test command will automatically generate the coverage file with the following path coverageThreshold: { // The minimum threshold setting for the overwrite result is set. If the threshold is not reached, jest will return a failure global: {
branches: 60,
functions: 80,
lines: 80,
statements: 80,
},
},
testURL: 'http://localhost/', // The official website has no explanation. After trying, you can configure the IP at will. If it cannot be identified, it will report an error. watchPlugins: [ // jest monitoring plugin ('jest-watch-typeahead/filename'),
('jest-watch-typeahead/testname')
]
};Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.