Jsdom: Fehler: Nicht implementiert: HTMLFormElement.prototype.submit

Ja, die Formularübermittlung ist tatsächlich nicht implementiert. Dies funktioniert wie erwartet.

@runbb hast du dafür eine andere lösung gefunden? Ich versuche das gleiche zu tun.

@domenic hast du irgendwelche ideen, wie man diese funktionalität erreichen kann? Vielleicht eine andere Bibliothek?

@stefanbuck nein :(

@domenic gibt es einen Grund, warum dies nicht implementiert ist? Wären Sie offen für einen Pull-Request, um dies zu implementieren?

Siehe https://github.com/jsdom/jsdom#unimplemented -parts-of-the-web-platform. Hier geht es um Navigation und damit ein riesiges Unterfangen. Sie können es gerne versuchen, aber bitte haben Sie Verständnis dafür, dass Sie im Wesentlichen alle https://html.spec.whatwg.org/multipage/browsing-the-web.html implementieren müssen

@domenic es wäre schön, diese Fehlermeldung zu deaktivieren.

Sie können dies tun; Lesen Sie die Readme-Datei zu jsdomErrors.

Ist die Behandlung der Eingaben beim Absenden des Formulars noch realisierbar?
event.target[name] sind nicht definiert.

Meine Problemumgehung ist derzeit form.dispatchEvent(new Event('submit'));

Beim Schreiben von Tests mit Jest darauf gestoßen.
Mein Workaround:

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

Hinzugefügt, bevor ich meine Komponente im Testfall mounte.
Zumindest hält es meine Konsole sauber.

Ich habe es geschafft, die Fehler zum Schweigen zu bringen, indem ich Folgendes getan habe:

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

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

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

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

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

Hier gibt es einen netten Workaround https://kula.blog/posts/test_on_submit_in_react_testing_library/

Beim Schreiben von Tests mit Jest darauf gestoßen.
Mein Workaround:

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

Hinzugefügt, bevor ich meine Komponente im Testfall mounte.
Zumindest hält es meine Konsole sauber.

Hi! Ich mag deinen Workaround, aber ich bin mir nicht sicher, wo ich das machen soll, könntest du vielleicht helfen? Ich habe den folgenden Code: (siehe Ich habe Ihr "fix" als erste Anweisung in main() hinzugefügt)

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();

}

aber es erhöht immer noch die gleichen Error: Not implemented: HTMLFormElement.prototype.submit

Mögliche Lösung:

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

Wenn Sie sich nicht für submit interessieren, können Sie das Senden des Formulars auch mit deaktivieren

<form onsubmit="return false;">

Keine Fehlermeldung mehr

Mögliche Lösung:

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

Diese Lösung unterbricht den Stacktrace von echten Fehlern und es wird schwieriger, sie zu finden.

Vor

Nach

Wenn Sie eine virtuelle Konsole verwenden und auf "jsdomError" s warten, sollten Sie ein Ausnahmeobjekt mit einem Stack-Trace erhalten.

@domenic , könnten Sie uns bitte zeigen, wie man eine virtuelle Konsole aus der Testdatei selbst verwendet?

Lassen Sie uns vorschlagen, dass die Testdatei als nächstes kommt

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: es gibt scherz als Testläufer

Entschuldigung, Sie müssen Jest um Unterstützung bei der Verwendung von Jest bitten. Das jsdom kann nur jsdom selbst unterstützen, nicht jedes Paket, das jsdom als Abhängigkeit verwendet.

Ich hatte eine Komponente, die ein Formular verwendet, aber das Senden im Formular nicht verwendet, und dieser Fehler wurde immer noch angezeigt. Ich habe es gelöst, indem ich type="button" zu meinen anderen Schaltflächen im Formular hinzugefügt habe.