React test Study

1.simulate可以模擬點擊或者狀態改變

cashFundCard.find('.btn').simulate('click');

cashFundCard.find('input').simulate('change', {target: {value: '0'}});

2.創建實例，就可以調用組件裏面的方法

import { shallow } from 'enzyme';
import RegistryListPanel from ‘.’;

describe('<RegistryListPanel />', () => {
    const shallowCreator = (props) => {
        return shallow(
            <RegistryListPanel coupleRegistries={props} />
        );
    };
    describe('#state', () => {
        it('the state of isOpen is false by default', () => {
            const wrapper = shallowCreator();
            expect(wrapper.state('isOpen')).to.eq(false);
        });
    
        it('the state of isOpen is true when the button be clicked', ()=> {
            const wrapper = shallowCreator();
            const inst = wrapper.instance();
            inst.collapsedClick();
            expect(wrapper.state('isOpen')).to.eq(true);
        });
    });
});

3. Enzyme https://github.com/airbnb/enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your react Components' output. (爲React的設計的JavaScript測試工具)

1）shallow 函數， 它支持對DOM的進行結構和事件的響應，如果你對jQuery比較熟悉的話，那麼你對它的語法也不會陌生。比如我們測試裏用到的find方法，大家經常用它來尋找一些DOM數組。

2）mount函數， 完全DOM渲染主要用於與DOM API進行交互以及需要完整生命週期的組件測試(i.e componentDidMoun)。

3）render函數，靜態渲染，enzyme還提供了靜態渲染，將組件渲染成html，用於我們分析html的結構。render相比前兩種用法， 主要是在於更換了類庫 Cheerio ，而且作者也相信在處理解析上會更好點。

import { shallow, mount, render } from 'enzyme';
import sinon from 'sinon';
import chai from "chai";
import sinonChai from "sinon-chai";
chai.use(sinonChai);

4. Sinon.js    http://sinonjs.org/

 standalone test spies, stubs, and mocks for JavaScript. Work with any unit testing framework.

(aka, 允許你把代碼中難以被測試的部分替換爲更容易測試的內容)

Sinon將測試替身分爲3種類型：

• Spies, 可以提供函數調用的信息，但不會改變函數的行爲

• Stubs, 與spies類似，但是會完全替換目標函數。這使得一個被stubbed的函數可以做任何你想要的 —— 例如拋出一個異常，返回某個特定值等等。

• Mocks, 通過組合spies和stubs，使替換一個完整對象更容易。

1）使用spy，原始的函數依然會被調用。

2）使用stub，原始函數就不會被執行了。stub不需要模擬所有的行爲，只需要足夠你的測試項使用即可，其它細節可以忽略。

另外一些stub的常用場景是驗證一個函數是否使用特定的參數。

5.to.match(/Add a store/) 匹配文字     to.eq('add') 是否相等

6.單獨跑某個測試 使用describe.only 和 it.only 

7.Mocha 一款Javascript單元測試框架