單元測試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文件的編譯器
  },