单元测试jest部署

Posted m-silencer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单元测试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文件的编译器
  ,

以上是关于单元测试jest部署的主要内容,如果未能解决你的问题,请参考以下文章

Jest进行前端单元测试

Jest单元测试进阶

前端测试通过jest看看前端单元测试

如何测试我的数据是不是更改? (Vue JS、Jest、单元测试)

使用Jest进行单元测试

web前端好帮手 - Jest单元测试工具