React 测试库错误：未捕获 [TypeError：无法读取未定义的属性“map”]

Question

我正在开发一个应用程序，该应用程序使用 NextJS 和 react 测试库生成服务列表。目前，我在渲染服务列表组件时测试失败。此测试由于服务不存在而失败，即使它们被传递到组件中。

我的 services.js 有以下代码：

import {
  Header,
  Container,
  Breadcrumb,
  Row,
  Col,
} from "components-library";
import { Main } from "../src/components/main";
import { Card } from "../src/components/card";

export default function Home (props) {
  const {services} = props
  return (
    <>
      <Header>
        <Header.Container>
          <Header.Logo href="/" />
        </Header.Container>
      </Header>
      <Breadcrumb data-testid="breadcrumb">
        <Breadcrumb.Item href="/">Previous page</Breadcrumb.Item>
      </Breadcrumb>
      <Container>
        <Main>
          <Row>
            <Col width="three-quarters">
              {services.map(service => (
                  <Card
                  title={service.title}
                  description={service.description}
                  url={service.url}
                />
              ))}
            </Col>
          </Row>
        </Main>
      </Container>
    </>
  );
}

我的 services.test.js 如下：

import { render, screen } from "@testing-library/react";
import Page from "../../../pages/services";
describe("services api returns", () => {
  it("shows cards from getServices", async () => {
    render(<Page services={[
      {
        title: "Example Title",
        description: "This is an example description",
        url: "https://www.google.com",
      },
    ]} />);
    expect(screen.getByText("Example Title")).toBeInTheDocument();
  })
});

我收到错误

Error: Uncaught [TypeError: Cannot read property 'map' of undefined]