Jsdom: エラー：実装されていません：HTMLFormElement.prototype.submit

はい、確かに、フォームの送信は実装されていません。 これは期待どおりに機能しています。

@runbbこれに対する別の解決策を見つけましたか？ 私は同じことをしようとしています。

@domenicこの機能を実現する方法について何かアイデアはありますか？ おそらく別の図書館？

@stefanbuck no :(

@domenicこれが実装されていない理由はありますか？ これを実装するためのプルリクエストを受け入れますか？

https://github.com/jsdom/jsdom#unimplemented-parts-of-the-web-platformを参照してhttps://html.spec.whatwg.org/multipage/browsing-the-web.htmlを実装する必要があることを理解して

@domenicこのエラーメッセージを無効にすると便利です。

あなたはそうすることができます。 jsdomErrorsのreadmeを参照してください。

フォームが送信されたときに入力の処理を実装することはまだ可能ですか？
event.target[name]は定義されていません。

今のところ私の回避策はform.dispatchEvent(new Event('submit'));

Jestを使用してテストを作成するときに、これに遭遇しました。
私の回避策：

window.HTMLFormElement.prototype.submit = () => {}

コンポーネントをテストケースにマウントする前に、これを追加しました。
少なくともそれは私のコンソールをきれいに保ちます。

私は次のことを行うことでエラーを沈黙させることができました。

describe('submit', () => {
  let emit;

  beforeAll(() => {
    ({ emit } = window._virtualConsole);
  });

  beforeEach(() => {
    window._virtualConsole.emit = jest.fn();
  });

  afterAll(() => {
    window._virtualConsole.emit = emit;
  });

  it('should handle submit ', () => {
    ...
  });
});

ここに素晴らしい回避策がありますhttps://kula.blog/posts/test_on_submit_in_react_testing_library/

Jestを使用してテストを作成するときに、これに遭遇しました。
私の回避策：

window.HTMLFormElement.prototype.submit = () => {}

コンポーネントをテストケースにマウントする前に、これを追加しました。
少なくともそれは私のコンソールをきれいに保ちます。

やあ！ 私はあなたの回避策が好きですが、それをどこで行うべきかわかりません、あなたは多分あなたが助けることができることですか？ 私は次のコードを持っています：（main（）の最初のステートメントとしてあなたの「修正」を追加したのを見てください）

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

JSDOM.fromFile("index.html", null).then(dom => {
    main(dom.window);
});

function main(window){

  window.HTMLFormElement.prototype.submit = () => {}

  var oldAlert = window.alert;
  window.alert = function() {
    console.log("Alert fired with arguments: " + arguments);
    oldAlert.apply(window, arguments);
  };

  window.document.getElementsByTagName("button")[0].click();

}

しかし、それでも同じError: Not implemented: HTMLFormElement.prototype.submit

考えられる解決策：

// Following code mocks window.console.error
// to ignore the "Not implemented: HTMLFormElement.prototype.submit".
//
// Problem: We use "form.onsubmit" event listener in some tests,
// but HTMLFormElement.prototype.submit is not implemented in JSDOM,
// although the tests are passing and handler fires.
//
// More:
// https://github.com/jsdom/jsdom/issues/1937
// https://github.com/facebook/jest/issues/5223#issuecomment-489422244

let origErrorConsole;

beforeEach(() => {
  origErrorConsole = window.console.error;

  window.console.error = (...args) => {
    const firstArg = args.length > 0 && args[0];

    const shouldBeIgnored =
      firstArg &&
      typeof firstArg === 'string' &&
      firstArg.includes('Not implemented: HTMLFormElement.prototype.submit');

    if (!shouldBeIgnored) {
      origErrorConsole(...args);
    }
  }
})

afterEach(() => {
  window.console.error = origErrorConsole;
})

submitを気にしない場合は、フォームの送信を無効にすることもできます。

<form onsubmit="return false;">

これ以上のエラーメッセージはありません

考えられる解決策：

// Following code mocks window.console.error
// to ignore the "Not implemented: HTMLFormElement.prototype.submit".
//
// Problem: We use "form.onsubmit" event listener in some tests,
// but HTMLFormElement.prototype.submit is not implemented in JSDOM,
// although the tests are passing and handler fires.
//
// More:
// https://github.com/jsdom/jsdom/issues/1937
// https://github.com/facebook/jest/issues/5223#issuecomment-489422244

let origErrorConsole;

beforeEach(() => {
  origErrorConsole = window.console.error;

  window.console.error = (...args) => {
    const firstArg = args.length > 0 && args[0];

    const shouldBeIgnored =
      firstArg &&
      typeof firstArg === 'string' &&
      firstArg.includes('Not implemented: HTMLFormElement.prototype.submit');

    if (!shouldBeIgnored) {
      origErrorConsole(...args);
    }
  }
})

afterEach(() => {
  window.console.error = origErrorConsole;
})

このソリューションは、実際のエラーのスタックトレースを壊し、それらを見つけるのが難しくなります。

前

後

仮想コンソールを使用して"jsdomError"をリッスンする場合は、スタックトレースを含む例外オブジェクトを取得する必要があります。

@domenic 、テストファイル自体から仮想コンソールを使用する方法を教えてください。

テストファイルが次であることを提案しましょう

import React from 'react'

import {render} from '@testing-library/react'

import ComponentWithSubmit from './ComponentWithSubmit'

test('Component with form', () => {
  const {getByText} = render(<ComponentWithSubmit />)
  expect(getByText('I am inside form')).toBeInTheDocument()
})

PS：テストランナーとしての冗談があります

申し訳ありませんが、Jestの使用方法についてはJestにサポートを依頼する必要があります。 jsdomは、jsdom自体のサポートのみを提供でき、jsdomを依存関係として使用するパッケージのサポートは提供できません。

フォームを使用しているが、フォームで送信を使用していないコンポーネントがあり、それでもこのエラーが表示されていました。 フォーム内の他のボタンにtype = "button"を追加することで解決しました。