React类方法返回组件的Enzyme测试方法咨询

针对你这种类方法返回React组件的场景，核心思路是先获取组件实例，调用目标方法拿到返回的JSX，再用Enzyme对这部分JSX做断言验证。下面我给你拆解成具体的测试场景和代码示例：

1. 准备测试基础依赖 #

首先确保导入所需的模块：

import React from 'react';
import { shallow } from 'enzyme';
import YourComponent from './YourComponent'; // 替换成你的组件实际路径
import ToolbarFloatingButton from './ToolbarFloatingButton'; // 导入子组件

2. 测试getToolbarContent分支逻辑 #

这个方法会根据selectedConsole的不同返回不同的Toolbar，我们需要验证每个分支的正确性：

describe('getToolbarContent', () => {
  it('当selectedConsole为"actions"时渲染Action工具栏', () => {
    // 浅渲染组件并传入指定props
    const wrapper = shallow(<YourComponent botBuilder={{ selectedConsole: 'actions' }} />);
    // 获取组件实例
    const componentInstance = wrapper.instance();
    
    // 调用目标方法拿到返回的JSX
    const toolbarContent = componentInstance.getToolbarContent();
    // 用shallow包裹返回的JSX，方便后续查找断言
    const contentWrapper = shallow(toolbarContent);
    
    // 验证容器类名正确
    expect(contentWrapper.hasClass('bot-toolbar-container')).toBe(true);
    // 验证ToolbarFloatingButton存在
    expect(contentWrapper.find(ToolbarFloatingButton).exists()).toBe(true);
  });

  it('当selectedConsole为"usecases"时渲染Usecase工具栏', () => {
    const wrapper = shallow(<YourComponent botBuilder={{ selectedConsole: 'usecases' }} />);
    const componentInstance = wrapper.instance();
    
    const toolbarContent = componentInstance.getToolbarContent();
    const contentWrapper = shallow(toolbarContent);
    
    // 替换成getUsecaseToolbar返回的容器类名或子组件
    expect(contentWrapper.hasClass('bot-usecase-toolbar-container')).toBe(true);
    // 如果getUsecaseToolbar里有特定子组件，可添加如下验证：
    // expect(contentWrapper.find(UsecaseSpecificButton).exists()).toBe(true);
  });

  it('当selectedConsole为"actions"时调用getActionToolbar', () => {
    const wrapper = shallow(<YourComponent botBuilder={{ selectedConsole: 'actions' }} />);
    const componentInstance = wrapper.instance();
    
    // 用jest mock替换原方法，验证调用情况
    componentInstance.getActionToolbar = jest.fn();
    componentInstance.getToolbarContent();
    
    expect(componentInstance.getActionToolbar).toHaveBeenCalledTimes(1);
  });
});

3. 单独测试getActionToolbar方法 #

如果需要单独验证这个方法返回的内容是否符合预期，可以直接调用实例方法并断言：

describe('getActionToolbar', () => {
  it('正确渲染ToolbarFloatingButton在容器内', () => {
    const wrapper = shallow(<YourComponent />);
    const componentInstance = wrapper.instance();
    
    const actionToolbar = componentInstance.getActionToolbar();
    const toolbarWrapper = shallow(actionToolbar);
    
    // 验证容器类名
    expect(toolbarWrapper.hasClass('bot-toolbar-container')).toBe(true);
    // 验证子组件存在且数量正确
    expect(toolbarWrapper.find(ToolbarFloatingButton).length).toBe(1);
  });
});

关键注意点 #

• 类的实例方法必须通过wrapper.instance()获取组件实例后才能调用
• 方法返回的JSX需要再用shallow或mount包裹，才能使用Enzyme的查找、断言API
• 如果只需要验证方法的调用逻辑，用jest mock替换目标方法是高效的方式

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