reactjs - 如何从“antd”库中测试“message.success”的外观?
问题描述
我正在尝试测试提交警报的外观。请求向服务器发送消息并处理响应:
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"
);
},
}
);
下面是我为此代码编写的测试。但测试失败,因为没有“成功”文本。但是创建了一个具有“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();
});
如何正确测试?
解决方案
需要更新“react-testing-library”的版本
推荐阅读
- arrays - 创建具有多个元素的 Bash 数组
- mobile - 允许在框架中上下触摸控制
- linux - Linux + Wordpress:如何从 Linux Cron 作业中触发函数?
- c++ - 基于管道(非 FIFO)文件权限检查器 C++ 的服务器/客户端
- r - R - 如何创建任意列表列表
- javascript - 页面刷新时受控输入不清晰(Microsoft Edge)
- javascript - 如何对字典数组中的内容进行分组?
- python - 显示单个 QStandardItem
- sql - sqlite查询截止日期
- angular - 由于解析为 JSON,从 API 加载文件导致错误