Vitest+React环境下如何测试write-excel-file的FileSaver.saveAs下载功能

1. 正确Mock FileSaver与全局Blob #

在测试文件顶部，用Vitest的vi.mockMock整个file-saver模块，同时模拟全局Blob构造函数，保证文件生成逻辑能正常执行：

import { vi, expect, test } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import FileSaver from 'file-saver';
import YourExcelComponent from './YourExcelComponent';

// Mock FileSaver.saveAs方法
vi.mock('file-saver', () => ({
  default: {
    saveAs: vi.fn(),
  },
}));

// 模拟全局Blob构造函数
global.Blob = vi.fn((content, options) => ({
  content,
  options,
}));

2. 调整组件逻辑（必要时） #

如果组件直接依赖write-excel-file的默认下载逻辑，建议把文件生成和下载操作分离，将saveAs调用暴露到组件层级，方便测试捕获：

// 组件示例代码
import writeXlsxFile from 'write-excel-file';
import FileSaver from 'file-saver';

export default function ExcelDownloadButton() {
  const handleDownload = async () => {
    // 定义表格数据
    const data = [
      { name: '测试数据1', value: 100 },
      { name: '测试数据2', value: 200 }
    ];
    // 生成Blob而非直接下载
    const blob = await writeXlsxFile(data, {
      download: false
    });
    // 手动调用saveAs触发下载
    FileSaver.saveAs(blob, 'exported-data.xlsx');
  };

  return <button onClick={handleDownload}>导出XLSX</button>;
}

3. 编写测试用例 #

渲染组件后触发点击事件，断言saveAs被正确调用，还可进一步验证Blob参数和文件名：

test('点击按钮触发XLSX文件下载', async () => {
  render(<YourExcelComponent />);
  
  // 找到按钮并触发点击
  const downloadBtn = screen.getByText('导出XLSX');
  fireEvent.click(downloadBtn);
  
  // 等待异步文件生成完成
  await new Promise(resolve => setTimeout(resolve, 0));
  
  // 断言saveAs方法被调用
  expect(FileSaver.saveAs).toHaveBeenCalled();
  
  // 验证调用参数
  const [blob, filename] = FileSaver.saveAs.mock.calls[0];
  expect(filename).toBe('exported-data.xlsx');
  expect(global.Blob).toHaveBeenCalled();
});

关键注意事项 #

• 异步处理：writeXlsxFile是异步函数，测试时需等待异步操作完成，可使用await new Promise或@testing-library/react的waitFor方法。
• Mock时机：确保file-saver的Mock在组件导入前生效，避免实际模块被加载。
• 禁用自动下载：在writeXlsxFile配置中设置download: false，手动调用saveAs，才能准确捕获调用行为。

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