React Testing Library报错：无法读取null的disabled属性，点击按钮失败

针对你测试返回按钮时点击触发TypeError的问题，给你几个直接的排查和解决方向：

1. 先确认history对象是否被正确模拟 #

返回按钮依赖history.push完成跳转，测试环境默认没有真实的浏览器history，必须手动mock或提供路由环境：

• Mock useHistory钩子：如果组件用useHistory获取history，直接mock这个钩子：

import { useHistory } from 'react-router-dom';
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useHistory: jest.fn(),
}));

test('返回按钮点击触发跳转', async () => {
  const mockPush = jest.fn();
  useHistory.mockReturnValue({ push: mockPush });

  render(<YourComponent />);
  const backBtn = screen.getByTestId('back-button');
  
  await userEvent.click(backBtn);
  
  expect(mockPush).toHaveBeenCalledWith('/目标路径');
});

• 用MemoryRouter包裹组件：如果依赖路由上下文，确保测试时组件在路由环境内：

import { MemoryRouter } from 'react-router-dom';

render(
  <MemoryRouter initialEntries={['/当前页面路径']}>
    <YourComponent />
  </MemoryRouter>
);

2. 检查按钮点击事件的绑定逻辑 #

排查组件内按钮的onClick函数是否存在定义问题：

• 比如是否把history.push拼错，或者history对象在组件中根本没正确获取（比如没通过useHistory、props传入）；
• 测试时可以打印按钮的onClick属性，确认绑定的是有效函数：

const backBtn = screen.getByTestId('back-button');
console.log(backBtn.onClick); // 输出应为函数，而非undefined

3. 核对userEvent的版本和用法 #

不同版本的@testing-library/user-event调用方式不同：

• 如果是v14及以上版本，必须先创建user实例再调用click：

import userEvent from '@testing-library/user-event';

const user = userEvent.setup();

test('测试返回按钮', async () => {
  // ...渲染组件后
  await user.click(backBtn);
});

• 旧版本直接用userEvent.click，但必须确保用await包裹，避免异步操作未完成导致报错。

4. 排查组件内的异步逻辑 #

如果按钮点击后有异步操作（比如先调用接口再跳转），必须mock异步函数让其立即resolve：

• 比如组件内逻辑：

const handleBack = async () => {
  await saveData();
  history.push('/返回路径');
};

测试时要mocksaveData：

jest.mock('../api', () => ({ saveData: jest.fn().mockResolvedValue(true) }));

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