Node module dependencies error for simple Form Svelte component (Sveltekit App)

[tsukhu]

I was able to configure vitest-svelte-kit exactly as mentioned in the docs and the example for sveltekit provided but facing and issue when there are 3rdParty dependencies from another svelte lib

There are two issue

• (Minor) VS Code - IDE also shows "Module Not Found" for all svelte imports in the test file . This is minor as the other tests work

• (Main Issue) - Get an error if the svelte component I am testing is futher importing other svelte components (in my case felte)

• Any guidance to solve this will be a great help !!

• Error

 ❯ src/lib/forms/ConfirmDeleteForm.test.ts (0)
 √ src/lib/about/Hero.test.ts (1)
 √ src/routes/about/about.test.ts (2)

⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/lib/forms/ConfirmDeleteForm.test.ts [ src/lib/forms/ConfirmDeleteForm.test.ts ]
Error: Cannot find module 'xxxx\node_modules\@felte\reporter-svelte\src\reporter' imported from xxx\node_modules\@felte\reporter-svelte\src\index.js
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

• ConfirmDeleteForm.svelte

<script lang="ts">
	import { onDestroy } from 'svelte';
	import { createForm } from 'felte';
	import { reporter } from '@felte/reporter-svelte';
...
</script>

{#if isOpen}
	<div
		role="dialog"
		class="fixed inset-0 flex items-center justify-center pointer-events-none z-[99999]"
	>
		<form
			use:form
			class="flex flex-col gap-2 p-2 items-center justify-center text-xs bg-white w-80 pointer-events-auto rounded"
		>
			<fieldset class="flex flex-col w-full p-2">
				<legend class="text-sm font-bold text-center">{title}</legend>
			</fieldset>
			<div class="flex items-center gap-2 justify-end w-full p-2">
			...
			</div>
		</form>
	</div>
{/if}

• ConfirmDeleteForm.test.ts

/**
 * @vitest-environment jsdom
 */

 import { render, screen } from '@testing-library/svelte';
 import { test, expect } from 'vitest';
 import ConfirmDeleteForm from './ConfirmDeleteForm.svelte';
 
 test('shows proper heading when rendered', () => {
     render(ConfirmDeleteForm,{
         isOpen: true,
         title: "Delete this item?",
     });
     expect(screen.getByText(`Delete this item?`)).toBeTruthy();
 });
 

• vitest.config.js

import { extractFromSvelteConfig } from "vitest-svelte-kit"

export default extractFromSvelteConfig()

• tsconfig.json

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"moduleResolution": "node",
		"module": "es2020",
		"lib": ["es2020", "DOM"],
		"target": "es2019",
		"importsNotUsedAsValues": "error",
		"isolatedModules": true,
		"resolveJsonModule": true,
		"sourceMap": true,
		"esModuleInterop": true,
		"skipLibCheck": true,
		"forceConsistentCasingInFileNames": true,
		"baseUrl": ".",
		"allowJs": true,
		"checkJs": true,
		"paths": {
			"$lib": ["./src/lib"],
			"$lib/*": ["./src/lib/*"]
		},
		"types": ["vitest/importMeta"]
	},
	"include": [
		"src/**/*.d.ts",
		"src/**/*.js",
		"src/**/*.ts",
		"src/**/*.svelte",
		"__tests__/index.spec.ts"
	],
	"exclude": ["src/**/*.spec.ts"]
}