React组件测试报错：simulate方法需在1个节点运行，实际找到0个

我正在学习React开发会议活动应用（之前误标注为Angular.js），调试Event.test.js测试文件时遇到错误：Method "simulate" is meant to be run on 1 node. 0 found instead。此前已修复测试套件因无测试用例导致的运行失败问题，现求助解决该新错误。

相关代码与错误信息 #

Event.test.js #

import React from 'react';
import { shallow } from 'enzyme';
import Event from '../Event'; // <-- Update file path to Event module

describe('<Event /> component', () => {
    const event = {
        summary: 'Test event',
        start: {
            dateTime: '2023-05-08T14:30:00',
        },
        location: 'Test location',
        description: 'Test description',
        organizer: {
            email: 'test@example.com',
        },
    };

    it('should render event details when show details button is clicked', () => {
        const wrapper = shallow(<Event event={event} />);
        expect(wrapper.find('.event-details').length).toEqual(0);
        wrapper.find('.show-details-button').simulate('click');
        expect(wrapper.find('.event-details').length).toEqual(1);
        expect(wrapper.find('.event-summary').text()).toEqual(event.summary);
        expect(wrapper.find('.event-location').text()).toEqual(event.location);
        expect(wrapper.find('.event-description').text()).toEqual(event.description);
        expect(wrapper.find('.event-organizer').text()).toEqual(event.organizer.email);
    });
});

命令提示符错误信息 #

● <Event /> component › should render event details when show details button is clicked

    Method “simulate” is meant to be run on 1 node. 0 found instead.

      19 |         const wrapper = shallow(<Event event={event} />);
      20 |         expect(wrapper.find('.event-details').length).toEqual(0);
    > 21 |         wrapper.find('.show-details-button').simulate('click');
         |                                              ^
      22 |         expect(wrapper.find('.event-details').length).toEqual(1);
      23 |         expect(wrapper.find('.event-summary').text()).toEqual(event.summary);
      24 |         expect(wrapper.find('.event-location').text()).toEqual(event.location);

      at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1652:13)
      at ShallowWrapper.simulate (node_modules/enzyme/src/ShallowWrapper.js:1133:17)
      at Object.<anonymous> (src/__tests__/Event.test.js:21:46)

Event.js #

import React, { Component } from 'react';

class Event extends Component {
    render() {
        return <div></div>;
    }

    state = {
        showDetails: false,
    }

    handleShowDetails = () => {
        this.setState({ showDetails: !this.state.showDetails });
    }

    render() {
        const { event } = this.props;
        const { showDetails } = this.state;

        return (
            <div className="event">
                <div className="event-summary">
                    <h1 className="event-title">{event.summary}</h1>
                    <p className="event-location">{event.location}</p>
                    <p className="event-date">{event.start.dateTime}</p>
                </div>
                {showDetails && (
                    <div className="event-details">
                        <h2>About event:</h2>
                        <p>{event.description}</p>
                        <a href={event.htmlLink} target="_blank" rel="noreferrer">
                            See details on Google Calendar
                        </a>
                    </div>
                )}
                <button className="details-btn" onClick={this.handleShowDetails}>
                    {showDetails ? 'Hide details' : 'Show details'}
                </button>
            </div>
        );
    }
}

export default Event;

解决方案 #

核心问题 #

测试代码中查找按钮使用的选择器.show-details-button，与Event组件中实际按钮的classNamedetails-btn不匹配，导致Enzyme找不到节点，触发simulate方法的错误。

具体修复步骤 #

1. 修正按钮选择器：
   将测试中的wrapper.find('.show-details-button').simulate('click');修改为：

   wrapper.find('.details-btn').simulate('click');
   

2. 修正其他不匹配的断言：

   • 组件中没有.event-description类名，描述文本直接放在.event-details内的p标签中，将对应断言改为：

     expect(wrapper.find('.event-details p').at(0).text()).toEqual(event.description);
     

   • 组件中不存在.event-organizer元素，删除测试中对应的断言行：

     // expect(wrapper.find('.event-organizer').text()).toEqual(event.organizer.email);
     

3. 清理组件冗余代码：
   Event组件中有两个render方法，删除第一个空的render方法，避免组件逻辑冲突：

   // 删除这部分冗余代码
   render() {
       return <div></div>;
   }
   

内容的提问来源于stack exchange，提问作者Harmonjt