reactjs - Fel: Ej implementerat: HTMLFormElement.prototype.submit

Så här ser mitt testfall ut:

const renderCard = ({
  onSubmit = jest.fn(),
}: RenderCardParams = {}) => {
  return render(
        <Card title={title} onSubmit={onSubmit}>
          <Button type="submit">Save</Button>
        </Card>,
  );
}; 

it("should invoke onSubmit when form is submitted", async () => {
      const onSubmit = jest.fn();
      window.HTMLFormElement.prototype.submit = () => {};
      const { getByText } = renderCard({ onSubmit });
      const button = getByText("Save").closest("button");
      if (button) {
        fireEvent.click(button);
      }
      await wait(() => expect(onSubmit).toHaveBeenCalled());
 });

Jag får "Fel: Inte implementerat: HTMLFormElement.prototype.submit". Jag försökte lösningen som nämns här https://github.com/jsdom/jsdom/issues/1937, men det fungerade inte. Jag vill inte tysta felen utan implementera testet korrekt.

Svar #1

Jag hade ett liknande problem som löstes genom att kalla på event.preventDefault()-metoden.

Jag tror att detta behöver anropas i din 'onSubmit'-funktion

const onSubmit = jest.fn(e => e.preventDefault());

redigera: oj, glömde att använda den! 😅

Svar #2

Jag var tvungen att mocka implementeringen av min onSubmit-funktion för att rensa felet och förhindra standardbeteendet vid skickning.

Ge något som detta ett försök:

const onSubmit = jest.fn();


it("should invoke onSubmit when form is submitted", async () => {
      onSubmit.mockImplementation(event => {
        event.preventDefault();
      });

      const { getByText } = renderCard({ onSubmit });
      const button = getByText("Save").closest("button");
      if (button) {
        fireEvent.click(button);
      }
      await wait(() => expect(onSubmit).toHaveBeenCalled());
 });

Du kan läsa mer om event.preventDefault i React här och här.

Något annat som fungerade för mig var att använda RTL:s fireEvent.submit, även om du behöver få ett formelement för att det ska fungera. Förutsatt att din implementation av Card renderar ett formulär på ett sätt som är igenkännbart av getByRole, kan du också prova något liknande detta:

fireEvent.submit(screen.getByRole('form'));

Det skulle vara istället för att simulera knapptryckningen, vilket kan vara acceptabelt i ditt fall eftersom du verkar testa formulärets inlämning snarare än knappens beteende.

Relaterade artiklar