使用Jest与React Testing Library测试时getState为undefined问题

问题场景 #

我使用React Testing Library和Jest进行组件测试，应用用Redux-Toolkit管理状态。运行首个测试时触发如下错误：

FAIL  src/components/user/Contact.test.js (15.178 s)
  Contact
    × renders correctly (815 ms)

  ● Contact › renders correctly

    TypeError: Cannot read property 'getState' of undefined

       6 | describe("Contact", () => {
       7 |   test("renders correctly", () => {
    >  8 |     render(<Provider store={store}><Contact /></Provider>); 
         |           ^
       9 |     const inputElem = screen.getByLabelText(/Name/)
      10 |     expect(inputElem).toBeInTheDocument();
      11 |   });

测试代码（Contact.test.js） #

import { render, screen } from "@testing-library/react";
import { Provider } from "react-redux";
import Contact from "./Contact";
import store from "../../app/store";

describe("Contact", () => {
  test("renders correctly", () => {
    render(
      <Provider store={store}>
        <Contact />
      </Provider>
    );
    const inputElem = screen.getByLabelText(/Name/);
    expect(inputElem).toBeInTheDocument();
  });
});

应用Store代码（store.js） #

import { configureStore } from "@reduxjs/toolkit";
import authReducer from "../features/auth/authSlice";
import adminReducer from "../features/admin/adminSlice";
import userReducer from "../features/user/userSlice";
export const store = configureStore({
  reducer: {
    auth: authReducer,
    admin: adminReducer,
    user: userReducer,
  },
});

解决方案 #

1. 修正Store的导入方式（最可能的原因） #

你的store.js使用命名导出（export const store），但测试文件里用的是默认导入（import store from "../../app/store"），这会导致导入的store是undefined，Redux的Provider拿到undefined就会抛出getState未定义的错误。

两种修复方式二选一：

• 方式一：把Store改成默认导出
  修改store.js：

  import { configureStore } from "@reduxjs/toolkit";
  import authReducer from "../features/auth/authSlice";
  import adminReducer from "../features/admin/adminSlice";
  import userReducer from "../features/user/userSlice";
  
  // 默认导出store
  export default configureStore({
    reducer: {
      auth: authReducer,
      admin: adminReducer,
      user: userReducer,
    },
  });
  

• 方式二：测试文件使用命名导入
  修改Contact.test.js的导入语句：

  // 命名导入store
  import { store } from "../../app/store";
  

2. 检查导入路径是否正确 #

确认../../app/store的路径是否对应实际的store.js文件位置，如果路径错误，也会导致导入的store为undefined。

3. 测试专用Store（可选优化） #

为了避免测试依赖全局Store的状态，推荐为测试创建独立的Store，只加载当前组件需要的Reducer：

import { render, screen } from "@testing-library/react";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import Contact from "./Contact";
// 只导入当前组件依赖的Reducer
import userReducer from "../../features/user/userSlice";

// 创建测试专用Store
const testStore = configureStore({
  reducer: {
    user: userReducer,
  },
});

describe("Contact", () => {
  test("renders correctly", () => {
    render(
      <Provider store={testStore}>
        <Contact />
      </Provider>
    );
    const inputElem = screen.getByLabelText(/Name/);
    expect(inputElem).toBeInTheDocument();
  });
});

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