Question

我有一个带有如下功能的反应组件，使用axios调用api服务。我想知道如何使用酶，sinon和chai编写单元测试。

import React from 'react';
import es6BindAll from 'es6bindall';
import { browserHistory } from 'react-router';
import axios from 'axios';

export default class Header extends React.Component {
    constructor() {
        super();
        es6BindAll(this,['handleLogoutClick']);
    }
    handleLogoutClick(e) {
        e.preventDefault();
        let that = this;
            this.serverRequest = axios({
                url: 'Url_to_call',
                method: 'post'
            }).then(function (successData) {
                browserHistory.push("nextPage to navigate");                
            }.bind(that));
    }
    render(){
        return(
            <div className="columns large-12 header-container">
                <h6 className="logout" onClick={this.handleLogoutClick}>Logout</h6>
                </div>
            </div>
        )
    }
}

我已经编写了如下测试用例

import React from 'react';                
import { mount,shallow } from 'enzyme';          
import { expect } from 'chai';  
import sinon from 'sinon';
import '../testUtils';
import Header from '../../components/Common/Header'; 

describe('(Container) Header', () => {
 const wrapper = shallow(<Header />);
let sandbox;
  let server;
  beforeEach(() => {
    sandbox = sinon.sandbox.create();
    server = sandbox.useFakeServer();
  });
  afterEach(() => {
    server.restore();
    sandbox.restore();
  });

   it('Logout link to be present', () => {
    expect(wrapper.find('.logout')).to.exist;
  });
  it('simulates logout clicks', () => {         

    wrapper.find('h6').filter('.logout').simulate('click',{preventDefault() {} });
        expect(wrapper.instance().handleLogoutClick).to.have.been.called;

  });
});

并配置testUtils.js如下

var jsdom = require('jsdom').jsdom;

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});
global.window.loggedInUserData = {userName: 'TestName'};
global.navigator = {
  userAgent: 'node.js'
};

请让我知道如何测试axios和模拟browserHistory.I我没有在任何浏览器上运行测试所以请让我知道如何模拟

由于

Answer 1

您需要使用sinon存根browserHistory，如下所示

import { browserHistory } from 'react-router';
import { stub } from 'sinon';
const browserHistoryPushStub = stub(browserHistory, 'push', () => { });

对于模拟axios请求，您可以使用Moxios

摩卡+ Axios + Sinon +柴单元测试

1 个答案: