前端单元测试-蒲公英云

前端单元测试

创建项目：

vue init webpack 项目名

在现有项目中添加jest+vue test utils的测试环境
1、安装依赖

npm i @vue/test-utils babel-jest jest jest-serializer-vue jest-transform-stub vue-jest -D

2、修改.babelrc中添加配置

"env": { 
   "test": { 
     "presets": ["env"]
   }
 }

3、建立测试文件目录
在这里插入图片描述
4、添加jest配置，在jest.conf.js中添上如下代码：

const path = require('path');
module.exports = { 
    verbose: true,
    testURL: 'http://localhost/',
    rootDir: path.resolve(__dirname, '../../'),
    moduleFileExtensions: [
        'js',
        'json',
        'vue'
    ],
    moduleNameMapper: { 
        '^@\/(.*?\.?(js|vue)?|)$': '<rootDir>/src/$1',   // @路径转换，例如：@/components/Main.vue -> rootDir/src/components/Main.vue
        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/test/unit/__mocks__/fileMock.js', // 模拟加载静态文件
        '\\.(css|less|scss|sass)$': '<rootDir>/test/unit/__mocks__/styleMock.js'　　// 模拟加载样式文件 
    },
    testMatch: [ //匹配测试用例的文件
        '<rootDir>/test/unit/specs/*.spec.js'
    ],
    transform: { 
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
        '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
    },
    testPathIgnorePatterns: [
        '<rootDir>/test/e2e'
    ],
    // setupFiles: ['<rootDir>/test/unit/setup'],
    snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
    coverageDirectory: '<rootDir>/test/unit/coverage', // 覆盖率报告的目录
    collectCoverageFrom: [ // 测试报告想要覆盖那些文件，目录，前面加！是避开这些文件
        // 'src/components/**/*.(js|vue)',
        'src/components/*.(vue)',
        '!src/main.js',
        '!src/router/index.js',
        '!**/node_modules/**'
    ]
}

5、给测试添加上eslint配置，在.eslintrc中添加以下内容

{ 
  "env": {  
    "jest": true
  }
}

6、在mocks开始文件下建立fileMock.js，添加以下内容，用来处理测试中遇到的静态资源

module.exports = 'test-file-stub';

7、在specs文件夹下创建文件写测试用例代码,如：example.spec.js
8、在package.json中的scripts中添加测试命令：

"unit": "jest --config test/s -unit/jest.conf.j-coverage",

执行npm run unit 就可以启动测试了
项目中用到了element框架，所以在写测试用例的时候，也需要给模拟的vue安装element UI

import {  mount, createLocalVue  } from '@vue/test-utils'
const localVue = createLocalVue()
import ElementUI from 'element-ui'
localVue.use(ElementUI)