ParaglideJS: How to use it in test frameworks ?

[LBF38]

Hi Opral's team,
What an amazing ecosystem and open source tools you provide ! Congrats !👏

I'm using ParaglideJS in a new SvelteKit app I'm starting and I'm struggling on using messages in test frameworks, especially in Playwright e2e testing.
Do you have any guides on this topic ?

Thanks in advance for your help !

[LorisSigrist]

We don't have any guides on testing yet. Can I ask, what is making it difficult to test?

• Making sure the compiler ran before testing
• Visiting & testing sites in all languages
• Managing the language during tests
• something else

We are avid testers ourselves, so making sure it's easy to test with Paraglide is very important to us

[samuelstroschein]

I am surprised too. The API for testing seems straightforward because all messages are JS functions.

[LBF38]

I was making an e2e test w/ Playwright in a SvelteKit app and Vite configuration.
Here is the snippet of my code:

import { expect, test } from '@playwright/test';
import * as m from '$paraglide/messages';

test('index page has expected h1', async ({ page }) => {
	await page.goto('/');
	await expect(page.getByRole('heading', { name: m.page_hello_title() })).toBeVisible();
});

However, when I ran the test, it said that the "$paraglide/message" module can't be imported.
It might not be the right way to use it in test, hence the question.

The idea of the test would be to easily test any page of the app in any locale.

PS: it works fine if I put a literal string at the place of m.page_hello_title().

[LorisSigrist]

Likely the import alias $paraglide isn't set up to work in test-files. try importing from src/paraglide/messages.js instead.

Also keep in mind that the test-browser and the Playwright test run in different processes, so the language will not automatically be shared between them. I would recommend always explicitly setting the language for messages that are used in a test.

Try

import { expect, test } from '@playwright/test';
import * as m from '../paraglide/messages';

test('index page has expected h1', async ({ page }) => {
	await page.goto('/');
	await expect(page.getByRole('heading', { name: m.page_hello_title({} , { languageTag: "en" }) })).toBeVisible();
});

[LBF38]

That works like a charm ! Thanks !
Good to know about the language tag too. That's understandable too for having deterministics tests.