vitest react-testing-library：如何测试xlsx文件上传和处理？

Question

我有一个反应组件，用户可以在其中选择 xlsx 文件，然后解析它并在表格中显示数据。 我想为其创建一个简单的端到端测试：

• 从光盘上传已知的 xlsx 文件
• 检查已知数据是否呈现在表格中

我对此有三个问题

• 使用以下代码，Excel 解析不起作用 我不确定我是否正确读取文件 - 对于这样的用例，是否有任何更好的 vite / vitest 内置导入/加载功能？
• （如果解析有效）是 waitFor 正确的方法吗？ / 我需要额外的 act 来触发重新渲染吗？
• 作为测试新手 - 我对测试的想法有意义吗？或者有更好的方法来实现这一点吗？

import { act, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import MyImportFile from ".";


import path from "node:path";
import { openAsBlob } from "node:fs";

describe("MyImportFile", () => {
  test("does the upload work?", async () => {
    const user = userEvent.setup();
    render(<MyImportFile />);

    expect(screen.getByText(/person_forename/i)).toBeInTheDocument();

    const input = screen.getByLabelText(/Import XLSX/i);
    expect(input).toBeInTheDocument();

    console.log("__dirname", __dirname);
    const xlsx_file_path = path.join(__dirname, "people_10_min.xlsx");
    // const xlsx_file_path_abs = path.resolve(xlsx_file_path);
    let blob = undefined;
    try {
      blob = await openAsBlob(xlsx_file_path, {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
    } catch (error) {
      console.log(error);
    }

    console.log("blob", blob);
    // https://reactjs.org/link/wrap-tests-with-act
    await act(async () => {
      /* fire events that update state */
      await user.upload(input, blob);
    });

    //const data_content = await vi.waitFor(() => screen.getByText(/Friedmann/i));
    //expect(data_content).toBeInTheDocument();
  });
});

我在codesandbox创建了一个或多或少的最小示例

并希望能学到很多东西:-)

我还发布了与此相关的问题

• https://github.com/vitejs/vite/pull/15651
• https://gitlab.com/catamphetamine/read-excel-file/-/issues/90

Answer 1

已解决 - 使用 vite-plugin-arraybuffer： 用于文件加载。

然后我就可以

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import MyImportFile from ".";

import xlsx_file from "../../../dev_tests/people_10.xlsx?arraybuffer";

describe("MyImportFile", () => {
    test("does the upload work?", async () => {
        const user = userEvent.setup();
        render(
            <MyImportFile />
        );

        expect(screen.getByText(/person_forename/i)).toBeInTheDocument();

        const input = screen.getByLabelText(/Import XLSX/i);
        expect(input).toBeInTheDocument();
        await user.upload(input, xlsx_file);
        const data_content = await screen.getByText(/^Friedmann/i)
        expect(data_content).toBeInTheDocument();
    });
});

他们的关键是删除步骤之间的所有 Blob 和文件。 因为基于承诺的

blob.arrayBuffer()

没有正确解决.. （我错过了或者没有正确地等待这个..） 因此 fflate 得到一个空数组：导致

Error: invalid zip data

---

我是如何到达那里的：

经过一段很长的旅程才到达那里 - 我测试了很多东西

• 不同的插件和加载/导入文件的版本
• 将文件转换为 Base64 表示形式并将其存储为 javascript 文件
• 这样我可以将其加载到浏览器中以交叉测试 Base64 和返回解码到文件是否运行良好
• 这样我就可以排除网站上的错误并追踪到浏览器/node.js
• 发现我必须导入

  import { Blob } from "node:buffer";

  才能让 Blob 创建为我工作
• 但这并没有解决

  Error: invalid zip data

• 在代码中追踪到错误来自哪里
• 在我的测试用例中重新创建了这部分，以查看每一个步骤
• 发现基本上

  .arrayBuffer()

  没有解决。
• 所以回到开始..清理所有（见上文。）