ReactコンポーネントのcomponentDidMountで呼び出されたメソッドを正しくテストするにはどうすればいいですか？

Question

私は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が通過しています。これをどうやって解決するのですか？

Answer 1

コンポーネントをマウントするのを待つ必要があります。

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