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 is true.

I'm now 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 currently the test is failing, and I'm not sure why

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

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

https://facebook.github.io/react/docs/test-utils.html

The render() 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 for testing for 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 that test also failed.

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

---

Anyone else running into a problem using Jest and the React Test Utilities?

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.