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

जेस्ट का उपयोग करके परीक्षण लिखते समय इसमें भाग लें।
मेरा उपाय:

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/

जेस्ट का उपयोग करके परीक्षण लिखते समय इसमें भाग लें।
मेरा उपाय:

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

परीक्षण मामले में अपने घटक को माउंट करने से पहले इसे जोड़ा गया।
कम से कम यह मेरे कंसोल को साफ रखता है।

नमस्ते! मुझे आपका कामकाज पसंद है लेकिन मुझे यकीन नहीं है कि यह कहां करना है, क्या आप शायद मदद कर सकते हैं? मेरे पास निम्न कोड है: (देखें मैंने आपके "फिक्स" को मुख्य () में पहले कथन के रूप में जोड़ा है)

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

पुनश्च: एक परीक्षण धावक के रूप में मज़ाक है

क्षमा करें, आपको जेस्ट का उपयोग करने के तरीके पर सहायता के लिए जेस्ट से पूछना होगा। Jsdom केवल jsdom के लिए ही समर्थन प्रदान करने में सक्षम है, किसी भी पैकेज के लिए नहीं जो jsdom को निर्भरता के रूप में उपयोग करता है।

मेरे पास एक फॉर्म का उपयोग कर एक घटक था लेकिन फॉर्म पर सबमिट का उपयोग नहीं कर रहा था और अभी भी यह त्रुटि देख रहा था। मैंने फॉर्म के भीतर अपने अन्य बटनों में टाइप = "बटन" जोड़कर इसे हल किया।