解决未安装unit测试和jest的Vue项目运行karma start时的错误

 

1、原由

　　在#单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目（一）文中，说明了是对已有的Vue项目进行测试框架的搭建，并进行测试。可是此项目在利用 vue-cli 建立时并无安装 unit 测试和 jest 工具，因而形成了karma start 测试运行时的一些错误。本文意在解决主要的错误。

 

2、错误论述

共有两个大错误：
　一、关于mocha关键字未定义的错误 

         Error：describe is not define  

         Error：it is not define

    二、关于 fs 的错误

        Error：Can't resolve ‘fs’ in ‘.......path......’

 

3、解决方法

 一、解决mocha关键字未定义的错误

    （1） 猜想错因：

         既然识别不了mocha语法，可是又安装成功了，猜想配置文件出错或者webpack编译时识别不了mocha。

    （2） 调查错误：

         在测试脚本编写 require('mocha')，以便对‘mocha’进行Ctrl+鼠标左键能快速进入它的module index文件。

           

           

       发现此文件后缀名是.ts，表示是一个typescript文件，而非js文件。因为项目中并无引进typescript，故而编译不了它。须要引进可以编译 ts 文件的工具。

      由于缺失vue的 unit测试工具 和 jest 工具才致使的错误，那么必然是它们已经帮咱们作了支持 ts 文件的工做。百度了一下，应该是 jest 的做用，它支持ts。接下来就须要安装 jest相关插件 && 设置配置文件了。

  （3） 解决：

      安装jest 和 babel-jest ：     

#npm install jest --save-dev
#npm install babel-jest --save-dev

　  配置文件：　

       在 /test/unit/ 目录下新建三个配置文件【jest.conf.js   setup.js    .eslintrc】，我是直接从以前能正确运行的demo中拷贝过来的：

      ①  /test/unit/jest.conf.js

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/**'
  ]
}

 

     ②  /test/unit/setup.js

import Vue from 'vue'

Vue.config.productionTip = false

 

     ③  /test/unit/.eslintrc

{
  "env": { 
    "jest": true
  },
  "globals": { 
  }
}  

 

     目录结构：

　     

 （4） 运行karma：

       #karma start

      再也不报 Error：describe is not define  错误，可是出现了Error：Can't resolve ‘fs’ in ‘.......path......’错。解决它请继续阅读。

 

二、解决fs的错误

     修改webpack的配置文件，增长：

 node: {
     fs: 'empty'
 },

    /bulid/webpack.base.conf.js:　

　

   问题解决完了，此时再 karma start就不会报错了，会显示执行成功的消息。