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

Question

I am trying to test the appearance of a submit alert. Request to send a message to the server and process the response:

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"
        );
      },
    }
  );

Below is the test I wrote for this code. But the test fails because there is no "success" text. But a div with the class "ant-message" is created.

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:"[email protected]",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();
  });

how to test it correctly?

Answer 1

needed to update version of "react-testing-library"