React 和 Jest，如何测试更改状态并检查另一个组件

Posted 2023-02-21

【中文标题】React 和 Jest，如何测试更改状态并检查另一个组件

【英文标题】：React & Jest, how to test changing state and checking for another component

【发布时间】：2017-11-08 00:17:11

【问题描述】：

React - Test Utilities Docs

我有一个 Login 组件，如果 this.state.error 为真，它将显示一个 Notification 组件。

我现在正在编写一个 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('<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));
    );
);

但是目前测试失败了，我不知道为什么

在我的代码的最后一部分，我也尝试过，但无济于事

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

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

我的登录组件的 render()

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>

在将 state.error 设置为 true 后，也尝试了这种方法来测试 Notification 组件

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());
);

但是那个测试也失败了。

也试过const login = mount(<Login />);

---

还有其他人在使用 Jest 和 React 测试实用程序时遇到问题吗？

【参考方案1】：

想通了！不需要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);
);

这会将 Login 组件中的错误状态设置为 true，然后检查 Login 组件是否包含 Notification 组件。

【讨论】：

你的组件使用 Redux 吗？当我调用 setState 时出现错误，我怀疑 Redux 是问题

@jcollum 在我的示例中我没有使用 Redux，但这仍然可以用于测试连接的组件。

更新一个 useState 状态怎么样？我真的需要那个。

【参考方案2】：

这可能应该重构一下。 Notification 组件可能应该始终在更全局的组件（如 Page Wrapper 或某种其他容器）中呈现，并且它可能应该呈现 null，除非全局减速器中存在错误. Login 组件可能不应该维护有关通知的职责和业务逻辑。