使用jest测试vue+elementUI项目

使用jest测试vue+elementUI项目

因为在网上都没有完整的流程，资料也很少，开始的时候踩过很多坑，所以写一些东西记录一下，有问题也可以提出来一起讨论。下面的内容是本人做单元测试时学到的以及遇到的问题，测试还没做完，后面会不定时更新。

参考资料

• Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
• jest 使用文档

1. 安装需要的依赖

   npm install jest vue-jest babel-jest @vue/test-utils --save-dev
   

2. 配置文件(具体用法请查阅 jest 使用文档)

   // test/unit/jest.conf.js
   const path = require('path')
   
   module.exports = {
     rootDir: path.resolve(__dirname, '../../'),
     moduleFileExtensions: [
       'js',
       'json',
       'vue'
     ],
     moduleNameMapper: {
       '^@/(.*)$': '/src/$1'
     },
     // 将测试结果在浏览器中展示，设置此项需安装jest-html-reporter
     // reporters: [
     //   'default',
     //   ['./node_modules/jest-html-reporter', {
     //     pageTitle: 'Test Report',
     //     outputPath: 'test/unit/test-report.html',
     //     includeFailureMsg: true,
     //     includeConsoleLog: true
     //   }]
     // ],
     transform: {
       '^.+\\.js$': '/node_modules/babel-jest',
       '.*\\.(vue)$': '/node_modules/vue-jest'
     },
     testPathIgnorePatterns: [
       '/test/e2e'
     ],
     // snapshotSerializers: ['/node_modules/jest-serializer-vue'],
     setupFiles: ['/test/unit/setup'],
     // mapCoverage: true,
     collectCoverage: false,
     coverageDirectory: '/test/unit/coverage',
     collectCoverageFrom: [
       'src/**/*.{js,vue}',
       '!src/main.js',
       '!src/router/index.js',
       '!**/node_modules/**'
       // 'src/common/*.{js,vue}'
     ]
   }
   

3. 下次继续