# Jest与TDD BDD实战测试

**Repository Path**: test-dev-qa/jest_and_tddbdd_practical_test

## Basic Information

- **Project Name**: Jest与TDD BDD实战测试
- **Description**: Jest入门、TDD/BDD双实战测试
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-11-27
- **Last Updated**: 2024-11-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Jset 的使用

前端测试技术

![IMG '前端测试技术.png'](前端测试技术.png)

前端自动化测试工具种类

![IMG '前端自动化测试工具种类.png'](前端自动化测试工具种类.png)

### Jest 官网 https://jestjs.io/docs/en/getting-started.html 文档

**Jest 的安装**

```
cnpm install jest@24.8.0" -D
```

在 package.json 中配置

```js
"scripts": {
    "test": "jest --watchAll"
  },
```

使用 npm run test 命令后会自动运行带 .test.js 后缀的文件，--watchAll 表示让 Jest 监听所有测试文件的变化，只要测试文件发生变化，就自动测试所有测试用例

**为什么使用 Jest 测试时要把被测试的方法进行模块化导出？**

因为 Jest 实际上是帮我们同时进行了单元测试（模块测试）和集成测试（多个模块测试），所以使用 Jest 就一定要引入模块的概念，**Jest 测试的东西一定是模块**。

**如果在 html 中引入被测试的 js 时使用的是\<script src="">方式引入的，则在该 js 末尾要加上**

```js
try () {
  module.exports ={
  //...
  }
} catch (e) {}
```

因为 Jest 运行的环境是 node 环境，而 html 文件的运行环境是浏览器（当然现在已经很少有人使用\<script src="">方法引用了，而是改为使用 ES Module 方式来模块化引入了）

因为 Jest 的运行环境是 node 环境，使用的模块化规范是 commonJs 规范，而浏览器端使用的是 ES Module 规范，所以在 node 环境下运行 Jset 时要使用 babel 进行转义（ES Module 转为 commonJs）

**babel 的安装与配置**

**babel 的安装**

```
cnpm install @babel/core@7.4.5 @babel/preset-env@7.4.5 -D
```

**babel 的配置**

创建.babelrc 文件

配置如下：

```js
{
    "presets": [
        // babel要使用哪些插件去对代码进行转化
        // 格式为[插件名, 该插件的配置]
        ["@babel/preset-env",{
          // @babel/preset-env为babel对最新语法支持的插件集合
          "targets": {
            "node": "current" // 意思是根据当前的node环境（当前机器的node版本号）需要的情况，结合'@babel/preset-env'对当前的代码进行转化
                              // 由于当前的node环境不支持import语句，所以当使用import语句时babel会使用'@babel/preset-env'帮我们对import语句进行转换，转换为commonJs语法
          }
        }]
    ]
}
```

配置好后运行 npm run test 就可以正常运行了。

运行的内部机制是这样的：当运行 npm run jest 时 jest 内部集成了一个插件叫 babel-jest，该插件会检测当前环境是否安装了 babel（babel-core），如果安装了会去取 .babelrc 文件中的配置，然后会在运行测试之前，结合 babel，先把代码做一次转化，然后再运行转化过的测试用例代码。

**npx jest --init 命令表示调用该目录下的 node_modules 里的 jest 依赖包的二进制文件并进行初始化**

**npx jest --coverage 命令表示生成测试覆盖率声明**

**在 package.json 里配置如下代码然后运行 npm run coverage 与直接运行 npx jest --coverage 是一样的**

```json
script {
  "coverage": "jest --coverage"
}
```

code coverage（代码测试覆盖率）表示编写的这些测试的代码对原来功能性的代码做了百分之多少的测试，这个比率就是代码测试覆盖率

jest.config.js 文件内

```json
coverageDirectory: "coverage",
```

表示生成的代码测试覆盖文件所在的文件夹名叫"coverage"

## 匹配器 matchers

### 1. toBe

toBe 使用的是类似于 object.is 的方式匹配的，所以无法匹配内容相同的对象

```js
// 测试用例
test("测试toBe匹配器", () => {
  expect(10).toBe(10); // 通过
  const a = { one: 1 };
  expect(a).toBe({ one: 1 }); //不通过，因为地址不同
});
```

### 2. toEqual

toEqual 只匹配内容

```js
test("测试对象内容相等", () => {
  // toEqual 只匹配内容
  const a = { one: 1 };
  expect(a).toEqual({ one: 1 }); // 通过
});
```

### 3. 有关真假的匹配器

toBeNull 用来匹配 null
toBeUndefined 用来匹配 undefined
toBeDefined 用来匹配被定义过的变量，**注意 null 类型属于被定义类型**
toBeTruthy 用来匹配可以转为 Boolen 为 true 的变量
toBeFalsy 用来匹配可以转为 Boolen 为 false 的变量

```js
test("真假相关匹配器", () => {
  // toEqual 只匹配内容
  const a = null;
  const b = undefined;
  const c = "";
  const d = 0;
  const e = 1;
  expect(a).toBeNull(); // 通过
  expect(b).toBeNull(); // 不通过

  expect(a).toBeUndefined(); // 不通过
  expect(b).toBeUndefined(); // 通过
  expect(c).toBeUndefined(); // 不通过

  expect(a).toBeDefined(); // 通过，null属于被定义类型
  expect(b).toBeDefined(); // 不通过
  expect(c).toBeDefined(); // 通过

  expect(a).toBeTruthy(); // 不通过
  expect(e).toBeFalsy(); // 不通过
});
```

### 4. not 取反匹配器

用来匹配不是后面的内容

```js
test("not 匹配器", () => {
  const a = 1;
  expect(a).not.toBeFalsy(); // 通过
});
```

### 5. not 数字相关匹配器

toBeGreaterThan、toBeLessThan、toBeGreaterThanOrEqual、toBeLessThanOrEqual

```js
test("数字相关匹配器", () => {
  const count = 10;
  expect(count).toBeGreaterThanOrEqual(10); // 通过
});
```

toBeCloseTo 用来匹配浮点数字的运算

```js
test("colse与toEqual在浮点数上的区别", () => {
  const firstNum = 0.1;
  const secondNum = 0.2;
  expect(firstNum + secondNum).toBeCloseTo(0.3); // 通过
  expect(firstNum + secondNum).toEqual(0.3); // 不通过
});
```

### 6. 字符串相关匹配器

toMatch 字符串是否包含某字符的匹配器

```js
test("字符串是否包含某字符", () => {
  const str = "http://www.baidu.com";
  expect(str).toMatch("baidu"); // 通过（使用字符串进行匹配）
  expect(str).toMatch(/baidu/); // 通过（使用正则表达式进行匹配）
});
```

### 7. Array、Set 相关匹配器

toContain 数组是否包含某元素的匹配器

```js
test("数组是否包含某元素", () => {
  const arr = ["ms", "google", "apple", "amazon"];
  const set = new Set(arr);
  expect(arr).toContain("ms"); // 通过
  expect(set).toContain("ms"); // 通过
});
```

### 8. 异常相关匹配器

```js
const throwNewErrorFunc = () => {
  throw new Error("this is a new error");
};
test("toThrow", () => {
  expect(throwNewErrorFunc).toThrow(/new error/); // 通过（这里使用了正则进行匹配）
});
```

### 9. 其他相关匹配器

见 Jest 官网 API Reference/Expect https://jestjs.io/docs/en/expect

## Jest 命令行工具的使用

执行完测试用例后，会在行末尾处出有 **Watch Usage: Press w to show more.** 的提示

此时按住 **w** 键可以切换测试模式，如以下代码所示

```js
 › Press f to quit "only failed tests" mode.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
```
**f** ：只测试之前没通过的测试
**o** ：如果测试文件有多个时，只测试修改过的文件。
如果想知道哪个文件代码发生了改变，则需要使用代码比对工具进行比对来实现，所以这里面需要借助 git 插件来实现代码比对功能。