React & Jest, how to test changing state and checking for another component

Question

React - Test Utilities Docs

I have a Login component which will display a Notification component if this.state.error i

Answer 1

Figured it out! Did not need React Test Utilities

it('should render the Notification component if state.error is true', () => {
    const loginComponent = shallow(<Login />);
    loginComponent.setState({ error: true });
    expect(loginComponent.find(Notification).length).toBe(1);
});

This will set the state of error to true in the Login component, then check if the Login component contains the Notification component.

Answer 2

This should probably be refactored a bit. The Notification component should probably be always rendered in a more global component (like a Page Wrapper or some sort of other container), and it should probably render null unless there's errors within a global reducer. A Login component probably shouldn't maintain the responsibility and business logic regarding notifications.