在 Svelte 中介绍动画结束时触发的单元测试代码

Question

我创建了一个 Svelte 组件，旨在快速显示然后消失，只是为了传达该操作已发生以及该操作触及了多少记录。

组件非常简单，这是一个简化版本：

<script lang="ts">
    import { type ShowStore } from "my-library";
    import { fade, blur } from 'svelte/transition';

    export let text: string;
    export let showStore: ShowStore;
    export let timeout = 500;

    function setExit() {
        console.log('setExit executed.');
        setTimeout(() => showStore.hide(), timeout);
    }
</script>

<div
    class="rounded-5 display-2 p-5 translate-middle fw-bold top-50 start-50"
    in:blur={{ duration: 200 }}
    out:fade
    on:introend={setExit}
>
    {text}
</div>

那里看到的 CSS 类是 Bootstrap，旨在在屏幕中间显示元素。

现在，使用 Vitest，我想编写一个单元测试，确保组件在指定的超时后通过

timeout

属性隐藏自身。这似乎不起作用。在

console.log()

函数中看到的

setExit()

线不会发生，这让我怀疑在测试环境中是否会发生转换：如果

setExit()

没有被调用，那么介绍动画还没有完成，对吧？

在展示单元测试之前，我先简单介绍一下

ShowStore

：它是一个实用的 Svelte 存储，包含布尔值并具有专门的方法

show()

、

hide()

和

toggle()

。除此之外，还有一个用

writable<boolean>()

创建的 Svelte 商店。

单元测试如下所示：

    test('Should hide itself after the specified timeout value.', async () => {
        // Arrange.
        const text = '+123';
        const store = showStore();
        store.show();
        const timeout = 300;
        render(SwiftScore, { text, showStore: store, timeout });
        const spy = vi.spyOn(store, 'hide');

        // Act.
        await vi.waitFor(() => {
            console.log('Show value: %s', get(store));
            if (get(store)) {
                return Promise.reject();
            }
        }, timeout + 300);

        // Assert.
        expect(spy).toHaveBeenCalledOnce();
        expect(get(store)).toEqual(false);
    });

我正在使用

@testing-library/svelte

、

jsDom

和

Vitest

。

动画相关事件触发的代码可以进行单元测试吗？

Answer 1

测试通常通过

jsdom

运行，它不实现动画/转换逻辑。

Svelte 存储库也缺乏围绕此功能的测试。
例如。 PR #11208 注释：

没有测试，因为你无法在 JSDOM 中真正测试这些东西。

Vitest

environment

也可以设置为使用

happy-dom

，但这看起来也不支持相关的DOM逻辑/事件。