React Testing Library测试报错：无法解构undefined的data属性

核心问题原因 #

你遇到的TypeError本质是Axios的Mock没有正确生效，导致组件调用了真实的Axios请求，而测试环境中真实请求返回undefined，解构data时触发错误。具体问题出在两个地方：

1. jest.mock调用位置错误：jest.mock会被Jest自动提升到模块作用域最顶部，放在beforeEach中无法提前拦截组件对Axios的导入，组件实际使用的是真实Axios而非Mock版本。
2. jest.mock参数错误：你传入的是__mocks__/axios的路径，但Jest的Mock规则是自动查找同级__mocks__目录下的对应文件，只需传入axios即可。

修复步骤 #

1. 修改测试文件（FollowerList.test.js） #

将jest.mock移到文件顶部，并修正参数，同时添加Mock重置逻辑避免测试间污染：

import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import FollowersList from "../FollowersList";
import axios from 'axios';

// 关键：将jest.mock移到顶部，参数改为'axios'
jest.mock('axios');

const MockFollowersList = () => {
    return (
        <BrowserRouter>
            <FollowersList />
        </BrowserRouter>
    )
}

describe("FollowersList", () => {
    // 重置Mock，确保每个测试用例的Mock状态独立
    beforeEach(() => {
        axios.get.mockClear();
    })

    it('should fetch and render follower items', async () => {
        render(<MockFollowersList />);
        const followerDivElement = await screen.findByTestId(`follower-item-0`);
        expect(followerDivElement).toBeInTheDocument();
        // 额外验证Mock是否被调用
        expect(axios.get).toHaveBeenCalledTimes(1);
    });
    
    it('should fetch and render follower items in second test', async () => {
        render(<MockFollowersList />);
        const followerDivElement = await screen.findByTestId(`follower-item-0`);
        expect(followerDivElement).toBeInTheDocument();
        expect(axios.get).toHaveBeenCalledTimes(1);
    });
})

2. 确认Mock文件结构 #

确保你的项目结构符合Jest的Mock规则：

你的项目目录
├── __mocks__
│   └── axios.js  # 你的Mock文件，无需修改
└── src
    └── components
        ├── FollowersList.js
        └── FollowersList.test.js

3. 验证组件中的Axios调用 #

确保组件内的Axios调用是标准写法，比如：

// FollowersList.js中的fetchFollowers方法示例
async function fetchFollowers() {
  try {
    const { data } = await axios.get('/api/followers');
    // 处理返回的data.results
  } catch (err) {
    // 错误处理
  }
}

额外说明 #

• 代理环境不会影响Mock逻辑，因为Mock直接拦截了Axios的方法调用，不会发起真实网络请求。
• 若仍有问题，可以在测试用例中手动指定Mock返回值，进一步排查：

  it('should handle mock response correctly', async () => {
    axios.get.mockResolvedValue({
      data: { results: [/* 自定义测试数据 */] }
    });
    render(<MockFollowersList />);
    // 后续断言
  });
  

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