我如何从库 "antd" 中测试 "message.success" 的外观？

Question

我正在尝试测试提交警报的外观。请求向服务器发送消息并处理响应：

import { message } from "antd";
import { gql, useMutation } from "@apollo/client";
let [sendMessage, { loading }] = useMutation(
    gql`
      mutation sendMessage($name: String!, $email: String!, $message: String!) {
        sendMessage(name: $name, email: $email, message: $message)
      }
    `,
    {
      onCompleted: () => {
        message.success("success");
      },
      onError: (error) => {
        message.warn(
          error.message === "data"
            ? "bad data"
            : "something wrong"
        );
      },
    }
  );

下面是我为此代码编写的测试。但是测试失败，因为没有“成功”文本。但是创建了一个带有 class“ant-message”的 div。

import { MockedProvider } from "@apollo/client/testing";
it("click on butt", async () => {
    let query = gql`
      mutation sendMessage($name: String!, $email: String!, $message: String!) {
        sendMessage(name: $name, email: $email, message: $message)
      }
    `;
    let mocks = [{
        request: {
          query: query,
            variables:{name:"Alex",email:"alex@gmail.com",message:"i need help"}
        },
        result: { data: { sendMessage:"success" } },
      },
    ];
    let { getByRole,findByText } = render(
      <MockedProvider mocks={mocks}>
        <HelpContainer />
      </MockedProvider>
    );
    userEvent.click(getByRole("button"));
    expect(await findByText("success")).toBeInTheDocument();
  });

如何正确测试？

Answer 1

需要更新“react-testing-library”版本

我如何从库 "antd" 中测试 "message.success" 的外观？

How can i test the appearance of "message.success" from the library "antd"?

reactjs

jestjs

antd

apollo-client

react-testing-library