`vitest` 和 Svelte 组件的 `onMount`

huangapple go评论70阅读模式
英文:

vitest and svelte component's onMount

问题

I'm trying to use Svelte to create a simple reactive component. The component loads data from an api server onMount and updates a reactive value (which updates an HTML element).

I have a simple vitest that renders the component and verifies the value of the HTML element. However, while running under vitest, the onMount is never called, and hence the API call is never made. What am I missing?

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();
});

(Note: I have corrected the code by removing HTML encoding from the script tags.)

英文:

I'm trying to use Svelte to create a simple reactive component. The component loads data from an api server onMount and updates a reactive value (which updates a html element).

I have a simple vitest that renders the component and verifies the value of the html element. However while running under vitest the onMount is never called and hence the api call is never made. What am I missing ?

Component.svelte:

&lt;script&gt;
	import { onMount } from &#39;svelte&#39;;

	export let name = &#39;world&#39;;

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

&lt;/script&gt;

&lt;div id=&quot;#element&quot;&gt;
	&lt;b&gt; Hello {name}&lt;/b&gt;
&lt;/div&gt;

index.test.js:

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

test(&#39;should render&#39;, () =&gt; {
	render(Component);

	const heading = screen.getByText(&#39;Hello FOO&#39;);
	expect(heading).toBeInTheDocument();
});

答案1

得分: 3

"在一些调查后,我偶然发现了这个问题:https://github.com/vitest-dev/vitest/issues/2834

由于我正在运行 Svelte 4.0.0,所以在 vitest 下 onMount 不再被调用,因此我不得不将以下内容添加到 vite.config.js 以使其工作:

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

<details>
<summary>英文:</summary>

After some sleuthing I stumbled on this issue: https://github.com/vitest-dev/vitest/issues/2834

As I&#39;m running Svelte 4.0.0 the `onMount` is no longer invoked under vitest, hence I had to ad this to `vite.config.js` to make it work:

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


</details>



huangapple
  • 本文由 发表于 2023年6月29日 10:07:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/76577665.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定