Testing

If you want to test your code, you have to load the catalogs the appropriate way. Since testing environments emulate different conditions (server/client), you have to load the catalogs in the corresponding way.

Vitest

Vitest runs under Vite but it doesn’t emulate client environments by itself. So the environment it emulates is the server and therefore you have to load the catalogs as appropriate. For example, if we have the following to test:

export const greet = () => {
    return 'Hello from module' // extracted/translated by wuchale
}

Then the setup for the test should be something like:

import { expect, test } from 'vitest';
import { greet } from './hello.svelte.js'; // to be tested

import * as main from '../locales/loader.ssr.svelte.js'
import * as js from '../locales/loader.ssr.js'

import { loadLocales, runWithLocale } from 'wuchale/load-utils/server';
import { locales } from 'virtual:wuchale/locales'

await loadLocales(main.key, main.loadIDs, main.loadCatalog, locales)
await loadLocales(js.key, js.loadIDs, js.loadCatalog, locales)

test('Greeting', () => {
    // test with Spanish
    runWithLocale('es', () => {
        let h = greet()
        expect(h).toEqual('Hola desde el módulo');
    })
});

Testing Library

Testing Library emulates the client environment and therefore you have to load the catalogs as done for the client, using loadLocale. For example, if you have the component:

<!-- extracted and translated by wuchale -->
<button>Hello</button>

import { expect, test } from 'vitest';
import { greet } from './hello.svelte.js';

import { loadLocale } from 'wuchale/load-utils';

import Hello from './hello.svelte'
import {render, screen} from '@testing-library/svelte'

// test with Spanish
await loadLocale('es')

test('Greeting', () => {
    render(Hello)

    const button = screen.getByRole('button', {name: 'Hola'})
    expect(button).toBeInTheDocument()
})