Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
11
rated 0 times [  18] [ 7]  / answers: 1 / hits: 127894  / 7 Years ago, tue, june 6, 2017, 12:00:00

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



enter



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?


More From » reactjs

 Answers
10

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.


[#57553] Friday, June 2, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;