# 初识代码测试

## 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)