使用 Jest 在 JavaScript 中测试 windowopen()

本篇文章给大家分享《使用 Jest 在 JavaScript 中测试 windowopen()》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

我最近必须为打开新浏览器窗口的 react 组件编写测试。为了打开新窗口，我在代码中使用了 window.open() 。这使得该组件易于编写，但我必须以不同的方式思考如何为此编写测试。

有关 window.open() 方法的更多信息，请参阅 mdn 网络文档。

为了设置位或背景，我有一个 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" id="name" onchange={(e) => setname(e.target.value)} />
      <label htmlfor="subject">subject</label>
      <input
        name="subject"
        id="subject"
        onchange={(e) => setsubject(e.target.value)}
      />
      <input type="submit" value="submit (opens in new window)" />
    </form>
  );
};

export default myform;

现在我们有了我们的组件，让我们考虑一下对其进行测试。

我通常会测试什么

通常我会使用断言来测试组件中渲染的内容，例如期望组件具有文本内容或断言 url 是预期的（使用 window.location.href），但我很快意识到这种方法获胜了对于这个例子来说，开玩笑是行不通的。

window.open 打开一个新的浏览器窗口，因此它不会影响我们正在测试的组件。我们无法看到新窗口内的内容或其 url 是什么，因为它超出了我们正在测试的组件的范围。

那么我们如何测试我们看不见的东西呢？我们实际上不需要测试新窗口是否打开，因为这将测试窗口界面的功能而不是我们的代码。相反，我们只需要测试 window.open 方法是否被调用。

模拟 window.open()

因此我们需要模拟 window.open() 并测试它是否在我们的代码中被调用。

// 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 的注意事项。根据您的用例，您可能想使用用户事件。

我们想要等待该方法运行。我们可以使用 waitfor() 来做到这一点。

await waitfor(() => {
  expect(global.open).tohavebeencalled();
});

为了确保我们不会打开大量新窗口，我们可以检查是否只调用 window.open 一次。

await waitfor(() => {
  expect(global.open).tohavebeencalledtimes(1);
});

我们还可以检查调用该方法时使用的参数，传入我们期望的 url 作为第一个参数，目标作为第二个参数。

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~