使用Jest与Testing Library测试Next表单时出现undefined读取错误

错误原因 #

你的StepOne组件依赖外部传入的user props，但在测试代码中调用render(<StepOne />)时没有传递任何props，导致user为undefined，组件渲染时访问user.firstName自然会触发类型错误。

解决方案 #

在测试时给组件传入必要的模拟props，确保user是一个包含firstName、lastName、age字段的对象，同时模拟setUser、step、setStep这些必填props：

修改后的测试代码如下：

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import StepOne from "../pages/register-user/step-one";
import { expect, test } from "@jest/globals";
// 导入你的DefaultUser，或者直接模拟一个用户对象
import { DefaultUser } from "../pages/register-user/user-reducer";

describe("<StepOne />", () => {
  // 定义测试用的默认props，方便复用
  const defaultProps = {
    step: 0,
    setStep: jest.fn(),
    user: DefaultUser, // 使用你的默认用户对象，或者手动模拟：{ firstName: "", lastName: "", age: "" }
    setUser: jest.fn(),
  };
 
  test("render name and text input", () => {
    render(<StepOne {...defaultProps} />);

    const nameInput = screen.getByTestId("firstName");
    expect(nameInput).toBeInTheDocument();
    expect(nameInput).toHaveAttribute("type", "text");
  });
});

额外优化：给组件添加默认props #

为了避免后续开发或测试中再次出现类似问题，建议给StepOne组件设置defaultProps，确保即使外部没有传入props，组件也能正常运行：

// 在StepOne组件的propTypes下方添加
StepOne.defaultProps = {
  step: 0,
  setStep: () => {},
  user: DefaultUser,
  setUser: () => {},
};

这样即使测试时忘记传递props，组件也会使用默认值，不会出现undefined的情况。

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