單元測試jest部署

單元測試jest部署

引入jest需安裝的基礎插件：

基礎插件

• @babel/core
  說明：編譯工具核心模塊包
• @babel/preset-env
  說明：編譯工具，支持es2015特性的編譯打包工具包
• babel-jest
  說明：對.jsx、.js文件進行轉義的包工具。
• jest
  說明：jest單元測試模塊包

####引入jest的相關配置：
jest.config.js
若無jest.config.js，則執行jest --init，初始化jest的配置文件
修改如下配置：

moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"    //映射jssdk源碼src的目錄
  }

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {    //配置babel預置編譯器爲@babel/preset-env
      targets: {
        node: 'current'
      }
    }]
  ]
};

###JavaScript部署jest ####安裝插件： 參照文首【引入jest需安裝的基礎插件】 ####相關配置 參照文首【引入jest的相關配置】
###TypeScript部署jest ####安裝插件： __1.安裝jest基礎插件__ 參照文首【引入jest需安裝的基礎插件】 __2.安裝適配TypeScript相關插件__ - @babel/preset-typescript 說明：支持typescript的編譯 - @types/jest 說明：在typescript中支持jest的afterAll、descript、test等關鍵字、斷言等。

####相關配置
基於文首【引入jest的相關配置】，配置babel.config.js
備註：只對應修改以下配置，勿粘貼覆蓋。

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        node: 'current'
      }
    }],
    "@babel/preset-typescript"  //新增此配置
  ]
};

###Vue部署jest ####安裝插件： __1.安裝jest基礎插件__ 參照文首【引入jest需安裝的基礎插件】 __2.安裝適配Vue相關插件__ - vue-jest 說明：提供jest支持vue的轉義 - @vue/test-utils 說明：提供jest操作vue的API - babel-core 說明：由於vue-jest引用的是babel-core，而不是@babel/core，所以還需要添加上babel-core的依賴，無法無法執行。 - jest-serializer-vue 說明：jest中對vue的序列化插件。 - @babel/plugin-transform-modules-commonjs 說明：Jest在Node中運行，因此需要將ES模塊轉換爲CommonJS模塊。因此，如果您使用的是webpack 2，則很可能需要將Babel配置爲僅在test環境中將ES模塊轉換爲CommonJS模塊

####相關配置
jest.config.js
備註：只對應修改以下配置，勿粘貼覆蓋。

  moduleFileExtensions: [
    "js",
    "json",
    "jsx",
    "ts",
    "tsx",
    "node",
    "vue"   //配置上vue的支持
  ],

  snapshotSerializers: [
    "<rootDir>/node_modules/jest-serializer-vue"           //配置添加上生成vue快照的序列化器的模塊
  ],

  // A map from regular expressions to paths to transformers
  transform: {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",      //配置js文件的編譯器
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"       //配置vue文件的編譯器
  },