Jest を使用した JavaScript の window.open() のテスト

最近、新しいブラウザ ウィンドウを開く React コンポーネントのテストを作成する必要がありました。新しいウィンドウを開くために、コード内で window.open() を使用しました。これによりコンポーネントは書きやすくなりましたが、このテストの書き方については少し異なる考え方をする必要がありました。

window.open() メソッドの詳細については、mdn Web ドキュメントを参照してください。

ビットまたは背景を設定するために、いくつかの入力を備えた単純なフォームを持つ React コンポーネントを用意しました。ユーザーが入力を完了してフォームを送信すると、入力を URL パラメーターとして指定した URL に新しいウィンドウが開きます。

テストするコンポーネント

これは、デモとしてコンポーネントの非常に簡略化されたバージョンです。フォームに検証を追加するには、react-hook-form のようなものを使用することをお勧めします。

// 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();

これで、入力に値を設定し、フォームを送信して、window.open が呼び出されたかどうかをテストできます。 fireEvent を使用して入力の値を設定し、送信ボタンを押すことができます。

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)" })
);

fireEvent に関する考慮事項については、ドキュメントを一読する価値があります。ユースケースに応じて、代わりに user-event を使用することもできます。

メソッドが実行されるのを待ちたいと思います。 waitFor() を使用してそれを行うことができます。

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

新しいウィンドウを大量に開いていないことを確認するために、window.open を 1 回だけ呼び出していることを確認できます。

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

最初の引数として予期される URL を渡し、2 番目の引数としてターゲットを渡して、メソッドがどのような引数で呼び出されているかを確認することもできます。

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

完全なテスト ファイル

参考用に完全なテスト ファイルをここに示します。

// 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"
      );
    });
  });
});

StockSnap のenergepic.com による写真

以上がJest を使用した JavaScript の window.open() のテストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。