单元测试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'
      }
    }]
  ]
};

<br/> ###JavaScript部署jest ####安装插件：参照文首【引入jest需安装的基础插件】 ####相关配置参照文首【引入jest的相关配置】 <br/> ###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"  //新增此配置
  ]
};

<br/> ###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文件的编译器
  },

原文出处：https://www.cnblogs.com/M-Silencer/p/11214478.html

来源：oschina

链接：https://my.oschina.net/u/4409332/blog/3258706

标签

babel

Vue.js

javascript

typescript