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

추신: 테스트 러너로서 농담이 있습니다.

죄송합니다. Jest 사용 방법에 대한 지원을 Jest에 요청해야 합니다. jsdom은 jsdom을 종속성으로 사용하는 패키지가 아닌 jsdom 자체에 대한 지원만 제공할 수 있습니다.

양식을 사용하는 구성 요소가 있지만 양식에서 제출을 사용하지 않는데 여전히 이 오류가 표시됩니다. 양식 내의 다른 버튼에 type="button"을 추가하여 문제를 해결했습니다.