如何正确测试antd组件库中message.success提示的展示效果？

核心原因 #

• antd 的 Message 全局提示默认挂载在document.body节点下，不属于你通过测试工具render方法渲染的组件DOM范围，你之前用render返回的findByText只会在内部查找，自然找不到body下的提示文本。
• Apollo MockedProvider的模拟响应默认需要等待一个异步微任务执行才会返回，同时antd Message的入场动画也会带来少量渲染延迟。
• 若点击按钮提交的mutation请求参数和你mock配置的参数不完全匹配，MockedProvider不会返回预设结果，onCompleted回调不会触发，自然不会弹出成功提示。

修正后的测试用例 #

优先使用@testing-library/react提供的screen对象做全局查询，同时等待异步操作执行完成：

import { MockedProvider } from "@apollo/client/testing";
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it("点击提交按钮后展示成功提示", async () => {
  // userEvent v14+ 推荐先初始化实例
  const user = userEvent.setup();
  const query = gql`
    mutation sendMessage($name: String!, $email: String!, $message: String!) {
      sendMessage(name: $name, email: $email, message: $message)
    }
  `;
  const mocks = [{
    request: {
      query: query,
      variables: { name: "Alex", email: "alex@gmail.com", message: "i need help" }
    },
    result: { data: { sendMessage: "success" } },
  }];

  render(
    <MockedProvider mocks={mocks}>
      <HelpContainer />
    </MockedProvider>
  );

  // 等待点击操作执行完成
  await user.click(screen.getByRole("button"));

  // 全局查找提示文本，可自定义超时时间适配动画延迟
  expect(await screen.findByText("success", {}, { timeout: 2000 })).toBeInTheDocument();
});

可选排查方案 #

如果修改后仍测试失败，可按以下步骤排查：

1. 确认表单实际提交的mutation参数和mock配置的参数完全一致，没有字段缺失、值不匹配的问题
2. 如果需要兼容更低版本的userEvent，可以把await user.click替换为userEvent.click，同时用waitFor包裹断言：

userEvent.click(screen.getByRole("button"));
await waitFor(() => {
  expect(screen.getByText("success")).toBeInTheDocument();
}, { timeout: 2000 });

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