vitest 和 svelte 组件的 onMount

Question

我正在尝试使用 Svelte 创建一个简单的反应式组件。该组件从 api 服务器加载数据onMount并更新响应值（更新 html 元素）。

我有一个简单的 vitest 来呈现组件并验证 html 元素的值。然而，在 vitest 下运行时，onMount永远不会调用 api ，因此永远不会进行 api 调用。我缺少什么？

Component.svelte：

<script>
    import { onMount } from 'svelte';

    export let name = 'world';

    onMount(async () => {
        console.log('chat onMount event!');
        const response = await fetch('http://localhost:8081/api');
        // for this example, assume name returned by api is FOO
        name = data.name;
    });

</script>

<div id="#element">
    <b> Hello {name}</b>
</div>

index.test.js：

import { expect, test } from 'vitest';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/svelte';
import Component from '../src/lib/Component.svelte';

test('should render', () => {
    render(Component);

    const heading = screen.getByText('Hello FOO');
    expect(heading).toBeInTheDocument();
});

Answer 1

经过一番调查后，我偶然发现了这个问题：https://github.com/vitest-dev/vitest/issues/2834

当我运行 Svelte 4.0.0 时，它onMount不再在 vitest 下调用，因此我必须将其添加到vite.config.js使其工作：

{
      test: {
        alias: [{ find: /^svelte$/, replacement: 'svelte/internal' }],
        ....
       },
       ....
}