如何在Jest中测试React-Redux组件的SVG元素渲染

你需要让Redux store中state.user.isLoading的值为true，再渲染组件验证SVG元素即可，以下是两种常用实现方案：

方案1：Mock useSelector 钩子（轻量快速） #

直接Mock Redux的useSelector钩子返回指定状态，不需要依赖项目真实的store逻辑：

// User.spec.js 补充内容
import { useSelector } from "react-redux";
import { selectUsername, selectAuthState } from "./userSlice";

// mock react-redux模块，保留其他真实逻辑，只覆写useSelector
jest.mock("react-redux", () => ({
  ...jest.requireActual("react-redux"),
  useSelector: jest.fn(),
}));

test("renders spinner SVG when isLoading is true", () => {
  // 按组件内useSelector的调用顺序返回对应值
  useSelector.mockImplementation((selector) => {
    if (selector === selectUsername) return null;
    if (selector === selectAuthState) return false;
    // 第三个调用是取state.user，返回isLoading为true的状态
    return { isLoading: true };
  });

  // 不需要包裹Provider，因为useSelector已经被mock
  const { container } = render(<User />);
  const spinner = container.querySelector("svg.spinner");
  expect(spinner).toBeInTheDocument();
});

方案2：使用预设状态的测试Store（更贴近真实场景） #

创建带指定初始状态的临时store，模拟真实运行时的Redux状态：

// User.spec.js 补充内容
import { configureStore } from "@reduxjs/toolkit";

test("renders spinner SVG when isLoading is true with test store", () => {
  // 初始化测试用store，覆盖user模块的isLoading状态
  const testStore = configureStore({
    reducer: store.reducer, // 复用项目原有根reducer
    preloadedState: {
      user: {
        isLoading: true,
        // 其他user模块的初始字段按你项目的实际默认值补充即可
        username: null,
        authState: false
      }
    }
  });

  const { container } = render(
    <Provider store={testStore}>
      <User />
    </Provider>
  );
  const spinner = container.querySelector("svg.spinner");
  expect(spinner).toBeInTheDocument();
});

优化提示 #

如果不想依赖class名查找元素，可在原组件的SVG标签上添加data-testid="loading-spinner"属性，测试时用getByTestId('loading-spinner')查找元素，稳定性更高，不会因为后续修改class名导致测试失效。

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