Jsdom: خطأ: لم يتم التنفيذ: HTMLFormElement.prototype.submit

نعم ، في الواقع ، تقديم الاستمارة لم يتم تنفيذه. هذا يعمل كما هو متوقع.

runbb هل وجدت حلاً آخر لهذا؟ أحاول أن تفعل الشيء نفسه.

domenic هل لديك أي أفكار حول كيفية إنجاز هذه الوظيفة؟ ربما مكتبة أخرى؟

تضمين التغريدة

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

تمت إضافة هذا قبل أن أقوم بتركيب المكون الخاص بي في حالة الاختبار.
على الأقل يحافظ على وحدة التحكم الخاصة بي نظيفة.

أهلا! يعجبني الحل الذي تقدمه ولكني لست متأكدًا من مكان القيام بذلك ، هل يمكنك المساعدة ربما؟ لدي الكود التالي: (انظر لقد أضفت "fix" كأول جملة في 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()
})

ملاحظة: هناك مزحة كعداء اختبار

عذرًا ، ستحتاج إلى طلب دعم Jest حول كيفية استخدام Jest. يمكن لـ jsdom فقط توفير الدعم لـ jsdom نفسه ، وليس لأي حزمة تستخدم jsdom كعنصر تابع.

كان لدي مكون يستخدم نموذجًا ولكن لا أستخدم الإرسال في النموذج وما زلت أرى هذا الخطأ. لقد قمت بحلها عن طريق إضافة type = "button" إلى الأزرار الأخرى الخاصة بي داخل النموذج.