Jsdom: Ошибка: не реализовано: HTMLFormElement.prototype.submit

Да, действительно, отправка формы не реализована. Это работает, как ожидалось.

@runbb вы нашли другое решение для этого? Я пытаюсь сделать то же самое.

@domenic у вас есть идеи, как реализовать эту функцию? Может, другая библиотека?

@stefanbuck нет :(

@domenic есть ли причина, по которой это не реализовано? Будете ли вы открыты для запроса на перенос, чтобы реализовать это?

См. Https://github.com/jsdom/jsdom#unimplemented -parts-of-the-web-platform. Речь идет о навигации, а значит, об огромном предприятии. Вы можете попробовать, но, пожалуйста, поймите, что вам нужно будет реализовать практически все https://html.spec.whatwg.org/multipage/browsing-the-web.html.

@domenic было бы неплохо отключить это сообщение об ошибке.

Вы можете это сделать; см. readme на jsdomErrors.

Можно ли реализовать обработку входных данных при отправке формы?
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" s, вы должны получить объект исключения с трассировкой стека.

@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" к другим моим кнопкам в форме.