如何正確測試React組件中的componentDidMount中調用的方法？

我正在爲組件測試獲取componentDidMount中所有用戶的訂單。在此之前，我檢查會話是否超時或者用戶是否登錄，如果不是，請將其重定向到登錄頁面。出於某種原因，我的測試似乎失敗了。我如何斷言這種情況？我下面的代碼：如何正確測試React組件中的componentDidMount中調用的方法？

componentDidMount() { 
    this.checkCustomerCombinationState(); 
    this.props.actions.getMyOrders(); 
} 

checkCustomerCombinationState =() => { 
    if (TokenProvider.get('DP_USER_STATE') === '1' && 
     (cookie.load('DP_USER_STATE') === '0')) { 
     TokenProvider.logout(); 

     window.location.assign(constants.navigateToSessionTimeout.mobile); 
    } 
}

下面是我的測試情況：

describe('Test Cases for the Orders component',() => { 
let wrapper; 
let cdmStub; 
let TokenProviderGetStub; 
let TokenProviderLogoutStub; 
let CookieLoadStub; 

// let pushStub = sinon.stub(browserHistory, 'push'); 

beforeEach(() => { 
    cdmStub = sinon.stub(Orders.prototype, 'componentDidMount'); 
    TokenProviderGetStub = sinon.stub(TokenProvider, 'get'); 
    TokenProviderLogoutStub = sinon.stub(TokenProvider, 'logout'); 
    CookieLoadStub = sinon.stub(Cookie, 'load'); 

}); 

afterEach(() => { 
    TokenProviderGetStub.restore(); 
    TokenProviderLogoutStub.restore(); 
    CookieLoadStub.restore(); 
    cdmStub.restore(); 

    wrapper.unmount(); 
}); 

it('Initial State is set properly',() => { 

    wrapper = shallow(
     <Orders {...props} /> 
    ); 
    expect(wrapper.state().ordersStartNumber).to.equal(0); 
    expect(wrapper.state().ordersEndNumber).to.equal(0); 
}); 

it('MyOrders to be rendered',() => { 
    wrapper = shallow(
     <Orders {...props} /> 
    ); 
    expect(wrapper.find('MyOrders').length).to.equal(1); 
}); 

it('Correct props are passed to MyOrders',() => { 
    wrapper = shallow(
     <Orders {...props} /> 
    ); 
    expect(wrapper.find('MyOrders').props().myOrders).to.deep.equal(ordersHistory.myOrders); 
    expect(wrapper.find('MyOrders').props().actions).to.deep.equal(actions); 
}); 

describe('componentDidMount was called with session timedout',() => { 

    it('componentDidMount was called',() => { 
     wrapper = mount(
      <Orders {...props} /> 
     ); 
     expect(cdmStub.calledOnce).to.be.true; 
    }); 

    it('User is logged out if the session has ended',() => { 
     TokenProviderGetStub.withArgs('DP_USER_STATE').returns(1); 
     CookieLoadStub.withArgs('DP_USER_STATE').returns(0); 

     wrapper = mount(<Orders {...props} />) 

     expect(TokenProviderGetStub.called).to.be.true; 
     expect(CookieLoadStub.called).to.be.true; 
     expect(TokenProviderLogoutStub.called).to.be.true; 
    }) 
})

}）

我最後它塊與AssertionError: expected false to be true失敗。然而，它阻止componentDidMount was called正在通過。我該如何解決這個問題？

來源

2017-08-30 Aditya P S

您需要等待您的組件安裝。

it('User is logged out if the session has ended', async function(){ 
     TokenProviderGetStub.withArgs('DP_USER_STATE').returns(1); 
     CookieLoadStub.withArgs('DP_USER_STATE').returns(0); 

     const mounted = await mount(<Orders {...props} />); 

     expect(TokenProviderGetStub.called).to.be.true; 
     expect(CookieLoadStub.called).to.be.true; 
     expect(TokenProviderLogoutStub.called).to.be.true; 
    })

來源

2017-08-30 07:11:28

如何正確測試React組件中的componentDidMount中調用的方法？

回答

相關問題