我最近必须为打开新浏览器窗口的 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
