vitest-dev / vitest-dev/vitest

Browser mode runs test twice in case of a self-importing svelte component

Open
#7,247 15 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feat: browser pending triage
Dominant language
TypeScript
Stars
17.1k
Forks
2k
Avg merge
1d 22h
Merged PRs (30d)
94

Description

Describe the bug

So, i know this is a bit of a weird case but please bear with me.

To test components with snippets in svelte 5 i can create a snippet programmatically with createRawSnippet but that's an intentionally low level api which makes things a bit annoying to test. But today i realized that i could do something like this which is very clean and elegant.

Button.test.svelte

<script module lang="ts">
	import { expect, it } from 'vitest';
	import { render as r } from 'vitest-browser-svelte';
	import Test from './Button.test.svelte';

	it('should render a snippet in the button', async () => {
		const instance = r(Test, {
			children: rendering_this
		});

		const button = instance.getByRole('button');
		expect(button.getByText('Pretty cool eh?').query()).toBeDefined();
	});
</script>

<script lang="ts">
	import type { Snippet } from 'svelte';
	import Button from './Button.svelte';

	let { children }: { children: Snippet } = $props();
</script>

{#snippet rendering_this()}
	<b>Pretty cool eh?</b>
{/snippet}

<Button>
	{@render children()}
</Button>

so basically i can create a svelte file, name it Something.test.svelte include it in the test file and then write a test bed in the test component itself, self import it in the module and write my tests there. This works absolutely fine with @testing-library/svelte.

But i start to use vitest browser testing i have the inconvenient side effect that my tests run twice. I suspect this is a bug with vitest and it would be cool if it was fixed because i really like this pattern and i want to spread it.

Reproduction
  1. Go to this stackblitz
  2. run pnpm test (i think vitest browser mode is a bit glitchy on stackblitz but sometimes it works and you'll see two tests being run)
System Info
System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitest/browser: ^2.1.8 => 2.1.8 
    vite: ^5.4.11 => 5.4.11 
    vitest: ^2.0.4 => 2.1.8
Used Package Manager

pnpm

Validations

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the StackBlitz reproduction, especially vite.config.ts, src/lib/Button.test.svelte, and src/lib/Button.svelte, then run pnpm test to confirm the duplicate browser-mode execution. Trace how the self-imported test component is discovered and executed, and consider the issue done when the reproduction runs its test only once.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.