导言：测试React Hook中的浏览器API依赖
在构建通用（universal）或服务器端渲染（ssr）的react应用时，经常需要编写在浏览器环境中运行的hook，这些hook会访问浏览器特有的全局对象，例如window或document。为了避免在非浏览器环境（如node.js服务器端或测试环境）中报错，通常会进行typeof window !== "undefined"这样的检查。然而，在测试这些hook时，如果试图模拟window为undefined来测试其在非浏览器环境下的行为，可能会遇到意想不到的问题。
直接模拟window引发的问题
考虑一个自定义Hook，其中包含对window对象的检查和使用，例如一个useMediaQuery Hook：
// isWindowDefined.ts
export const isWindowDefined = () => typeof window !== "undefined";
// useMediaQuery.ts
import 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.ts
export function isWindowDefined(): boolean {
return typeof window !== "undefined";
}2. 在Hook中引用工具函数
然后，在你的自定义Hook中，使用这个工具函数来替代直接的typeof window !== "undefined"检查：
// src/hooks/useMediaQuery.ts
import 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-hooks
import 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，确保它们在不同环境下都能按预期工作。
