babel6下使用jest单元测试

背景：

1. 项目中后端api地址虽然做了环境变量配置，但是还是有同学随意更改配置导致测试环境地址发布到生产环境

2. 为了避免这种情况出现决定引入单元测试，在提交代码之前做一次测试校验

坑：

1. erp项目使用babel6，jest的babel配置需要babel7, 且无法屏蔽.babelrc配置，哭

   解决方案： jest项目作为一个小项目引入有单独的package.json文件

文件结构：

├── jest                                           	//  jest项目
│   ├── babel.config.js                            	//  babel配置
│   │   ├── ...                              			
│   ├── jest.config.js                           	//  jest配置
│   │   ├── ...                              
│   ├── tests                                  		//  tests文件
│   │   ├── test.js                                 
│   │   package.json  								//  依赖包配置
│   jest.js                                         //  node脚本
│   .gitignore
│   package.json	

配置jest环境

执行yarn global add jest 或者npm install jest --global安装全局jest

执行npm init 初始化项目

执行jest --init初始化jest配置

执行yarn add --dev babel-jest @babel/core @babel/preset-env下载babel依赖

到这一步基础配置都安装好了

babel配置

babel让jest可以支持es6

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

jest配置

jest配置指定我们需要匹配测试的文件地址

	
// jest.config.js 

module.exports = {
    testMatch: [
        "**/tests/**/*.[jt]s?(x)"                  // 匹配tests文件夹以及子目录下的文件
    ],
}

引入项目

因为jest项目是独立于父项目的， 我们要关联这两个项目

1. 配置 .gitignore 隐藏 node_modules

   
   # .gitignore
   
   node_modules/
   jest/node_modules/
   
   

2. npm i shelljs -D 安装shelljs， 使用shelljs 执行jest下的测试文件

   
   // jest.js
   
   const shell = require("shelljs");
   shell.cd('jest')
   shell.exec('jest')
   
   

3. 配置父项目package.json

# package.json    

"scripts": {
    "jest": "node jest"
}, 

使用

执行node jest或npm run jest 使用

---

git地址

官网地址