使用Jest测试React Redux组件时出现Cannot read property of undefined报错

核心错误原因梳理 #

• 你在测试用例中直接使用了screen对象，但没有从@testing-library/react中导入该对象，这是最直接触发undefined错误的原因
• 需要确认测试配置的Redux状态挂载路径和Login组件取值路径是否匹配：你当前把authReducer挂载到了user字段下，如果Login组件内用useSelector取值时写的是state.auth.xxx，会找不到对应状态触发报错
• 如果Login组件用到了useNavigate等React Router相关API，测试环境没有包裹路由组件也会触发undefined错误

修复后完整测试代码 #

import React from 'react'
// 补充导入screen对象
import { render as rtlRender, screen } from '@testing-library/react'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
// 如果组件用到了React Router相关能力，导入MemoryRouter提供路由上下文
import { MemoryRouter } from 'react-router-dom'
import authReducer from '../../../reducers/auth';
import Login from '../Login';

function MyRender(
  ui,
  {
    preloadedState,
    // 这里的reducer键名要和组件内useSelector取值的根字段保持一致，比如组件取state.auth就写auth
    store = configureStore({ reducer: { auth: authReducer }, preloadedState }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return (
      <Provider store={store}>
        {/* 不需要路由能力可以去掉MemoryRouter包裹 */}
        <MemoryRouter>
          {children}
        </MemoryRouter>
      </Provider>
    );
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
}


test('fetches & receives a user after clicking the fetch user button', async () => {
  MyRender(<Login />);

  // should show no user initially, and not be fetching a user
  expect(screen.getByText(/Login/i)).toBeInTheDocument();
});

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