【Jest】Jest单元测试环境搭建

文章目录

前言

今天开始！！！学习vue源码，那么要学习源码前首先要了解Jest。

https://www.jestjs.cn/

官网自带中文非常友好！

在这里插入图片描述

1、项目环境搭建

初始化仓库

执行命令

yarn项目初始化安装

yarn init -y

这样项目中就出现一个package.json文件

安装ts环境

vue源码的环境集成了TypeScript，所以我们也要把TypeScript装进项目中

yarn add typescript --dev

为了更好的配置TypeScript，我们执行这个命令行，生成tsconfig.json文件

npx tsc --init

安装jest环境

安装jest

安装@type/jest声明文件

这是一条合并安装的命令行

yarn add jest @types/jest --dev

我们需要安装babel，因为jest是基于node.js开发的，node遵循CommonJs规范，所以想要使用ESModule规范可以使用babel把代码转译。

在Jest官网也有介绍：

想要再jest中使用Babel和TypeScript，我们可以执行这些命令，来添加配置Babel和TypeScript的配置方式。

添加Babel，添加TypeScript

yarn add --dev babel-jest @babel/core @babel/preset-env
yarn add --dev @babel/preset-typescript

官网中提示我们在根目录新建babel.config.js文件并且添加以下配置。

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

在这里插入图片描述

在pack.json新增"scripts": {"test" : "jest"}启动命令

可以看下我正在使用的包版本

{
    
    
  "name": "mini-vue",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    
    
    "test": "jest"
  },
  "devDependencies": {
    
    
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-typescript": "^7.18.6",
    "@types/jest": "^29.4.0",
    "babel-jest": "^29.4.2",
    "jest": "^29.4.2",
    "typescript": "^4.9.5"
  }
}

在tsconfig.json中更改配置

注意哦！不要新增"types" :[“jest”]项，现在的@type/jest ^29.4.0不用启用这个选项！！所以只要修改一下类型检配置就行，因为我们重测试，不希望ts再去做类型检测。

    "noImplicitAny": false,  /* Enable error reporting for expressions and declarations with an implied 'any' type. */

2、初始化项目文件夹

在这里插入图片描述

然后我们就可以开始愉快的单元测试了！！！

这是初始化的文件夹，新建src到根目录并创建reactivity文件夹

再新建tests文件夹，新建index.spec.ts文件

写一下测试代码我们进行测试

Index.spec.ts

it("init", () => {
    
    
  expect(true).toBe(true);
});

最后一步，我们在根目录中输入命令行

yarn test

然后执行，jest就会开始单元测试。

jest的单元测试的环境搭建就成功了！！！

在这里插入图片描述

3.断点测试

下载Jest插件可以帮助我们进行断点测试
在这里插入图片描述
找到要单元测试的文件，打上断点，点击Debug

然后一步步测试就可以跟着一个个节点访问程序的执行过程。