> For the complete documentation index, see [llms.txt](https://yes-1-am.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yes-1-am.gitbook.io/blog/ce-shi/chu-shi-dai-ma-ce-shi.md).

# 初识代码测试

## 1. Node 自带 assert 断言模块

`assert` 模块提供了一系列的断言方法用于校验变量，这个模块推荐使用 `strict mode`, 但同时也有一些宽松的模式

```javascript
const assert = require('assert');

const a = {
  foo: 1,
  bar: 2
}

const b = {
  foo: 1,
  bar: 2,
  baz: 3
}

// 当 a b 内容相同时，不会有任何输出
// 内容不相同时，会报错，错误信息是第三个参数
assert.deepEqual(a, b, `error, expected ${JSON.stringify(a)} but got ${JSON.stringify(b)}`);
```

包含的方法:\
1\. assert.deepEqual() 2. assert.equal() 3. assert.notDeepEqual() 4. assert.notEqual() ... 等

## 2. Jest 中的全局变量

[文档](https://jestjs.io/docs/en/api)

在你的测试文件中，Jest 将这些方法和对象(比如test,describe)放进了全局的环境中。你不需要 `require` 或者 `import` 就能使用它们。

例如:\
1\. afterAll() 2. beforeAll() 3. describe() 4. test() ***it() 的别名*** ... 等

test 和 descript 示例代码：

```javascript
const myBeverage = {
  delicious: true,
  sour: false,
};

describe('my beverage', () => {
  test('is delicious', () => {
    expect(myBeverage.delicious).toBeTruthy();
  });

  test('is not sour', () => {
    expect(myBeverage.sour).toBeFalsy();
  });
});
```

*疑问: 为啥没有提到 expect？*

### 2.1 Expect

[链接](https://jestjs.io/docs/en/expect#expectanything)

当你在写测试的时候，你经常需要检验某些值是否符合要求。`expect` 允许你访问一系列的 `matches` 来对不同的事物进行校验。

#### 2.1.1 expect(value)

`expect` 函数是用来检验值的，通常不会直接调用 `expect` 函数，而是，会和一个 **matcher** 函数一起使用。

示例:

假设 `bestLaCroixFlaovr` 函数预期是返回 `grapefruit`，那么你可以这样进行测试:

```javascript
test('the best flavor is grapefruit', () => {
    expect(bestLaCroixFlaovr()).toBe('grapefruit')
})
```

在这个例子中， `toBe` 就是 **matcher** 函数，为了测试不同类型的数据，这里有很多不同的 **matcher** 函数。

**注意:**

`expect` 函数的参数应该是**你的代码生成的值**，而 **matcher** 的参数应该是**正确值(被期望的值)**，如果你搞混了，你的测试依旧可以运行，但是如果有的测试失败了，那么失败的测试的错误信息会看起来很奇怪。

#### 2.1.2 expect.extend(matchers)

通过自定义 matchers，扩展 expect

其余 API 略...

## 3. Jest 和 Enzyme 的关系

[参考文档](https://medium.com/codeclan/testing-react-with-jest-and-enzyme-20505fec4675)

Jest 是 JS 的测试框架, `acted as a test runner, assertion libraey, and mocking library`

Enzyme 是 JS 针对 React 的测试工具，使得更为容易去断言，操作 React 组件。\
Enzyme 提供了一些工具方法，用于**渲染组件，查找元素，以及和元素交互**

1. Jest 和 Enzyme 都为了测试 React 应用而特殊设计，但是 Jest 可以用来测试其他 JS 应用，但是 Enzyme 只能用于 React
2. Jest 不用 Enzyme，也可以实现**渲染组件，snapshots 测试**等功能，Enzyme 只是添加了一些额外的功能
3. Enzyme **可以单独使用不配合 Jest**, 但是这样的话必须要有另外一个 `test runner`

## 4. Enzyme 中的 mount, shallow 和 render 的区别

[Enzyme 文档](https://airbnb.io/enzyme/docs/api/)

1. shallow 方法对应 Shallow Rendering
2. mount 方法对应 Full Rendering
3. render 方法对应 Static Rendering

公共 *jsx* 代码

```
function Child() {
  return <div>child</div>
}

function App() {
  return (
    <div className="App">
    <Child/> 
      <header className="App-header">
       Parent
      </header>
    </div>
  );
}
```

### 4.1 shallow 测试

[文档](<https://airbnb.io/enzyme/docs/api/shallow.html >)

*快照结果*

```markup
<div
  className="App"
>
  <_default />  // 有 default 标签，没有渲染结果
  <header
    className="App-header"
  >
    Parent
  </header>
</div>
```

即不关心子组件的渲染内容

### 4.2 mount 测试

[文档](https://airbnb.io/enzyme/docs/api/mount.html)

*mount 快照结果*

```markup
<App>
  <div
    className="App"
  >
    <_default>  // 有 default 标签, 有渲染结果
      <div>
        child
      </div>
    </_default>
    <header
      className="App-header"
    >
      Parent
    </header>
  </div>
</App>
```

即会渲染出子组件的内容

> mount 本身使用 jsdom 来支持渲染，不像 shallow 或者 static rendering, mount 会真正的在 dom 中挂载组件，这意味着不同的测试用例如果使用同一个 DOM 的话会互相影响。因此，在写测试的时候，如果有必要，使用 `.unmount` 或者其他的方式做清理。

### 4.2 render 测试

*render 快照结果*

```markup
<div
  class="App"
>
  <div>   // 没有 default 标签，有渲染结果
    child
  </div>
  <header
    class="App-header"
  >
    Parent
  </header>
</div>
```

即会直接渲染子组件 html，没有了 default 标签。

> render 方法 生成的html 结构，内部使用了 Cheerio， 返回的结果是 CheerioWrapper 实例，可以使用 Cheerio 的方法。

## 参考资料

1. [Testing React with Jest and Enzyme I](https://medium.com/codeclan/testing-react-with-jest-and-enzyme-20505fec4675)
2. [Testing React with Jest and Enzyme II](https://codeburst.io/testing-react-events-with-jest-and-enzyme-ii-46fbe4b8b589)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yes-1-am.gitbook.io/blog/ce-shi/chu-shi-dai-ma-ce-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.