Jsdom: Erreur : Non implémenté : HTMLFormElement.prototype.submit

Oui, en effet, la soumission de formulaire n'est pas implémentée. Cela fonctionne comme prévu.

@runbb avez-vous trouvé une autre solution pour cela? J'essaie de faire la même chose.

@domenic avez-vous des idées sur la façon d'accomplir cette fonctionnalité ? Peut-être une autre bibliothèque ?

@stefanbuck non :(

@domenic y a-t-il une raison pour laquelle cela n'est pas mis en œuvre ? Seriez-vous ouvert à une pull request pour implémenter cela ?

Voir https://github.com/jsdom/jsdom#unimplemented -parts-of-the-web-platform. Il s'agit de navigation, et donc d'une énorme entreprise. Vous pouvez essayer, mais comprenez que vous devez implémenter pratiquement tout https://html.spec.whatwg.org/multipage/browsing-the-web.html.

@domenic ce serait bien de désactiver ce message d'erreur.

Vous pouvez le faire ; voir le readme sur jsdomErrors.

Est-il encore possible de mettre en œuvre la gestion des saisies lors de la soumission du formulaire ?
event.target[name] ne sont pas définis.

Ma solution de contournement pour le moment est form.dispatchEvent(new Event('submit'));

J'ai rencontré cela lors de l'écriture de tests à l'aide de Jest.
Ma solution de contournement :

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

J'ai ajouté ceci avant de monter mon composant dans le cas de test.
Au moins, ça garde ma console propre.

J'ai réussi à faire taire les erreurs en faisant :

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

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

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

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

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

Il existe une solution de contournement intéressante ici https://kula.blog/posts/test_on_submit_in_react_testing_library/

J'ai rencontré cela lors de l'écriture de tests à l'aide de Jest.
Ma solution de contournement :

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

J'ai ajouté ceci avant de monter mon composant dans le cas de test.
Au moins, ça garde ma console propre.

Salut! J'aime votre solution de contournement mais je ne sais pas où faire cela, pensez-vous que vous pourriez peut-être aider? J'ai le code suivant : (voir J'ai ajouté votre "correctif" comme première instruction dans 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();

}

mais il récolte toujours le même Error: Not implemented: HTMLFormElement.prototype.submit

Solution possible:

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

Si vous ne vous souciez pas du submit vous pouvez également désactiver l'envoi du formulaire avec

<form onsubmit="return false;">

Plus de message d'erreur

Solution possible:

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

Cette solution brise la trace des erreurs réelles et il sera plus difficile de les trouver.

Avant

Après

Si vous utilisez une console virtuelle et écoutez "jsdomError" s, vous devriez obtenir un objet exception avec une trace de pile.

@domenic , pourriez-vous nous montrer comment utiliser une console virtuelle à partir du fichier de test lui-même ?

Supposons que le fichier de test soit le suivant

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 : il y a de la plaisanterie en tant que testeur

Désolé, vous devrez demander de l'aide à Jest pour savoir comment utiliser Jest. Le jsdom est uniquement capable de prendre en charge jsdom lui-même, pas pour tout package qui utilise jsdom comme dépendance.

J'avais un composant utilisant un formulaire mais n'utilisant pas l'envoi sur le formulaire et je voyais toujours cette erreur. Je l'ai résolu en ajoutant type="button" à mes autres boutons dans le formulaire.