Jest 快照测试

Jest 是一个在 Facebook 使用的测试框架。在 React 社区，它被用来做 React 的组件测试。
Jest 赋予你写快照测试的能力。

import React from 'react';
import ReactDOM from 'react-dom';
// 写快照之前，需要额外安装一个工具库：
import renderer from 'react-test-renderer';
import App, { Table } from './App';

...
// “describe”块中来定义一个测试套件。可包含一系列关于特定组件的“it”块。
describe('Search', () => {
  // mock 一些测试数据 ，非常重要
  const props={ 
    list:[
      { title: '1', author: '1', num_comments: 1, points: 2, objectID: 'y' },
      { title: '2', author: '2', num_comments: 1, points: 2, objectID: 'z' },
    ] 
  }
  // “it”块描述了一个测试用例。
  it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<Table { ...props } />, div);
  });
  // “test”块来实现一个快照测试
  test('has a valid snapshot', () => {
    const component = renderer.create(
      <Table { ...props } />
    );
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

Enzyme 单元测试

Enzyme 可以用来断言、操作、遍历 React 组件。你可以用它来管理单元测试，在 React 测试中与快照测试互补。

安装（还需要安装一个扩展库）：

npm install --save-dev enzyme react-addons-test-utils enzyme-adapter-react-16

适配器初始化：

import React from 'react';
import ReactDOM from 'react-dom';
import renderer from 'react-test-renderer';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import App, { Search, Button, Table } from './App';
Enzyme.configure({ adapter: new Adapter() });

写一个单元测试：使用 shallow() 方法渲染你的Table组件，并且断言 Table 有两个子项，因为你传入了两个列表项。断言仅仅检查这个元素两个带有类名叫 table-row 的元素:

import React from 'react';
import ReactDOM from 'react-dom';
import renderer from 'react-test-renderer';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import App, { Search, Button, Table } from './App';
...
describe('Table', () => {
  const props = {
    list: [
      { title: '1', author: '1', num_comments: 1, points: 2, objectID: 'y' },
      { title: '2', author: '2', num_comments: 1, points: 2, objectID: 'z' },
    ],
  };
...
  it('shows two items in list', () => {
      const element = shallow(<Table { ...props } />
    );
    expect(element.find('.table-row').length).toBe(2);
  });
});

Enzyme API 中总共有三种渲染机制。浅渲染 shallow() 外，这里还有 mount() 和render() 方法。这两种方式都会初始化父组件和所有的子组件。此外 mount() 还给予你调用组件生命周期的方法。但是什时候该使用哪种渲染机制呢？这里有一些建议：

不论怎样都优先尝试使用浅渲染（shallow()），不会渲染子组件。
如果需要测试 componentDidMount() 或 componentDidUpdate()，使用 mount()。
如果你想测试组件的生命周期和子组件的行为，使用 mount()。
如果你想测试一个组件的子组件的渲染，并且不关心生命周期方法和减少些渲染的花销的话，使用 render()。

React 测试入门教程-阮一峰