单元测试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部署的主要内容,如果未能解决你的问题,请参考以下文章