Mocha + Axios + Sinon + chai單元測試

我有一個反應組件，其功能如下，使用axios調用api服務。我想知道如何使用酶，sinon和chai編寫單元測試。Mocha + Axios + 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' 
};

請讓我知道如何測試愛可信和模擬browserHistory.I我不是在任何瀏覽器上運行測試，請讓我知道如何模擬

謝謝

來源

2016-09-29 Sweety

請再具體些。你是否搜索並嘗試了一些解決方案？你遇到了什麼問題？ – shaochuancs

你需要使用如下興農存根browserHistory，

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

對於嘲諷愛可信請求，您可以使用Moxios

來源

2016-10-05 06:26:10 anoop

Mocha + Axios + Sinon + chai單元測試

回答

相關問題