Mocha + Axios + Sinon + chai 단위 테스트

Question

axios를 사용하여 API 서비스를 호출하는 다음과 같은 함수가있는 반응 구성 요소가 있습니다. 저는 효소, sinon 및 chai를 사용하여 단위 테스트를 작성하는 방법을 알고 싶습니다.

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; 

    }); 
}); 

아래로

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> 
     ) 
    } 
} 

내가 작성한 테스트 케이스 및 구성 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

당신은

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

조롱 Axios의 요청을 들어 Moxios