使用Enzyme测试Redux关联映射组件的问题排查

这是测试Redux连接组件时非常常见的问题——你的BoardCompletedItem被Redux的connect高阶组件包裹后，实际渲染的并不是原始的BoardCompletedItem组件，而是名为Connect(BoardCompletedItem)的包装组件，所以直接按组件名称查找自然会失败。下面给你几个针对性的解决方案和排查步骤：

方案1：测试时使用未连接的原始组件 #

在BoardCompletedItem组件文件里，同时导出未被connect处理的原始组件和连接后的默认组件：

// BoardCompletedItem.js
import React from 'react';
import { connect } from 'react-redux';

// 导出未连接的原始组件，供测试使用
export const BoardCompletedItem = (props) => {
  // 你的组件逻辑
  return <div>{props.item.name}</div>;
};

// 导出连接后的组件，供业务代码使用
const mapStateToProps = (state) => ({
  // 你的映射逻辑
});

const mapDispatchToProps = {
  // 你的dispatch方法
};

export default connect(mapStateToProps, mapDispatchToProps)(BoardCompletedItem);

然后在父组件的测试中，你可以直接导入这个未连接的原始组件，或者在测试中mock掉默认导出的连接组件，这样就能直接按组件名称查找，或者通过props验证渲染逻辑。

方案2：用Mock替换Redux的Connect包装 #

如果不想修改子组件的导出，可以用Jest来mock整个BoardCompletedItem组件，让它返回一个带有测试标识的简单组件：

// BoardCompleted.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import BoardCompleted from './BoardCompleted';

// Mock子组件，替换成带testid的简单组件
jest.mock('./BoardCompletedItem', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="completed-item" {...props}>{props.item.title}</div>
  )
}));

test('renders correct number of BoardCompletedItem', () => {
  const mockItems = [{ id: 1, title: 'Test 1' }, { id: 2, title: 'Test 2' }];
  render(<BoardCompleted items={mockItems} />);
  
  // 通过testid查找所有子组件
  const items = screen.getAllByTestId('completed-item');
  expect(items).toHaveLength(2);
});

方案3：通过内容/测试标识查找，而非组件名称 #

不管子组件是否被Redux包裹，都可以给它添加data-testid属性，然后用React Testing Library的查询方法查找：

// BoardCompletedItem.js
const BoardCompletedItem = (props) => {
  return (
    <div data-testid="board-completed-item">
      <h3>{props.item.name}</h3>
      {/* 其他内容 */}
    </div>
  );
};

在父组件测试中，直接通过testid查询：

test('renders all completed items', () => {
  const mockItems = [...]; // 你的测试数据
  render(
    // 如果一定要用连接后的组件，记得包裹Provider
    <Provider store={mockStore}>
      <BoardCompleted items={mockItems} />
    </Provider>
  );
  
  const items = screen.getAllByTestId('board-completed-item');
  expect(items.length).toBe(mockItems.length);
});

排查步骤小技巧 #

• 用screen.debug()打印渲染后的DOM结构，看看子组件实际被渲染成了什么——你会看到它是一个Connect(BoardCompletedItem)的组件，而非原始组件。
• 确认父组件的props.items确实有数据，没有传空数组导致子组件没渲染。
• 如果测试连接后的组件，确保已经用Redux Provider包裹了测试组件，并且传入了正确的mock store。

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