React TS使用Jest+Testing Library测试报setUserName不存在问题求助

你遇到的Property 'setUserName' does not exist报错，是因为@testing-library/react提供的render方法返回值仅包含查询函数、DOM容器等测试工具属性，不会暴露组件内部定义的方法，因此你无法直接从render的返回值中解构出setUserName。

1. 需要测试的内容 #

测试只需要覆盖外部可感知的行为，不需要关注组件内部实现细节，核心测试点包括：

• 页面UI渲染结果是否符合预期：例如你提到的标题是否包含对应用户名、列表内容是否正常展示、加载/错误状态是否正确出现
• 交互逻辑是否符合预期：例如按钮点击后是否触发对应操作、输入内容是否正确同步
• 外部依赖调用是否符合预期：例如API是否被正常调用、调用参数是否正确

2. API Mock完成后设置对应值的方法 #

你可以通过Jest的Mock能力灵活设置API的返回值：

• 首先在测试文件顶部添加jest.mock('../src/API')，将真实API模块替换为__mocks__目录下的Mock实现
• 如果需要修改默认Mock返回值，可以直接给Mock函数赋值异步返回内容：(apiForUserName as jest.Mock).mockResolvedValue(你的自定义返回值)
• 不同测试用例需要不同返回值时，在每个用例开头重新设置即可，避免用例之间的Mock值互相污染

3. 测试mock值是否真实存在的方法 #

不需要断言内部方法的调用情况，通过以下两种方式即可验证Mock值生效：

• 断言Mock函数的调用状态：expect(apiForUserName).toHaveBeenCalledTimes(1)，确认API确实被组件触发调用
• 断言UI渲染结果：直接查询页面上是否出现了Mock值对应的内容，例如你原来写的判断标题包含Prakash，就是最符合测试最佳实践的验证方式

修复后的测试代码 #

import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import App from "./App";

// 替换真实API为Mock实现
jest.mock("../src/API");
import apiForUserName from "../src/API";

describe("get username using promise", () => {
  test("should load the users and display correct username", async () => {
    // 手动设置本次用例的API返回值
    (apiForUserName as jest.Mock).mockResolvedValue({
      value: {
        users: [
          { username: "TestUser" },
          { username: "Prakash" }
        ]
      }
    });

    render(<App />);

    // 验证API被正常调用
    await waitFor(() => {
      expect(apiForUserName).toHaveBeenCalledTimes(1);
    });

    // 验证Mock返回的用户名已渲染到页面
    const titleElement = await screen.findByTitle(/Prakash/i);
    expect(titleElement).toBeInTheDocument();
  });
});

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