Unit test failed with qwik >=0.104.0

[ahnpnl]

Hi,

I have a unit test file like this

describe('qwikTranslationFn', () => {
    it('should load translation files from "assets/i18n"', async () => {
        const Wrapper = component$(() => {
            const translationData = useSignal<Translation | null>(null);
            const fnStub = $(async () => {
                translationData.value = (await translationFn.loadTranslation$('en-US', 'common'))?.default;
            });

            return (
                <>
                    <p>{JSON.stringify(translationData.value)}</p>
                    <button
                        data-testid="test-btn"
                        onClick$={fnStub}
                    >
                        Click me
                    </button>
                </>
            );
        });
        const { render, userEvent, screen } = await createDOM();
        await render(<Wrapper />);

        await userEvent('[data-testid="test-btn"]', 'click');

        expect(screen.querySelector('p')?.textContent).toBe(JSON.stringify(enUSMessages));
    });
});

with the translationFn implemented as

const translationData = import.meta.glob('/assets/i18n/**/*.json');

const loadTranslation$: LoadTranslationFn = server$((lang, asset) => {
    const langAsset = `/assets/i18n/${lang}/${asset}.json`;
    if (langAsset in translationData) {
        return translationData[langAsset]();
    }

    if (isDev) {
        console.warn(`loadTranslation$: ${langAsset} not found`);
    }

    return null;
});

export const translationFn: TranslationFn = {
    loadTranslation$,
};

With qwik >=0.104.0, my test failed with this error

➤ YN0000: QWIK ERROR ReferenceError: SubmitEvent is not defined
➤ YN0000:     at /node_modules/@builder.io/qwik-city/index.qwik.mjs:759:30
➤ YN0000:     at Array.map (<anonymous>)
➤ YN0000:     at serverQrl_stuff_wOIPfiQ04l4 (/node_modules/@builder.io/qwik-city/index.qwik.mjs:758:31)
➤ YN0000:     at invoke (/builds/dist-dev/tsc-out/packages/qwik/src/core/use/use-core.js:60:6)
➤ YN0000:     at /builds/dist-dev/tsc-out/packages/qwik/src/core/qrl/qrl-class.js:63:18
➤ YN0000:     at invokeQRL (/builds/dist-dev/tsc-out/packages/qwik/src/core/qrl/qrl-class.js:82:23)
➤ YN0000:     at async Promise.all (index 0)
➤ YN0000:     at Module.loadTranslations (/builds/node_modules/qwik-speak/lib/index.qwik.mjs:37:29)
➤ YN0000:     at AsyncFunction.QwikSpeakProvider_component_useTask_sfbNflx0Y2A (/node_modules/qwik-speak/lib/index.qwik.mjs:123:5)
➤ YN0000:     at async Promise.all (index 0)

I tried to debug but didn't fully get why this happened. One thing I noticed: if I put debug point in node_modules/@builder.io/qwik-city/index.qwik.mjs:759 with v0.103.0 it never hit there while with >=0.104.0 it will hit there constantly.

[robisim74]

I encountered the same problem, but I didn't understand (nor did I investigate) if the problem is with Qwik or with Vite: it seems that suddenly it is not possible to do dynamic imports during the tests.

As a workaround, it is preferable to use raw and eager when importing:

const loadTranslationStub$: LoadTranslationFn = $((lang: string, asset: string) =>
  JSON.parse(
    import.meta.glob('/i18n/**/*.json', { as: 'raw', eager: true })[
    `/i18n/${lang}/${asset}.json`
    ]
  )
);

[ahnpnl]

So it failed on any server$ functions regardless what is inside the server$ function, an example code is

const Wrapper = component$(() => {
            const foo = server$(() => {
                console.warn('here');
            });

            return (
                <>
                    <button
                        data-testid="test-btn"
                        onClick$={foo}
                    >
                        Click me
                    </button>
                </>
            );
 });
const { render, userEvent } = await createDOM();
await render(<Wrapper />);

await userEvent('[data-testid="test-btn"]', 'click');

[robisim74]

So it looks like an issue with server$ inside the test environment.

[ahnpnl]

I reported QwikDev/qwik#4034