反应 - 测试实用程序文档

我有一个Login组件,如果为true ,将显示Notification组件this.state.error.

我现在正在写一个Jest测试来测试它.

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(' component', () => {
    it('should render', () => {
        const loginCompOnent= shallow();
        const tree = toJson(loginComponent);
        expect(tree).toMatchSnapshot();
    });

    it('should contains the words "Forgot Password"', () => {
        const loginCompOnent= shallow();
        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(
            
        );

        const notificatiOnComponent= ReactTestUtils.renderIntoDocument(
            
        );

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

然而目前测试失败了,我不知道为什么

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

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

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

我的Login组件的render()

render() {
    const usernameError = this.state.username.error;
    const error = this.state.error;
    const errorMsg = this.state.errorMsg;

    return (
        

            { error &&
                
            }
            

                
                    
                    
tagline
                

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

it('should render the Notification component if state.error is true', () => {
    const loginCompOnent= ReactTestUtils.renderIntoDocument(
        
    );

    const notificatiOnComponent= ReactTestUtils.renderIntoDocument(
        
    );

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

    const checkForNotification = () => {
        const login = shallow();
        expect(login.find(Notification).length).toBe(1);
    };

    loginComponent.setState({
        error: true
    }, checkForNotification());
});

但那次测试也失败了.

也试过了 const login = mount();

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

弄清楚了!不需要React Test Utilities

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

这将在Login组件中将error的状态设置为true ,然后检查Login组件是否包含Notification组件.