reactjs - 錯誤：未實作：HTMLFormElement.prototype.submit

這就是我的測試案例的樣子：

const renderCard = ({
  onSubmit = jest.fn(),
}: RenderCardParams = {}) => {
  return render(
        <Card title={title} onSubmit={onSubmit}>
          <Button type="submit">Save</Button>
        </Card>,
  );
}; 

it("should invoke onSubmit when form is submitted", async () => {
      const onSubmit = jest.fn();
      window.HTMLFormElement.prototype.submit = () => {};
      const { getByText } = renderCard({ onSubmit });
      const button = getByText("Save").closest("button");
      if (button) {
        fireEvent.click(button);
      }
      await wait(() => expect(onSubmit).toHaveBeenCalled());
 });

我收到了「錯誤：未實現：HTMLFormElement.prototype.submit」。我嘗試了這裡提到的解決方案 https://github.com/jsdom/jsdom/issues/1937，但它不起作用。我不想忽略這些錯誤，而是想正確地實現測試。

答案＃1

我遇到過類似的問題，是透過呼叫 event.preventDefault() 方法解決的。

我覺得這需要在你的 'onSubmit' 函數中被調用

const onSubmit = jest.fn(e => e.preventDefault());

編輯：哎呀，忘了呼叫它了！😅

答案＃2

我必須模擬我的 onSubmit 函數的實作來清除錯誤，從而防止預設的提交行為。

試試這樣的東西：

const onSubmit = jest.fn();


it("should invoke onSubmit when form is submitted", async () => {
      onSubmit.mockImplementation(event => {
        event.preventDefault();
      });

      const { getByText } = renderCard({ onSubmit });
      const button = getByText("Save").closest("button");
      if (button) {
        fireEvent.click(button);
      }
      await wait(() => expect(onSubmit).toHaveBeenCalled());
 });

你可以在這裡和這裡閱讀更多有關 React 中 event.preventDefault 的內容。

對我有用的另一個方法是使用 RTL 的 fireEvent.submit，不過你需要取得一個表單元素才能使用它。假設你的 Card 實作以一種 getByRole 可以辨識的方式呈現表單，你也可以嘗試像這樣的做法：

fireEvent.submit(screen.getByRole('form'));

這將取代模擬按鈕點擊，在你的情況下可能是可以接受的，因為你似乎是在測試表單提交而不是按鈕的行為。