反应& Jest，如何测试更改状态和检查另一个组件 [英] React & Jest, how to test changing state and checking for another component

问题描述

在我的代码的最后一部分我也试过这个无济于事

  loginComponent.setState（{
 error：true 
}，expect（ReactTestUtils.alElement（notificationComponent）） ）。是真实的））; 
  

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

渲染我的登录组件的（）

  render（）{
 const usernameError = this.state.username.error; 
 const error = this.state.error; 
 const errorMsg = this.state.errorMsg; 
 
返回（
< div className =app-bg> 
 {错误&& 
<通知消息= {errorMsg} closeMsg = {this.closeMessage} /> 
} 
< section id =auth-section> 
< header> 
< img src =static / imgs /logo.png\"/> 
< h1>标语< / h1> 
< / header> 
  

在将state.error设置为true后，尝试使用此方法测试Notification组件

 它（'如果state.error为真，则应呈现通知组件'，（）=> {
 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（））; 
}）; 
  

但该测试也失败了。

还试过 const login = mount（< Login />）;

---

使用Jest和React Test Utilities遇到问题的其他人？

解决方案

想出来！不需要 React Test Utilities

  it（'如果state.error为真，则应呈现通知组件'，（）=> {
 const loginComponent = shallow（<登录/>）; 
 loginComponent.setState（{error：true}）; 
 expect（loginComponent.find（Notification）.length）.toBe（1）; 
}）; 
  

这会在登录组件中将错误状态设置为true，然后检查登录组件是否包含通知组件。

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?

解决方案

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.

这篇关于反应& Jest，如何测试更改状态和检查另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！