Use `$lib` in tests files too

[frederikhors]

Describe the problem

It would be very useful to use $lib in playwright tests files too.

Error: Cannot find package '$lib' imported from C:\project\src\lib\helpers.ts

Describe the proposed solution

Rich's Magic

Alternatives considered

Wait for Godot

Importance

would make my life easier

Additional Information

No response

[dummdidumm]

Judging from https://github.com/microsoft/playwright/pull/10525 and https://github.com/microsoft/playwright/issues/16164 this should already exist. Could you give a reproducible?

[WilliamHua]

https://github.com/WilliamHua/lib-sveltekit-bug-playwright

It works using version 1.1.1 of SvelteKit, but not 1.1.2.

I suspect it's because of this change: https://github.com/sveltejs/kit/pull/8568

You can temporarily work around this by modifying your tsconfig.json and adding

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
                ...
		"baseUrl": ".",
		"paths": {
			"$lib": [
				"src/lib"
			],
			"$lib/*": [
				"src/lib/*"
			]
		}
	}
}

[Smirow]

Same issue with $env, but can't really use the solution above. Do we have any other way to access env in dev? (dotenv is probably the way to go)

[TadasV1]

https://github.com/WilliamHua/lib-sveltekit-bug-playwright

It works using version 1.1.1 of SvelteKit, but not 1.1.2.

I suspect it's because of this change: #8568

You can temporarily work around this by modifying your tsconfig.json and adding

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
                ...
		"baseUrl": ".",
		"paths": {
			"$lib": [
				"src/lib"
			],
			"$lib/*": [
				"src/lib/*"
			]
		}
	}
}

not working in playwright. still throws cannot find $lib

[iamthe-Wraith]

any update on this? trying to use playwrights component testing and getting this same error.

[iamthe-Wraith]

has anyone been able to resolve this? even just a hacky work around?

[eltigerchino]

The following workaround does it for me (as mentioned by William). For whatever reason it only works when the baseUrl option is included. /tsconfig.json

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
        ...
		"baseUrl": ".",
		"paths": {
			"$lib": [
				"./src/lib"
			],
			"$lib/*": [
				"./src/lib/*"
			]
		},
	},
}

[iamthe-Wraith]

The following workaround does it for me (as mentioned by William). For whatever reason it only works when the baseUrl option is included. /tsconfig.json

This worked for me, thank you!

[coryvirok]

I'm running into the same issue with accessing $env from tests, just like @Smirow mentioned. Is there a workaround for this?

[DylanStandridge]

I'm also running into the same issue within a test.

[frederikhors]

@s3812497 @WilliamHua what about this?

Error: Cannot find package '$app' imported from ...?

[eltigerchino]

what about this?

Error: Cannot find package '$app' imported from ...?

See https://github.com/sveltejs/kit/issues/1485

[frederikhors]

@s3812497 I don't know what to read for fixing this.

[eltigerchino]

It doesn't seem like there's a straight-forward fix at the moment. There are a few examples in that issue of people mocking the $app module for their testing frameworks.

[frederikhors]

I can use:

"$app": [
	"./node_modules/@sveltejs/kit/src/runtime/app"
],
"$app/*": [
	"./node_modules/@sveltejs/kit/src/runtime/app/*"
],
"$env": [
	"./node_modules/@sveltejs/kit/src/runtime/env"
],
"$env/*": [
	"./node_modules/@sveltejs/kit/src/runtime/env/*"
]

but for example $env/static/public is a problem.

[coryvirok]

I'm using this and it seems to work:

// tsconfig.json
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    // Everything below is required for Playwright tests to access path aliases
    "baseUrl": ".",
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"],
      "$app/*": ["tests/e2e/mocks/app/*"],
      "$env/*": ["tests/e2e/mocks/env/*"]
    }
  }
}

// tests/e2e/mocks/env/app/dynamic/private.ts
export const env = process.env

[frederikhors]

@coryvirok Is there a way to put tsconfig.json into tests/ dir and not in the root one?

[coryvirok]

I haven't tried it, but it looks like you'll need to compile separately:

from https://playwright.dev/docs/test-typescript

{
  "scripts": {
    "pretest": "tsc --incremental -p tests/tsconfig.json",
    "test": "playwright test -c tests-out"
  }
}

[frederikhors]

I'm using this and it seems to work:

// tsconfig.json
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    // Everything below is required for Playwright tests to access path aliases
    "baseUrl": ".",
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"],
      "$app/*": ["tests/e2e/mocks/app/*"],
      "$env/*": ["tests/e2e/mocks/env/*"]
    }
  }
}

// tests/e2e/mocks/env/app/dynamic/private.ts
export const env = process.env

I cannot make this work. Can you please push a repo to github, @coryvirok?

[coryvirok]

For sure. Here is the SvelteKit skeleton app with upgraded deps + env mocks for Playwright.

https://github.com/coryvirok/tmp-mock-env-sveltekit

[frederikhors]

Thanks. The issue is that if I use this tsconfig.json:

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "$lib": ["./src/lib"],
      "$lib/*": ["./src/lib/*"],
      "$app": ["./node_modules/@sveltejs/kit/src/runtime/app"],
      "$app/*": ["./node_modules/@sveltejs/kit/src/runtime/app/*"],
      "$env": ["./tests/e2e/mocks/env"],
      "$env/*": ["./tests/e2e/mocks/env/*"]
    }
  }
}

I'm getting this error:

Error: Cannot find module 'C:\project\node_modules\@tanstack\svelte-query\build\lib\types' imported from C:\project\node_modules\@tanstack\svelte-query\build\lib\index.js

I suspect the issue is caused by "baseUrl": ".". If I don't use it I get other errors like cannot find $lib.

@ tanstack\svelte-query\build\lib\index.js is:

/* istanbul ignore file */
// Re-export core
export * from '@tanstack/query-core';
// Svelte Query
export * from './types';
export * from './context';
export { createQuery } from './createQuery';
export { createQueries } from './createQueries';
export { createInfiniteQuery } from './createInfiniteQuery';
export { createMutation } from './createMutation';
export { useQueryClient } from './useQueryClient';
export { useIsFetching } from './useIsFetching';
export { useIsMutating } from './useIsMutating';
export { useHydrate } from './useHydrate';
export { default as Hydrate } from './Hydrate.svelte';
export { default as QueryClientProvider } from './QueryClientProvider.svelte';

and @ tanstack\svelte-query\build\lib\types is:

export {};

I don't know what to do.

[coryvirok]

I'm not familiar with the svelte query lib but here's what I would recommend:

Add another file to your mocks folder called app.ts. From there, export whichever vars are used by your app at build and runtime. I do this for the building var. Then, rename the path aliases in tsconfig for $app to point to this new mock, just like the $env var does.

Your baseUrl looks correct.

[sowdowdow]

Hello same issue here for me. Any advancement on the subject ? @frederikhors have you managed to make it work since ?

[frederikhors]

have you managed to make it work since ?

Nope. We are all waiting for a fix.

[sowdowdow]

Workaround ($env only)

import { connect } from "@planetscale/database";
import { drizzle } from "drizzle-orm/planetscale-serverless";
import 'dotenv/config'

var DB_HOST = process.env.DB_HOST
var DB_PASSWORD = process.env.DB_PASSWORD
var DB_USERNAME = process.env.DB_USERNAME

const connection = connect({
  host: DB_HOST,
  username: DB_USERNAME,
  password: DB_PASSWORD,
});

export const db = drizzle(connection);

[oscarhermoso]

Another workaround, run Playwright in Vitest

https://www.the-koi.com/projects/how-to-run-playwright-within-vitest/

This is working well for me

[mcmxcdev]

Looks like this became even more relevant to fix now in SvelteKit 2 due to https://kit.svelte.dev/docs/migrating-to-sveltekit-2#generated-tsconfig-json-is-more-strict

[madacol]

This is relevant https://playwright.dev/docs/test-components#i-have-a-project-that-already-uses-vite-can-i-reuse-the-config

Playwright-for-Svelte uses its own vite internally, so it has a way to inject configs to it

import { defineConfig } from '@playwright/experimental-ct-svelte';

export default defineConfig({
  use: {
    ctViteConfig: {
      // ...
    },
  },
});

Keep in mind this is not standard playwright (@playwright/test), it's an official wrapper configured to test Svelte components

[frederikhors]

@madacol I cannot make it work with this neither.

[phcoliveira]

I ended up using a relative import.