如何用Vitest+React Testing Library测试XLSX文件上传解析？

场景说明 #

我有一个React组件，支持用户选择XLSX文件，通过read-excel-file库解析后将数据展示在表格中。需要编写端到端测试完成以下步骤：

1. 从本地磁盘上传已知的XLSX文件
2. 验证表格中是否渲染了已知数据

针对测试实现过程中的问题，逐一解答：

问题1：Excel解析功能无法正常工作，文件读取方式是否正确？有没有Vite/Vitest更便捷的导入方法？ #

当前代码使用node:fs的openAsBlob存在兼容性问题，该API是Node.js 21+的实验性API，可能在测试环境中无法正常运行。

推荐使用**fs.promises.readFile**读取文件内容，再手动转换为Blob对象，这是更稳定的方案：

import fs from 'node:fs/promises';
import path from 'node:path';

// 读取文件并转换为Blob
const xlsxFilePath = path.join(__dirname, 'people_10_min.xlsx');
const fileBuffer = await fs.readFile(xlsxFilePath);
const blob = new Blob([fileBuffer], {
  type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});

Vite/Vitest没有专门针对测试场景的文件导入方法，上述Node.js原生文件读取方式是测试环境中加载本地文件的标准方案。

问题2：解析功能正常时，使用waitFor是否正确？需要额外act触发重渲染吗？ #

• waitFor是正确的等待方式：文件上传、Excel解析是异步操作，组件更新DOM需要时间，waitFor会自动重试直到条件满足或超时，适合验证异步渲染的内容。
• 不需要手动包裹act：@testing-library/user-event的所有异步方法（如user.upload）已经自动用act包裹，手动添加act属于冗余操作，会增加代码复杂度。

正确的验证代码：

// 上传文件后等待目标内容出现
await waitFor(() => {
  expect(screen.getByText(/Friedmann/i)).toBeInTheDocument();
});

问题3：测试思路是否有实际意义？有没有更优方案？ #

你的测试思路完全符合端到端测试的核心目标：模拟真实用户操作，验证组件从文件上传到数据展示的完整流程，能有效覆盖核心业务逻辑，是有实际价值的。

可以从以下几点优化：

• 拆分测试用例：将组件渲染验证、文件上传操作、数据渲染验证拆分为独立测试，提升测试的可读性和可维护性。
• 添加错误场景测试：比如上传非XLSX文件、空文件时的组件表现，完善测试覆盖范围。
• 可选：Mock解析库（单元测试场景）：如果只想测试组件的UI逻辑而非解析功能，可以mockread-excel-file的返回值，避免依赖真实文件，但这更适合单元测试，端到端测试建议保留真实解析流程。

修正后的完整测试代码 #

import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import fs from 'node:fs/promises';
import path from 'node:path';

import MyImportFile from ".";

describe("MyImportFile", () => {
  test("上传XLSX文件后正确渲染数据", async () => {
    const user = userEvent.setup();
    render(<MyImportFile />);

    // 验证初始UI元素存在
    expect(screen.getByText(/person_forename/i)).toBeInTheDocument();
    const input = screen.getByLabelText(/Import XLSX/i);
    expect(input).toBeInTheDocument();

    // 读取本地Excel文件并转换为Blob
    const xlsxFilePath = path.join(__dirname, "people_10_min.xlsx");
    const fileBuffer = await fs.readFile(xlsxFilePath);
    const blob = new Blob([fileBuffer], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });

    // 执行文件上传
    await user.upload(input, blob);

    // 等待并验证数据渲染
    await waitFor(() => {
      expect(screen.getByText(/Friedmann/i)).toBeInTheDocument();
    });
  });
});

内容的提问来源于stack exchange，提问作者Stefan Krüger s-light