React + Jest, how to check a state change in a component and check another component

Question

Documents for removing test utilities

I have an Input component that will display the Notification component if this.state.error is true.

Now I am writing a Jest test to test this.

 import React from 'react' import ReactTestUtils from 'react-dom/test-utils'; import { shallow } from 'enzyme' import toJson from 'enzyme-to-json' import Login from './Login' import Notification from '../common/Notification' describe('<Login /> component', () => { it('should render', () => { const loginComponent = shallow(<Login />); const tree = toJson(loginComponent); expect(tree).toMatchSnapshot(); }); it('should contains the words "Forgot Password"', () => { const loginComponent = shallow(<Login />); expect(loginComponent.contains('Forgot Password')).toBe(true); }); // This test fails it('should render the Notification component if state.error is true', () => { const loginComponent = ReactTestUtils.renderIntoDocument( <Login /> ); const notificationComponent = ReactTestUtils.renderIntoDocument( <Notification /> ); loginComponent.setState({ error: true }, expect(ReactTestUtils.isDOMComponent(notificationComponent)).toBe(true)); }); }); 

However, the test is currently not working, and I'm not sure why

In the last part of my code, I also tried this to no avail

 loginComponent.setState({ error: true }, expect(ReactTestUtils. isElement(notificationComponent)).toBe(true)); 

https://facebook.imtqy.com/react/docs/test-utils.html

The render () element of my login component

 render() { const usernameError = this.state.username.error; const error = this.state.error; const errorMsg = this.state.errorMsg; return ( <div className="app-bg"> { error && <Notification message={ errorMsg } closeMsg={ this.closeMessage }/> } <section id="auth-section"> <header> <img src="static/imgs/logo.png"/> <h1>tagline</h1> </header> 

Also tried this method to test the Notification component after setting state.error to true

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

But this test also failed

Also tried const login = mount(<Login />);

---

Does anyone else encounter a problem using Jest and React testing utilities?

Answer 1

I thought! No 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 error state to true in the Login component, and then check if the Login component contains the Notification component.