Jsdom: Kesalahan: Tidak diterapkan: HTMLFormElement.prototype.submit

Ya memang penyerahan formulir tidak dilaksanakan. Ini bekerja seperti yang diharapkan.

@runbb apakah Anda menemukan solusi lain untuk ini? Saya mencoba melakukan hal yang sama.

@domenic apakah Anda punya ide tentang cara mencapai fungsi ini? Mungkin perpustakaan lain?

@stefanbuck tidak :(

@domenic apakah ada alasan mengapa ini tidak diterapkan? Apakah Anda terbuka untuk permintaan tarik untuk mengimplementasikan ini?

Lihat https://github.com/jsdom/jsdom#unimplemented -parts-of-the-web-platform. Ini tentang navigasi, dan dengan demikian merupakan usaha besar. Anda boleh mencoba, tetapi harap dipahami bahwa pada dasarnya Anda harus menerapkan semua https://html.spec.whatwg.org/multipage/browsing-the-web.html.

@domenic akan lebih baik untuk menonaktifkan pesan kesalahan ini.

Anda dapat melakukannya; lihat readme di jsdomErrors.

Apakah masih mungkin untuk menerapkan penanganan input saat formulir dikirimkan?
event.target[name] tidak ditentukan.

Solusi saya untuk saat ini adalah form.dispatchEvent(new Event('submit'));

Mengalami ini saat menulis tes menggunakan Jest.
Solusi saya:

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

Menambahkan ini sebelum saya memasang komponen saya di test case.
Setidaknya itu membuat konsol saya tetap bersih.

Saya berhasil membungkam kesalahan dengan melakukan:

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

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

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

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

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

Ada solusi yang bagus di sini https://kula.blog/posts/test_on_submit_in_react_testing_library/

Mengalami ini saat menulis tes menggunakan Jest.
Solusi saya:

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

Menambahkan ini sebelum saya memasang komponen saya di test case.
Setidaknya itu membuat konsol saya tetap bersih.

Hai! Saya suka solusi Anda, tetapi saya tidak yakin harus melakukannya di mana, mungkin Anda bisa membantu? Saya memiliki kode berikut: (lihat saya menambahkan "perbaikan" Anda sebagai pernyataan pertama di 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();

}

tetapi masih menaikkan Error: Not implemented: HTMLFormElement.prototype.submit

Solusi yang mungkin:

// 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;
})

Jika Anda tidak peduli dengan submit Anda juga dapat menonaktifkan pengiriman formulir dengan

<form onsubmit="return false;">

Tidak ada lagi pesan kesalahan

Solusi yang mungkin:

// 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;
})

Solusi ini memecahkan stacktrace dari kesalahan nyata dan akan lebih sulit untuk menemukannya.

Sebelum

Setelah

Jika Anda menggunakan konsol virtual dan mendengarkan "jsdomError" s Anda harus mendapatkan objek pengecualian dengan jejak tumpukan.

@domenic , dapatkah Anda menunjukkan kepada kami cara menggunakan konsol virtual dari file pengujian itu sendiri?

Mari kita sarankan file tes berikutnya

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: ada candaan sebagai test runner

Maaf, Anda perlu meminta dukungan Jest tentang cara menggunakan Jest. jsdom hanya dapat memberikan dukungan untuk jsdom itu sendiri, bukan untuk paket apa pun yang menggunakan jsdom sebagai dependensi.

Saya memiliki komponen yang menggunakan formulir tetapi tidak menggunakan kirim pada formulir dan masih melihat kesalahan ini. Saya menyelesaikannya dengan menambahkan type="button" ke tombol saya yang lain di dalam formulir.