React组件测试导入Mock数据时报错：Cannot read properties of undefined

我编写了一个接收links props的React组件Newbar，用于渲染导航链接。当在测试文件内直接定义模拟数据时，测试可正常通过；但从外部../../mocks/mockdata文件导入signinlink和aboutlink模拟数据传入组件后，测试抛出错误：TypeError: Cannot read properties of undefined (reading 'id')。相关代码如下：

组件代码 #

import { Link } from "react-router-dom";
const Newbar = (props) => {
  const listitems = props.links.map((link) => {
    return (
      <li key={link.id}>
        <Link to={link.id}>{link.name}</Link>
      </li>
    );
  });
  return (
    <nav>
      <ul>{listitems}</ul>
    </nav>
  );
};

export default Newbar;

可通过的测试代码 #

import { render, screen } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import Newbar from "./Newbar";
const signinlink = { id: "/", name: "Sign in" };
const aboutlink = { id: "about", name: "About" };
const links = [signinlink, aboutlink];
test("shows initial tabs", async () => {
  render(
    <BrowserRouter>
      <Newbar links={links}></Newbar>
    </BrowserRouter>
  );
  const signinlink = screen.getByText("Sign in");
  const aboutlink = screen.getByText("About");
  expect(signinlink).toBeVisible();
  expect(aboutlink).toBeVisible();
});

导入Mock数据后失败的测试代码 #

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

import { signinlink, aboutlink } from "../../mocks/mockdata";

const links = [signinlink, aboutlink];
test("shows initial tabs", async () => {
  render(
    <BrowserRouter>
      <Newbar links={links}></Newbar>
    </BrowserRouter>
  );
  const signinlink = screen.getByText("Sign in");
  const aboutlink = screen.getByText("About");
  expect(signinlink).toBeVisible();
  expect(aboutlink).toBeVisible();
});

问题原因与解决办法 #

报错核心是props.links数组中存在undefined元素，说明从外部导入的signinlink或aboutlink没有正确加载。

1. 检查Mock文件的导出方式

确保mockdata.js使用命名导出：

// ../../mocks/mockdata.js
export const signinlink = { id: "/", name: "Sign in" };
export const aboutlink = { id: "about", name: "About" };

如果Mock文件用的是默认导出，需修改导入方式：

// 测试文件中
import mockData from "../../mocks/mockdata";
const { signinlink, aboutlink } = mockData;

2. 验证文件路径正确性

确认mockdata.js的路径拼写无误，目录结构与导入路径匹配（注意大小写、目录名是否正确）。

3. 给组件添加容错处理（推荐）

为避免后续类似报错，组件中可先判断props.links是否存在，并过滤无效元素：

import { Link } from "react-router-dom";
const Newbar = (props) => {
  const listitems = (props.links || []).filter(Boolean).map((link) => {
    return (
      <li key={link.id}>
        <Link to={link.id}>{link.name}</Link>
      </li>
    );
  });
  return (
    <nav>
      <ul>{listitems}</ul>
    </nav>
  );
};

export default Newbar;

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