如何使用React Testing Library测试mapDispatchToProps与connected组件

前置配置 #

你找到的mock方案是可行的，先完成基础配置：

1. 在项目根目录下的__mocks__文件夹（如果没有就新建）中创建react-redux.js文件，把你找到的mock代码粘贴进去。
2. 在你的测试文件顶部添加jest.mock('react-redux')，指定Jest使用你自定义的mock模块替代官方react-redux。

测试mapDispatchToProps（无需公开导出） #

你mock的react-redux中，connect函数执行后会把mapDispatchToProps和mockDispatch直接挂载到返回的connected组件对象上，所以你直接引入默认导出的connected组件就可以访问到这两个属性，不需要修改原组件代码导出内部的mapDispatchToProps函数。
测试逻辑如下：

• 构造测试用的ownProps，匹配组件接收的参数格式
• 调用connected组件暴露的mapDispatchToProps方法，拿到返回的props对象
• 执行返回的openUploadModal方法
• 验证mockDispatch被调用，且传入的action符合预期
  示例代码：

// 首先引入默认导出的connected组件和纯组件
import ConnectedAddToAlbumButton, { AddToAlbumButton } from 'components/AddToAlbumButton';
// 引入用到的action常量和action创建函数
import { open as openModal } from 'redux/actions/ModalActions';
import { MODAL_CONTENT_ADD_TO_ALBUM } from 'constants/ModalNameConstants';
import { render, fireEvent } from '@testing-library/react';

// 你的现有mock（ContentAddToAlbumModal、AddSection的mock保留）

describe('AddToAlbumButton mapDispatchToProps', () => {
  it('should return props with openUploadModal that dispatches correct action', () => {
    // 构造测试用的ownProps，匹配原组件中props.content.get('id')的调用逻辑
    const mockContentId = 'test-123';
    const mockOwnProps = {
      content: {
        get: jest.fn(key => key === 'id' ? mockContentId : null)
      }
    };

    // 从connected组件拿到暴露的mapDispatchToProps和mockDispatch
    const { mapDispatchToProps, mockDispatch } = ConnectedAddToAlbumButton;
    // 执行mapDispatchToProps拿到返回的props
    const dispatchProps = mapDispatchToProps(mockDispatch, mockOwnProps);
    
    // 调用openUploadModal
    dispatchProps.openUploadModal();

    // 验证dispatch被调用，且参数正确
    expect(mockDispatch).toHaveBeenCalledTimes(1);
    expect(mockDispatch).toHaveBeenCalledWith(openModal(MODAL_CONTENT_ADD_TO_ALBUM, mockContentId));
    // 也可验证content.get被正确调用
    expect(mockOwnProps.content.get).toHaveBeenCalledWith('id');
  });
});

测试connected组件 #

测试connected组件时，你只需要正常渲染默认导出的connected组件，传入所需的ownProps，结合React Testing Library的交互方法验证行为即可：

describe('Connected AddToAlbumButton component', () => {
  it('should inject correct props to base component and trigger dispatch on click', () => {
    const mockContentId = 'test-456';
    const mockOwnProps = {
      content: {
        get: jest.fn(() => mockContentId)
      }
    };
    // 渲染connected组件
    const { getByText } = render(<ConnectedAddToAlbumButton {...mockOwnProps} />);
    // 点击AddSection元素
    fireEvent.click(getByText('AddSection'));
    // 验证dispatch被正确调用
    expect(ConnectedAddToAlbumButton.mockDispatch).toHaveBeenCalledWith(openModal(MODAL_CONTENT_ADD_TO_ALBUM, mockContentId));
  });
});

现有测试用例的补充点 #

你现有的测试只覆盖了纯组件的快照，还需要补充以下内容：

• 纯组件的交互测试：点击AddSection时，传入的openUploadModalprops是否被触发
• mapDispatchToProps的逻辑测试：就是上文提到的dispatch参数验证部分
• connected组件的集成测试：验证redux连接逻辑正常，props可以正确注入，交互可以触发正确的dispatch行为

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