Testing .svelte.ts/js files

[MentalGear]

When using a $state in a class like this, how can the file be made testable using frameworks like vitest ?

export class Example {
	value = $state(['todo1']);

	add(task) {
		this.value.add(task);
		this.value = this.value;
		console.log('added!', this.value);
	}

	remove(task) {
		this.value.delete(task);
		this.value = this.value;
		console.log('removed!', this.value);
	}
}

[mskocik]

It is working for me just fine with "@testing-library/svelte": "^5.1.0"

And if you want to use runes in your test files, you just need to use valid filename convention - end filename with svelte.js/ts.

I also included this file ending in vite config in test > include

export default defineConfig({
  plugins: [
    nodePolyfills({
      include: ['path', 'fs'],
    }),
    vitestBrowserConditionPlugin, sveltekit()],
  test: {
    globals: true,
    environment: 'jsdom',
    include: ['tests/**/*.test.{js,svelte.js}'], // 👈 `svelte.js` added here
    alias: {
      "@testing-library/svelte": "@testing-library/svelte/svelte5",
    },
    // extend jsdom matchers
    setupFiles: ['./tests/_setup.js']
  }
});