Jest

一般使用 Enzyme 中的 mounJt 或 shallow 方法，將目標組件轉(zhuǎn)化為一個 ReactWrapper對象，并在測試中調(diào)用其各種方法：

import Enzyme,{ mount } from 'enzyme';

describe('test ...', function() {

    it('should ...', function() {
        wrapper = mount(
            <MyComp isDisabled={true} />
        );
        expect( wrapper.find('input').exists() ).toBeTruthy();
    });
});

global api

官方文檔中有詳細介紹，并且有中文版

Enzyme

是官方測試工具庫的封裝，它模擬了jQuery的API

三種測試方法

• shallow
• render
• mount

shallow

方法就是官方的shallow rendering的封裝。

• 測試App的標題。

import {shallow} from 'enzyme';

describe('Enzyme Shallow', function () {
  it('the title should be Todos', function () {
    const app = shallow(<App/>);
    expect(app.find('h1').text()).toEqual('Todos');
  });
};
         
// 上面代碼中，`shallow`方法返回`App`的淺渲染，然后`app.find`方法找出`h1`元素，`text`方法取出該元素的文本。

• 關(guān)于find方法，有一個注意點，就是它只支持簡單選擇器，稍微復雜的一點的CSS選擇器都不支持。

component.find('.my-class'); // by class name
component.find('#my-id'); // by id
component.find('td'); // by tag
component.find('div.custom-class'); // by compound selector
component.find(TableRow); // by constructor
component.find('TableRow'); // by display name

render

render方法將React組件渲染成靜態(tài)的HTML字符串，然后分析這段HTML代碼的結(jié)構(gòu)，返回一個對象。它跟shallow方法非常像，主要的不同是采用了第三方HTML解析庫Cheerio，它返回的是一個Cheerio實例對象。

• 測試所有Todo項的初始狀態(tài)。

import {render} from 'enzyme';

describe('Enzyme Render', function () {
  it('Todo item should not have todo-done class', function () {
    const app = render(<App/>);
    expect(app.find('.todo-done').length).to.equal(0);
  });
});

// 在上面代碼中，你可以看到，`render`方法與`shallow`方法的API基本是一致的。 Enzyme的設(shè)計就是，讓不同的底層處理引擎，都具有同樣的API（比如`find`方法）

mount

mount方法用于將React組件加載為真實DOM節(jié)點。

注意：與淺層或靜態(tài)渲染不同，完全渲染實際上將組件安裝在DOM中，這意味著如果測試全部使用相同的DOM，則測試可以相互影響。在編寫測試時請記住這一點，并在必要時使用.unmount()或類似清理。

• 測試刪除按鈕。

import {mount} from 'enzyme';

describe('Enzyme Mount', function () {
  it('Delete Todo', function () {
    const app = mount(<App/>);
    const todoLength = app.find('li').length;
    app.find('button.delete').at(0).simulate('click');
    expect(app.find('li').length).to.equal(todoLength - 1);
  });
});

//上面代碼中，`find`方法返回一個對象，包含了所有符合條件的子組件。在它的基礎(chǔ)上，`at`方法返回指定位置的子組件，`simulate`方法就在這個組件上觸發(fā)某種行為。

• 測試Todo項的點擊行為。

import {mount} from 'enzyme';

describe('Enzyme Mount', function () {
  it('Turning a Todo item into Done', function () {
    const app = mount(<App/>);
    const todoItem = app.find('.todo-text').at(0);
    todoItem.simulate('click');
    expect(todoItem.hasClass('todo-done')).to.equal(true);
  });
});

• 測試添加新的Todo項。

import {mount} from 'enzyme';

describe('Enzyme Mount', function () {
  it('Add a new Todo', function () {
    const app = mount(<App/>);
    const todoLength = app.find('li').length;
    const addInput = app.find('input').get(0);
    addInput.value = 'Todo Four';
    app.find('.add-button').simulate('click');
    expect(app.find('li').length).to.equal(todoLength + 1);
  });
});

Enzyme部分API

api基本與jquery相同，可在官網(wǎng)查看api，以下是常用的幾個api

.get(index)：返回指定位置的子組件的DOM節(jié)點
.at(index)：返回指定位置的子組件
.first()：返回第一個子組件
.last()：返回最后一個子組件
.type()：返回當前組件的類型
.text()：返回當前組件的文本內(nèi)容
.html()：返回當前組件的HTML代碼形式
.props()：返回根組件的所有屬性
.prop(key)：返回根組件的指定屬性
.state([key])：返回根組件的狀態(tài)
.setState(nextState)：設(shè)置根組件的狀態(tài)
.setProps(nextProps)：設(shè)置根組件的屬性