Testen von window.open() in JavaScript mit Jest

Ich musste kürzlich einen Test für eine React-Komponente schreiben, der ein neues Browserfenster öffnete. Um das neue Fenster zu öffnen, habe ich window.open() in meinem Code verwendet. Dadurch war die Komponente einfach zu schreiben, aber ich musste etwas anders darüber nachdenken, wie ich den Test dafür schreiben sollte.

Weitere Informationen zur Methode window.open() finden Sie in den MDN-Webdokumenten.

Um etwas oder einen Hintergrund festzulegen, hatte ich eine React-Komponente, die ein einfaches Formular mit ein paar Eingaben hatte. Als der Benutzer die Eingaben vervollständigte und das Formular absendete, öffnete sich ein neues Fenster zu einer angegebenen URL mit den Eingaben als URL-Parameter.

Die zu testende Komponente

Hier ist eine stark vereinfachte Version der Komponente als Demonstration. Ich würde empfehlen, so etwas wie „react-hook-form“ zu verwenden, um Ihrem Formular eine Validierung hinzuzufügen.

// MyForm.js
import React, { useState } from "react";

const MyForm = ({ baseURL }) => {
  const [name, setName] = useState("");
  const [subject, setSubject] = useState("");

  const onSubmit = () => {
    window.open(
      `${baseURL}?name=${encodeURIComponent(name)}&subject=${encodeURIComponent(
        subject
      )}`,
      "_blank"
    );
  };

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Name</label>
      <input name="name">



<p>Now we have our component, lets think about the test for it.</p>

<h2>
  
  
  What I’d normally test
</h2>

<p>Normally I would test what has been rendered in my component, using assertions such as expect the component to have text content or assert the url is what is expected (using window.location.href), but I quickly realised that approach won’t work in jest for this example.</p>

<p>Window.open opens a new browser window, so it doesn’t affect the component we are testing. We can’t see what is inside the new window or what its url is as it is outside of the scope of the component we are testing.</p>

<p>So how do we test something that is outside of what we can see? We don’t actually need to test that a new window is opened as that would be testing the window interface’s functionality and not our code. Instead, we just need to test that the window.open method is called.</p>

<h2>
  
  
  Mocking window.open()
</h2>

<p>Therefore we need to mock window.open() and test that it was called inside our code.<br>
</p>

<pre class="brush:php;toolbar:false">// Mock window.open
global.open = jest.fn();

Jetzt können wir die Werte in den Eingaben festlegen, unser Formular absenden und dann testen, ob window.open aufgerufen wurde. Wir können fireEvent verwenden, um die Werte der Eingaben festzulegen und auf die Schaltfläche „Senden“ zu klicken.

fireEvent.input(screen.getByLabelText("Name"), {
  target: {
    value: "Test Name",
  },
});
fireEvent.input(screen.getByLabelText("Subject"), {
  target: {
    value: "An example subject",
  },
});
fireEvent.submit(
  screen.getByRole("button", { name: "Submit (opens in new window)" })
);

Es lohnt sich, die Dokumentation zu den Überlegungen zu fireEvent durchzulesen. Abhängig von Ihrem Anwendungsfall möchten Sie möglicherweise stattdessen user-event verwenden.

Wir möchten warten, bis die Methode ausgeführt wird. Wir können das mit waitFor() tun.

await waitFor(() => {
  expect(global.open).toHaveBeenCalled();
});

Um sicherzustellen, dass wir nicht viele neue Fenster öffnen, können wir überprüfen, dass wir window.open nur einmal aufrufen.

await waitFor(() => {
  expect(global.open).toHaveBeenCalledTimes(1);
});

Wir können auch überprüfen, mit welchen Argumenten die Methode aufgerufen wird, indem wir die erwartete URL als erstes Argument und das Ziel als zweites Argument übergeben.

await waitFor(() => {
  expect(global.open).toHaveBeenCalledWith(
    "http://example.com?name=Test%20Name&subject=An%20example%20subject",
    "_blank"
  );
});

Die komplette Testdatei

Hier ist die vollständige Testdatei als Referenz.

// MyForm.test.js
import React from "react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import MyForm from "./MyForm";

describe("MyForm test", () => {
  beforeEach(() => {
    // Mock window.open
    global.open = jest.fn();
  });

  it("opens a new window with the correct url", async () => {
    render(<MyForm baseURL="http://example.com" />);

    fireEvent.input(screen.getByLabelText("Name"), {
      target: {
        value: "Test Name",
      },
    });
    fireEvent.input(screen.getByLabelText("Subject"), {
      target: {
        value: "An example subject",
      },
    });
    fireEvent.submit(
      screen.getByRole("button", { name: "Submit (opens in new window)" })
    );

    await waitFor(() => {
      expect(global.open).toHaveBeenCalled();
      expect(global.open).toHaveBeenCalledTimes(1);
      expect(global.open).toHaveBeenCalledWith(
        "http://example.com?name=Test%20Name&subject=An%20example%20subject",
        "_blank"
      );
    });
  });
});

Foto von energepic.com auf StockSnap

Das obige ist der detaillierte Inhalt vonTesten von window.open() in JavaScript mit Jest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!