在测试依赖浏览器全局对象window的React Hook时，直接模拟window为undefined可能导致测试库内部报错。本文介绍一种通过抽象window存在性检查到独立工具函数的方法，从而在测试中安全地模拟window状态，避免与测试渲染器（如react-test-renderer）的冲突，确保测试的隔离性和稳定性。
导言：测试React Hook中的浏览器API依赖
在构建通用（universal）或服务器端渲染（ssr）的react应用时，经常需要编写在浏览器环境中运行的hook，这些hook会访问浏览器特有的全局对象，例如window或document。为了避免在非浏览器环境（如node.js服务器端或测试环境）中报错，通常会进行typeof window !== “undefined”这样的检查。然而，在测试这些hook时，如果试图模拟window为undefined来测试其在非浏览器环境下的行为，可能会遇到意想不到的问题。
直接模拟window引发的问题
考虑一个自定义Hook，其中包含对window对象的检查和使用，例如一个useMediaQuery Hook：
// isWindowDefined.tsexport const isWindowDefined = () => typeof window !== "undefined";// useMediaQuery.tsimport React from "react";import { isWindowDefined } from "./isWindowDefined"; // 假设已经抽象const useMediaQuery = (query: string): boolean => { const getMatches = (query: string): boolean => { if (isWindowDefined()) { // 这里使用了抽象函数 return window.matchMedia(query).matches; } return false; }; const [matches, setMatches] = React.useState(getMatches(query)); const handleChange = () => { setMatches(getMatches(query)); }; React.useEffect(() => { // 在非浏览器环境下，window.matchMedia会报错 if (!isWindowDefined()) { return; // 避免在window未定义时执行 } const matchMedia = window.matchMedia(query); handleChange(); matchMedia.addEventListener("change", handleChange); return () => { matchMedia.removeEventListener("change", handleChange); }; }, [query]); return matches;};export default useMediaQuery;
当尝试测试isWindowDefined返回false（即window未定义）的情况时，如果直接使用jest.spyOn(window, “window”, “get”).mockImplementation(() => undefined);来模拟window，可能会遇到来自测试库的TypeError，例如TypeError: Cannot read property ‘event’ of undefined。
这是因为像react-test-renderer这样的测试库，在内部逻辑中可能也会进行window的存在性检查，并且在检查通过后（即使window被模拟为undefined），仍然尝试访问window的属性（如window.event），导致错误。测试库本身在某些内部处理中可能依赖window对象的存在，即使其值为undefined，其内部逻辑也可能期望window是一个对象，而不是字面量undefined。
解决方案：抽象window存在性检查
解决此问题的最佳实践是将对window是否存在或其属性的访问封装到一个独立的工具函数中。这样，在测试时，我们不再直接模拟全局的window对象，而是模拟这个工具函数，从而完全隔离测试环境与全局对象，避免与测试库的内部实现冲突。
1. 创建isWindowDefined工具函数
首先，创建一个专门的模块来处理window的定义检查：
// src/utils/isWindowDefined.tsexport function isWindowDefined(): boolean { return typeof window !== "undefined";}
2. 在Hook中引用工具函数
然后，在你的自定义Hook中，使用这个工具函数来替代直接的typeof window !== “undefined”检查：
// src/hooks/useMediaQuery.tsimport React from "react";import { isWindowDefined } from "../utils/isWindowDefined"; // 引入抽象函数const useMediaQuery = (query: string): boolean => { const getMatches = (query: string): boolean => { if (isWindowDefined()) { // 使用抽象函数进行检查 return window.matchMedia(query).matches; } return false; }; const [matches, setMatches] = React.useState(getMatches(query)); const handleChange = () => { setMatches(getMatches(query)); }; React.useEffect(() => { // 在非浏览器环境下，此处应避免执行 if (!isWindowDefined()) { return; } const matchMedia = window.matchMedia(query); handleChange(); matchMedia.addEventListener("change", handleChange); return () => { matchMedia.removeEventListener("change", handleChange); }; }, [query]); return matches;};export default useMediaQuery;
3. 编写测试：模拟工具函数
现在，在测试文件中，你可以导入isWindowDefined模块，并使用jest.fn().mockReturnValue()来模拟它的行为，而无需触及全局的window对象：
import { renderHook, act } from "@testing-library/react-hooks"; // 推荐使用 react-hooks-testing-library 或 @testing-library/react-hooksimport useMediaQuery from "../src/hooks/useMediaQuery";import * as windowUtil from "../src/utils/isWindowDefined"; // 导入整个模块// 保存原始实现，以便在测试后恢复const realIsWindowDefined = windowUtil.isWindowDefined;afterEach(() => { // 每个测试运行后恢复isWindowDefined的原始实现，确保测试隔离 windowUtil.isWindowDefined = realIsWindowDefined;});test("当window未定义时，useMediaQuery应返回false", () => { // 模拟isWindowDefined函数返回false windowUtil.isWindowDefined = jest.fn().mockReturnValue(false); // 渲染Hook const { result } = renderHook(() => useMediaQuery("(min-width: 768px)")); // 验证Hook的返回值 expect(result.current).toBe(false);});test("当window定义时，useMediaQuery应正确获取匹配状态", () => { // 模拟isWindowDefined函数返回true windowUtil.isWindowDefined = jest.fn().mockReturnValue(true); // 模拟window.matchMedia Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation(query => ({ matches: query === "(min-width: 768px)", // 模拟匹配结果 addEventListener: jest.fn(), removeEventListener: jest.fn(), })), }); const { result } = renderHook(() => useMediaQuery("(min-width: 768px)")); expect(result.current).toBe(true); // 清理模拟的matchMedia // delete window.matchMedia; // 如果matchMedia是全局的，可能需要清理});
在这个测试中，我们成功地模拟了isWindowDefined()在window未定义时的行为，而没有直接修改全局window对象，从而避免了与react-test-renderer等测试库的内部冲突。
总结与最佳实践
隔离依赖：当你的代码依赖于全局对象（如window、document）时，最佳实践是将这些依赖封装到独立的、可测试的模块中。模拟接口而非实现：在测试中，模拟这些封装好的接口（函数或对象），而不是直接修改全局环境。这样可以确保你的测试是隔离的，并且不会对测试运行时的环境产生副作用。测试后清理：使用afterEach或afterAll来恢复被模拟的函数或变量的原始实现，确保每个测试都在一个干净的环境中运行。关注业务逻辑：通过抽象，你可以更专注于测试Hook的业务逻辑，而不必担心底层浏览器API的模拟细节。
通过这种抽象和模拟策略，你可以优雅且稳定地测试那些依赖浏览器特定API的React Hook，确保它们在不同环境下都能按预期工作。
以上就是优雅地测试依赖window对象的React Hook：避免测试库冲突的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520641.html
微信扫一扫 
支付宝扫一扫 
