第一步安装依赖

1、npm i -D enzyme enzyme-adapter-react-16  // 安装enzyme安装包
2、npm i -D jest  //安装jest包
3、npm i -D babel-jest babel-core regenerator-runtime // 如果是babel的版本是6
4、npm i -D babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime //如果babel的版本是7

第二步写组件

// AddTodo.js
import React, { Component, PropTypes } from 'react'
export default class AddTodo extends Component {
  render() {
    return (
      <header className="header">
        <h1>todo</h1>
        <input
          className="new-todo"
          type="text"
          onKeyUp={e => this.handleClick(e)}
          placeholder="input todo item"
          ref='input' />
      </header>
    )
  }
  handleClick(e) {
    if (e.keyCode === 13) {
      const text = e.target.value
      text && this.props.handleAddTodo(text);
    }
  }
}

// TodoList.js
import React from 'react';
function TodoList(props) {
  const { list } = props;

  return (
    <ul>
      {list.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}
export default TodoList;

// App.js
import React, { Component } from 'react';
import AddTodo from './AddTodo';
import TodoList from './TodoList';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }
  handleAddTodo = (item) => {
    const { list } = this.state;
    this.setState({ list: [...list, item] });
  }
  render() {
    const { list } = this.state;
    return (
      <section className="todoapp">
        <div className="main">
          <AddTodo 
            handleAddTodo={this.handleAddTodo}
          />
          <TodoList list={list} />
        </div>
      </section>
    )
  }
}

第三步写单元测试

mkdir tests && cd tests && touch MyEnzyme.js AddTodo.dom.test.js AddTodo.snapshot.test.js

// MyEnzyme.js 这个文件配置Enzyme 的 adapter实例
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

export default Enzyme;

//  AddTodo.dom.test.js  ->dom测试
import React from 'react'
import AddTodo from '../AddTodo';
import { shallow, mount } from 'enzyme';
import Enzyme from '../MyEnzyme';

const setup = () => {
  // 模拟 props
  const props = {
    // Jest 提供的mock 函数
    handleAddTodo: jest.fn()
  }

  // 通过 enzyme 提供的 shallow(浅渲染) 创建组件
  const wrapper = mount(<AddTodo {...props} />)
  return {
    props,
    wrapper
  }
}

describe('AddTodo', () => {
  const { wrapper, props } = setup();

  // case1
  // 通过查找存在 Input,测试组件正常渲染
  it('AddTodo Component should be render', () => {
    //.find(selector) 是 Enzyme shallow Rendering 提供的语法, 用于查找节点
    expect(wrapper.find('input').exists());
  })

  it('When the Enter key was pressed, handleAddTodo() shoule be called', () => {
    // mock input 输入和 Enter事件
    const mockEvent = {
      keyCode: 13, // enter 事件
      target: {
        value: 'Test'
      }
    }
    // 通过 Enzyme 提供的 simulate api 模拟 DOM 事件
    wrapper.find('input').simulate('keyup', mockEvent)
    // 判断 props.handleAddTodo 是否被调用
    expect(props.handleAddTodo).toBeCalled()
  })
})

//  AddTodo.snapshot.test.js ->快照测试
import React from 'react';
import renderer from 'react-test-renderer';
import AddTodo from '../AddTodo';

describe('<AddTodo />', () => {
  it('Snapshot', () => {
    const component = renderer.create(<AddTodo />);

    let snapshot = component.toJSON();
    expect(snapshot).toMatchSnapshot();
  })
});

第四步运行测试 npm test

如果我们把 AddTodo.js 中todos改为todo,再看一下运行结果