使用 bun test 导入、require 和测试 Svelte 组件

在 GitHub 上编辑

Bun 的 Plugin API 允许您向项目添加自定义加载器。bunfig.toml 中的 test.preload 选项允许您配置加载器在测试运行之前启动。

首先，安装 @testing-library/svelte、svelte 和 @happy-dom/global-registrator。

bun add @testing-library/svelte svelte@4 @happy-dom/global-registrator

然后，将此插件保存在您的项目中。

svelte-loader.js
import { plugin } from "bun";
import { compile } from "svelte/compiler";
import { readFileSync } from "fs";
import { beforeEach, afterEach } from "bun:test";
import { GlobalRegistrator } from "@happy-dom/global-registrator";

beforeEach(async () => {
  await GlobalRegistrator.register();
});

afterEach(async () => {
  await GlobalRegistrator.unregister();
});

plugin({
  name: "svelte loader",
  setup(builder) {
    builder.onLoad({ filter: /\.svelte(\?[^.]+)?$/ }, ({ path }) => {
      try {
        const source = readFileSync(
          path.substring(
            0,
            path.includes("?") ? path.indexOf("?") : path.length
          ),
          "utf-8"
        );

        const result = compile(source, {
          filename: path,
          generate: "client",
          dev: false,
        });

        return {
          contents: result.js.code,
          loader: "js",
        };
      } catch (err) {
        throw new Error(`Failed to compile Svelte component: ${err.message}`);
      }
    });
  },
});

将此添加到 bunfig.toml 以告诉 Bun 预加载插件，以便在测试运行之前加载它。

bunfig.toml
[test]
# Tell Bun to load this plugin before your tests run
preload = ["./svelte-loader.js"]

# This also works:
# test.preload = ["./svelte-loader.js"]

在您的项目中添加一个示例 .svelte 文件。

Counter.svelte
<script>
  export let initialCount = 0;
  let count = initialCount;
</script>

<button on:click={() => (count += 1)}>+1</button>

现在您可以在测试中 import 或 require *.svelte 文件，它会将 Svelte 组件作为 JavaScript 模块加载。

hello-svelte.test.ts
import { test, expect } from "bun:test";
import { render, fireEvent } from "@testing-library/svelte";
import Counter from "./Counter.svelte";

test("Counter increments when clicked", async () => {
  const { getByText, component } = render(Counter);
  const button = getByText("+1");

  // Initial state
  expect(component.$$.ctx[0]).toBe(0); // initialCount is the first prop

  // Click the increment button
  await fireEvent.click(button);

  // Check the new state
  expect(component.$$.ctx[0]).toBe(1);
});

使用 bun test 运行您的测试。

bun test