测试单击删除后模态是否消失

Question

反应测试的初学者，

我正在使用 jest 和 react 测试库，这里我有一个组件“A”，它是一个模态，我正在尝试对其进行测试，当用户单击一个按钮“删除链接”时，这个模态应该消失（函数onDelete ）。 如您所见，我正在使用 FireEvent.click() 单击按钮，因此在将toHaveBeenCalledTimes(0)从 0 更改为 1 之后，我收到了Expected number of calls: 1 Received number of calls: 0 ，不应该预期和收到都是1？

单击删除链接后，最终组件（模态）对用户不可见。

有人可以启发我吗？ 任何建议/帮助表示赞赏。

英语不是我的母语，所以可能会有错误。

我的代码：

 import React from "react"; import { render, screen, cleanup, fireEvent } from "@testing- library/react"; import { LinkForm } from "../forms/LinkForm"; import { Provider } from "react-redux"; import { store } from "../../redux/store"; import "@testing-library/jest-dom/extend-expect"; describe("Testing component", () => { const onClickCallback = jest.fn(); test("Testing if link is deleted when button 'Delete Link' is clicked", () => { const mockDelete = jest.fn(); const props = { onDelete: mockDelete, }; render( <Provider store={store}> <LinkForm classes={{ button_basic: "", formControl: "" }} key={""} onSubmit={onClickCallback} onCancel={onClickCallback} // onClick={onClickCallback()} {...props} /> </Provider> ); const component = screen.getByTestId("LinkForm"); const deleteLinkButton = screen.getByRole("button", { name: /Delete Link/i, }); expect(deleteLinkButton).toBeVisible(); fireEvent.click(deleteLinkButton); expect(mockDelete).toHaveBeenCalledTimes(0); expect(component).toBeVisible(); }); });

 import React, { useEffect, useState } from "react"; import { connect, RootStateOrAny, useDispatch, useSelector } from "react-redux"; import { Trans } from "react-i18next"; import { editLink, changeLink, removeLink } from "../../redux/actions"; import {Button} from "@material-ui/core/"; import { Done, Delete } from "@material-ui/icons"; interface AFormProps { key: string; onSubmit: () => void; onCancel: () => void; onClick?: () => void; classes: { button_basic: string; formControl: string; }; } const A: React.FC<AFormProps> = (props) => { const dispatch = useDispatch(); const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); dispatch(editLink(linkSettings)); externalOnSubmit(); }; const onDelete = () => { // Delete selected link from graph dispatch(removeLink(currentLink.id)); dispatch(changeLink("")); }; const disabled = currentLink? false: true; return ( <form onSubmit={handleSubmit} data-testid="LinkForm"> <Button id="delete" type="button" onClick={onDelete} disabled={disabled} variant="outlined" color="secondary" className={classes.button_basic} startIcon={<Delete />} > <Trans i18nKey="form.linkForm.delete">Delete Link</Trans> </Button> </form> ); }; export const LinkForm = connect(null, null)(A);

Answer 1

在测试中，您将模拟 function 传递给表单的onDelete道具，但这不是在AFormProps中定义的，组件中也没有使用onDelete道具。 onDelete function 在组件 scope 中创建，并设置为按钮的onClick 。 在这种情况下永远不会使用模拟 function。