Comment tester correctement les méthodes appelées componentDidMount dans un composant React?

Question

J'écris des tests unitaires pour un scénario où le composant récupère toutes les commandes de l'utilisateur dans componentDidMount. Avant cela, je vérifie si la session a expiré ou si l'utilisateur s'est connecté et, dans le cas contraire, redirige-le vers la page de connexion. Pour une raison quelconque, mes tests semblent échouer. Comment puis-je affirmer ce scénario? Mon code ci-dessous:

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

Voici mes cas d'essai:

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

})

Mon dernier bloc, il échoue avec AssertionError: expected false to be true. Cependant, le bloc componentDidMount was called passe. Comment résoudre ça?

Answer 1

Vous devez attendre que votre composant soit monté.

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