react單測樣例

// 採用了facebook的jest+enzyme

// 1. 展示型組件測試，意思就是要確保每一次的修改都是符合預期的

  describe('XJLayerCard', () => {
    it('renders correctly', () => {
      const wrapper = Enzyme.render(<XJLayerCard {...mockData}/>);
      expect(toJson(wrapper)).toMatchSnapshot();
    });
  });

// 2.功能性組件測試，就是要覆蓋到一個組件的基礎功能，能夠確保每一個修改之後，跑完單元測試，能夠確定之前的功能正常
import React from 'react';
import Enzyme from 'enzyme';
import AppInput from '../AppInput';
import toJson from 'enzyme-to-json'
import initialStore from '@/../__mocks__/store.js';
import appInfoData from '@/../__mocks__/appInfo.js'
import { Provider } from 'react-redux';
import configureStore from '@/entries/maker/redux/store';
import { updateAppInfo } from '@/entries/maker/redux/action';
import moxios from 'moxios';
import instance from '@/api/instance'
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

let store;
let wrapper;
beforeEach(() => {
    moxios.install(instance);
    store = configureStore(initialStore);
    wrapper = Enzyme.mount(
        <Provider store={store}>
            <AppInput onChange={(obj) => {
                store.dispatch(updateAppInfo(obj))
            }}/>
        </Provider>
    );
});
afterEach(function () {
    moxios.uninstall(instance);
});
describe('demo', () => {

    it('renders correctly', () => {
        expect(toJson(wrapper)).toMatchSnapshot();
    });

    it('click div, select show', () => {
        // 渲染選項框正常
        expect(wrapper.find('.xj-appinput-item').length).toEqual(2);
        // 一開始沒有輸入框
        expect(wrapper.find('input').length).toEqual(0);
        wrapper.find('.xj-appinput-value-wrapper').at(0).simulate('click');
        expect(wrapper.find('input').length).toEqual(1);
    });

    it('updateAppInfo action', (done) => {
        // 攔截請求
        moxios.stubRequest('/app/get', {
            status: 200,
            responseText: 'success'
        });
        // 點擊下拉框中的第一個,會觸發action
        wrapper.find('.xj-appinput-item').at(0).simulate('click');
        moxios.wait(() => {
            // mock數據
            let request = moxios.requests.mostRecent();
            request.respondWith({
                status: 200,
                response: appInfoData
            }).then((res) => {
                // input輸入框消失
                expect(wrapper.find('input').length).toEqual(0);
                // 選中的app展示出來
                expect(wrapper.find('.xj-appinput-wrapper').length).toEqual(1);
                expect(toJson(wrapper)).toMatchSnapshot();
                done();
            }).catch(err => {
                console.log(err);
            });
        });
    });
});

https://github.com/axios/moxios