我最近必须为打开新浏览器窗口的 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;
现在我们有了我们的组件，让我们考虑一下对其进行测试。
立即学习“Java免费学习笔记（深入）”；
我通常会测试什么
通常我会使用断言来测试组件中渲染的内容，例如期望组件具有文本内容或断言 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
