Jest 单元测试快速入门

测试的类型

• 单元测试
• 集成测试
• 端到端测试（E2E）

测试 React 组件需要解决两个关键问题

• 怎么渲染待测试组件；
• 怎么测试渲染出来的组件；

浅层渲染

对于组件渲染，Airbnb 作为重度使用 React 的先驱，早就提出了专门的解决方案：Enzyme

$ npm install enzyme enzyme-adapter-react-16

Enzyme 提供的一个重要功能便是组件的浅层渲染（Shallow Rendering）。它允许我们在运行测试时，只渲染父组件而不渲染其所有的子组件。浅层渲染十分快速，因此非常适合单元测试。

// src/App.test.js
import React from 'react';
import {
    shallow } from 'enzyme';

import App from './App';

describe('app component', () => {
   
  it('contains a header with the "Hello world!"', () => {
   
    const app = shallow(<App />);
    expect(app.containsMatchingElement(<h1>Hello world!</h1>)).toEqual(true);
  });
});

对于测试渲染出来的组件，Jest 自带的 Matcher 不太好用。实际上，社区还提供了更好的选择——专门为 Enzyme 定制的 Matcher 库：enzyme-matchers。这些 Matcher 使得编写断言语句更轻松、更具可读性。

$ npm install jest-enzyme

可以看到在第一个测试用例中，我们使用了 toContainReact 这个 Matcher，它的含义十分明显，一目了然；在后面的测试用例中，我们通过 todoList.find('li') 来获取 li 元素数组，并判断它的长度是否符合要求。

// src/TodoList.test.js
import React from 'react';