我最近必须为打开新浏览器窗口的 react 组件编写测试。为了打开新窗口，我在代码中使用了 window.open() 。这使得该组件易于编写，但我必须以不同的方式思考如何为此编写测试。
有关 window.open() 方法的更多信息，请参阅 mdn 网络文档。
为了设置位或背景，我有一个 react 组件，它有一个带有几个输入的简单表单。当用户完成输入并提交表单后，它会打开一个指向指定 url 的新窗口，并将输入作为 url 参数。
要测试的组件
这是该组件的一个非常简化的版本作为演示。我建议使用像react-hook-form这样的东西来为您的表单添加验证。
// myform.jsimport 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 ( setname(e.target.value)} /> setsubject(e.target.value)} /> );};export default myform;
现在我们有了我们的组件，让我们考虑一下对其进行测试。
立即学习“Java免费学习笔记（深入）”；
我通常会测试什么
通常我会使用断言来测试组件中渲染的内容，例如期望组件具有文本内容或断言 url 是预期的（使用 window.location.href），但我很快意识到这种方法获胜了对于这个例子来说，开玩笑是行不通的。
window.open 打开一个新的浏览器窗口，因此它不会影响我们正在测试的组件。我们无法看到新窗口内的内容或其 url 是什么，因为它超出了我们正在测试的组件的范围。
那么我们如何测试我们看不见的东西呢？我们实际上不需要测试新窗口是否打开，因为这将测试窗口界面的功能而不是我们的代码。相反，我们只需要测试 window.open 方法是否被调用。
面试猫
AI面试助手，在线面试神器，助你轻松拿Offer
39 查看详情
模拟 window.open()
因此我们需要模拟 window.open() 并测试它是否在我们的代码中被调用。
// mock window.openglobal.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.jsimport 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(); 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 中测试 windowopen()的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/390298.html
微信扫一扫 
支付宝扫一扫 
