优雅地测试依赖window对象的React Hook：避免测试库冲突-js教程-PHP中文网

优雅地测试依赖window对象的React Hook：避免测试库冲突

花韻仙語

发布： 2025-09-18 14:11:37

原创

685人浏览过

优雅地测试依赖window对象的React Hook：避免测试库冲突

在测试依赖浏览器全局对象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.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<boolean>(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的定义检查：

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

查看详情

// 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<boolean>(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，确保它们在不同环境下都能按预期工作。

以上就是优雅地测试依赖window对象的React Hook：避免测试库冲突的详细内容，更多请关注php中文网其它相关文章！