解決未安裝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就不會報錯了，會顯示執行成功的消息。