Jest测试环境搭建简单介绍

一、介绍

Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架。

二、安装

  1. 初始化环境。生成package.json文件,在根目录执行 npm init -y 初始化环境配置
npm init -y
  1. 安装jest
//因为jest是用在开发环境的,我们也加上--save-dev 
npm install --save-dev jest 

或者

npm install --save-dev jest babel-jest babel-core babel-preset-env 

第一种是直接简单全局安装;

第二种是安装了babel-jest、 babel-core、 regenerator-runtime、babel-preset-env 这几个依赖,为了让我们可以使用ES6的语法特性进行单元测试,ES6提供的 import 来导入模块的方式,Jest本身是不支持的。

3. 注意事项:
如果已经安装了babel一些列的工具后,使用import等es6的module语法还是报错的话,需要加一下配置:

  • 在根路径添加babel.config.js文件

    babel.config.js

  • 文件内添加以下配置内容:

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

三、配置

  1. 修改根目录package.json文件:
    打开package.json文件,将script下的test的值修改为jest,这样我们可以通过npm run test去调用
"scripts": {
    "test": "jest"
}
  1. 在需要测试的同级目录下建立_tests_文件夹(文件夹名字可以自定义,但最好语义化),_tests_文件夹里建测试文件:xxx.spec.js 或 xxx.test.js

    xxx对应需要测试的js文件名,方便查找,例如index.js的测试文件为index.spec.js.

在需要测试的index.js同级目录建_tests_目录

_tests_内部

四、执行

1. 单次执行:在执行过一次测试,如果更新代码后重新测试,需要再次执行命令。

  • 全局测试:在根目录内执行命令 ' jest ',会自动搜索到目录内所有的xxx.spec.js 和 xxx.test.js,并执行测试逻辑
jest 
  • 针对单文件测试:在根目录执行命令 ' jest path '(path为测试文件的路径),jest会根据路径找到测试文件xxx.spec.js,执行测试逻辑
jest js/xxx
或
jest js/xxx.spec.js

2. 伺服执行,执行一次命令后,测试程序保持监听,每次修改保存后自动去执行测试逻辑。

  • 配置package.json,
    在scripts内添加两个配置:"watch": "jest --watchAll", "coverage": "jest --coverage"
    "scripts": {
        "test": "jest",
        "watch": "jest --watchAll",
        "coverage": "jest --coverage"
    }
  • 执行命令:jest js/index --watchAll,
    这样就能保持实时监听,想要停止就control+c
    jest js/index --watchAll

五、补充

以上只是简单介绍了jest搭建,关于jest的用法就不做详细介绍了,大家可以通过下边的官方文档来了解下~
【Jest中文文档】

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容