javascript - 測試在點擊刪除後模態框是否消失

React 測試初學者，

我正在使用 jest 和 react testing library，這裡我有一個元件 'A'，它是一個模態框，我正在嘗試為它實作測試，當使用者點擊按鈕 'Delete Link' 時，這個模態框應該會消失（函式 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);

答案＃1

在測試中，你將一個模擬函數傳遞給表單的 onDelete 屬性，但這在 AFormProps 中並未定義，也沒有在組件中使用 onDelete 屬性。onDelete 函數是在組件範圍內創建的，並設置為按鈕的 onClick。在這種情況下，模擬函數將永遠不會被使用。