在React-Resizable-Panels项目中使用Vitest进行测试的注意事项

React-Resizable-Panels是一个用于创建可调整大小面板的React组件库。在使用Vitest进行测试时，开发者可能会遇到一些特殊问题，本文将详细介绍这些问题的原因和解决方案。

测试环境配置问题

当使用Vitest测试React-Resizable-Panels组件时，常见的错误是"Panel size not found for panel"。这个问题的根源在于Vitest默认运行的是Node构建目标，而React-Resizable-Panels的某些功能依赖于浏览器的布局效果。

在Node环境下，React不会执行布局效果相关的代码，这导致Panel组件无法正确"挂载"和注册自己，从而使测试失败。这是React的预期行为，因为在服务器端渲染场景下不需要这些效果。

解决方案：使用Vitest的浏览器模式

要解决这个问题，最有效的方法是配置Vitest运行在浏览器模式下。这需要以下配置步骤：

1. 安装必要的依赖包：

   • @vitest/browser（beta版本）
   • playwright（用于无头浏览器测试）
   • vitest（beta版本）

2. 创建Vite配置文件：

   import { defineConfig } from "vitest/config";
   import react from "@vitejs/plugin-react";
   
   export default defineConfig({
     plugins: [react()],
   });
   

3. 创建工作区配置文件：

   import { defineWorkspace } from "vitest/config";
   
   export default defineWorkspace([
     {
       test: {
         include: ["src/**/*.{test,spec}.ts", "src/**/*.{test,spec}.tsx"],
         name: "browser",
         browser: {
           enabled: true,
           instances: [{ browser: "headless" }],
         },
       },
     },
   ]);
   

测试代码示例

在浏览器模式下，可以正常测试Panel组件的命令式句柄功能。以下是一个完整的测试示例：

import { render } from "@testing-library/react";
import { createElement, createRef } from "react";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import { expect, test } from "vitest";

test("命令式句柄功能测试", () => {
  const ref = createRef();

  render(
    createElement(
      PanelGroup,
      {
        direction: "horizontal",
      },
      createElement(Panel, { defaultSize: 50, id: "PanelA", ref }, "A"),
      createElement(PanelResizeHandle, { panelId: "PanelResizeHandleA" }),
      createElement(Panel, { defaultSize: 50, id: "Panel" }, "B")
    )
  );

  const el = document.body.querySelector(
    `[data-panel-id="${ref.current?.getId()}"]`
  );
  expect(el?.parentElement).toBeDefined();
  expect(el?.textContent).toBe("A");
  expect(ref.current?.getSize()).toEqual(50);
});

项目版本注意事项

从React-Resizable-Panels的3.0.0版本开始，项目已经针对测试环境进行了优化。如果使用3.0.2或更高版本，理论上可以简化测试配置，但仍然建议使用浏览器模式进行测试，以确保所有功能都能被正确验证。

总结

测试React-Resizable-Panels组件时，理解其依赖浏览器环境的特点非常重要。通过合理配置Vitest的浏览器模式，可以确保测试环境与真实浏览器环境一致，从而避免因环境差异导致的测试失败。对于复杂的UI组件库，这种测试方法也更具可靠性，能够更好地模拟用户实际操作场景。