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

 

一、起因

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

 

二、错误论述

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

         Error：describe is not define  

         Error：it is not define

    2、关于 fs 的错误

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

 

三、解决方法

 1、解决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......’错。解决它请继续阅读。

 

2、解决fs的错误

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

 node: {
     fs: 'empty'
 },

    /bulid/webpack.base.conf.js:　

　

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