React-Redux嵌套组件测试问题：Tile组件未渲染及测试方案咨询

1. 为什么className为body的div子元素为空？ #

核心原因是测试环境下Redux store里的modules数据为空：

• 你的LandingPage组件是通过modules.map()来渲染Tile的，而modules来自Redux store的state.data.modules；
• 在测试时，如果没有提前给测试用的store初始化数据，或者displayModules这个action是异步的（比如从接口拉取数据），测试代码没有等待action执行完成，组件挂载后modules还是空数组，自然不会渲染任何Tile组件，body div就没有子元素了。

简单说：测试时组件拿不到要渲染的模块数据，所以没生成Tile。

2. 如何测试这些嵌套的Redux组件？ #

下面给你两种实用的测试方案，结合React Testing Library（目前官方推荐）来实现：

方案一：初始化测试用Redux Store，模拟数据 #

首先确保你安装了必要的测试依赖：

npm install --save-dev @testing-library/react @testing-library/jest-dom redux-mock-store

步骤1：创建带初始数据的测试Store

先写一个工具函数，生成带有模拟数据的Redux store，这样组件能直接拿到渲染需要的modules：

import { configureStore } from '@reduxjs/toolkit'; // 如果你用的是传统Redux，就用createStore
import rootReducer from '../path/to/your/rootReducer'; // 导入你的根reducer

// 生成测试用Store，支持传入初始状态
const createTestStore = (initialState) => {
  return configureStore({
    reducer: rootReducer,
    preloadedState: initialState,
  });
};

// 模拟测试用的模块数据
const mockModules = [
  {
    id: 1,
    name: "汽车保险",
    icon: "car",
    risk: 10,
    coverageMin: 5000,
    coverageMax: 20000,
  },
];

步骤2：用Provider包裹组件测试LandingPage

测试时用Redux的Provider组件把测试Store传给LandingPage，这样组件就能拿到模拟的modules数据并渲染Tile：

import { render, screen, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import LandingPage from './LandingPage';

test('当modules加载完成后，正确渲染Tile组件', () => {
  const testStore = createTestStore({
    data: {
      modules: mockModules,
      cart: [],
    },
  });

  render(
    <Provider store={testStore}>
      <LandingPage />
    </Provider>
  );

  // 验证模块名称是否渲染
  expect(screen.getByText("汽车保险")).toBeInTheDocument();
  // 验证body div有子元素（Tile）
  const bodyDiv = screen.getByClassName('body');
  expect(bodyDiv.children.length).toBeGreaterThan(0);
});

步骤3：单独测试Tile组件（无需Redux）

Tile本身是纯UI组件，依赖的是传入的props，所以可以直接传模拟的props来测试，不用依赖Redux：

import { render, screen, fireEvent } from '@testing-library/react';
import Tile from './Tile';

test('点击"Add module to cart"按钮时，正确调用addToCart方法', () => {
  // 模拟addToCart回调
  const mockAddToCart = jest.fn();
  const mockModule = {
    id: 1,
    name: "汽车保险",
    icon: "car",
    risk: 10,
    coverageMin: 5000,
    coverageMax: 20000,
  };

  render(<Tile module={mockModule} addToCart={mockAddToCart} />);

  // 点击添加按钮
  fireEvent.click(screen.getByText('Add module to cart'));

  // 验证回调是否被调用，且参数符合预期
  expect(mockAddToCart).toHaveBeenCalledWith(expect.objectContaining({
    id: 1,
    name: "汽车保险",
  }));
});

方案二：处理异步Action的场景 #

如果displayModules是异步的（比如从后端接口获取数据），测试时需要等待异步操作完成：

import { render, screen, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import { displayModules } from '../actions';
import LandingPage from './LandingPage';

// 模拟异步action
jest.spyOn('../actions', 'displayModules').mockImplementation(() => async (dispatch) => {
  // 模拟接口返回数据后的action触发
  dispatch({ type: 'DISPLAY_MODULES_SUCCESS', payload: mockModules });
});

test('异步加载modules后，正确渲染Tile', async () => {
  const testStore = createTestStore({
    data: { modules: [], cart: [] },
  });

  render(
    <Provider store={testStore}>
      <LandingPage />
    </Provider>
  );

  // 等待异步action完成，Tile渲染出来
  await waitFor(() => {
    expect(screen.getByText("汽车保险")).toBeInTheDocument();
  });
});

小提示 #

• 尽量避免依赖className查询DOM，优先用语义化的查询方式（比如getByText、getByRole），这样测试更健壮；
• 对于嵌套组件，分层测试：父组件（LandingPage）测试数据渲染逻辑，子组件（Tile）单独测试交互和UI逻辑；
• 如果用Enzyme，思路类似：用mount结合Provider提供测试Store，或者shallow测试组件内部逻辑。

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