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最好禁用此错误消息。

你可以这样做； 请参阅有关 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"您应该会得到一个带有堆栈跟踪的异常对象。

@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" 添加到表单中的其他按钮来解决它。