Mocha+Axios+Sinon+chai unit testing - unit-testing

Question

i have a react component with function as below that calls api service using axios.I would want to know how to write unit test using enzyme,sinon and 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>
)
}
}
I have written test case as below
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;
});
});
And configured testUtils.js as below
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'
};
Please let me know how to test axios and mock browserHistory.I am not running on any browser to test so please let me know how to mock
Thanks

Answer 1

You need to stub browserHistory using sinon as below,
import { browserHistory } from 'react-router';
import { stub } from 'sinon';
const browserHistoryPushStub = stub(browserHistory, 'push', () => { });
For mocking axios requests, you can use Moxios