enzyme簡介——Airbnb的React測試框架

簡介

Enzyme是一個React的JavaScript測試工具，使React組件的輸出更加容易extrapolate 。
Enzyme的API和jQuery操做DOM同樣靈活易用。（由於其使用的是cheerio庫來解析虛擬DOM，而cheerio的目標則是作服務器端的jQuery）
Enzyme兼容大多數斷言庫和測試框架，如chai、mocha、jasmine等。

安裝

npm i --save-dev enzyme

若是使用的是React 0.14或React 15.x，請確保如下模塊已經安裝

npm i --save-dev react-addons-test-utils
npm i --save-dev react-dom

基本用法

#### Shallow渲染

import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.length(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow(
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    );
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(
      <Foo onButtonClick={onButtonClick} />
    );
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

#### 完整的DOM渲染

import React from 'react';
import sinon from 'sinon';
import { mount } from 'enzyme';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<Foo />', () => {
  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal('baz');
    wrapper.setProps({ bar: 'foo' });
    expect(wrapper.props().bar).to.equal('foo');
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount(
      <Foo onButtonClick={onButtonClick} />
    );
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });

  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
    Foo.prototype.componentDidMount.restore();
  });
});

#### 靜態渲染

import React from 'react';
import { render } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  it('renders three `.foo-bar`s', () => {
    const wrapper = render(<Foo />);
    expect(wrapper.find('.foo-bar').length).to.equal(3);
  });

  it('renders the title', () => {
    const wrapper = render(<Foo title="unique" />);
    expect(wrapper.text()).to.contain('unique');
  });
});

將來

完善CSS選擇器

如今還不支持分層（hierarchical）選擇器

完善事件模擬和對傳播的支持

對於 shallow rendering，事件模擬有限制，事件傳播也不支持，必須給出一個事件對象。

完善鼠標和鍵盤的模擬

不少react控件涉及表單輸入框和複雜的鼠標交互，使用Enzyme提供的事件API來模擬顯得笨重且不切實際。