How to write Unit Tests with Oidc-client Provider. How to mock it?

[tobiashochguertel]

Issue and Steps to Reproduce

I have some pages which need unit tests and those pages are secured with OIDC Provider and so on. Now I don't know how to write the Unit Test to mock the parts and simulate that a user is logged in, and has the roles or not to write a test.

Can someone provide an Example of how to mock the OIDC Provider for Unit testing with vitest or jest? I use Typescript, React, oidc-client (current version), Vite, vitest and react-testing library.

[guillaume-chervet]

Hi @tobiashochguertel , that's a good question. I have the same need for my new app. I will try to build it and enhance documention about it.

[tobiashochguertel]

@guillaume-chervet that would be great. I haven't yet found a solution, only partly with vitest..

vi.mock('../../../node_modules/@axa-fr/react-oidc/dist/index.umd.cjs', async (importOriginal) => {
    console.log(importOriginal);
    const mod = await importOriginal<typeof import('../../../node_modules/@axa-fr/react-oidc/dist/index.d.ts')>();
    return {
        ...mod,
        useOidc: () => ({ isAuthenticated: true, logout: vi.fn(), login: vi.fn(), renewTokens: vi.fn() })
    };
});

But the importOriginal looks like not working because I always get an error message:

Error: Uncaught [Error: [vitest] No "OidcProvider" export is defined on the "../../../node_modules/@axa-fr/react-oidc/dist/index.umd.cjs" mock. Did you forget to return it from "vi.mock"?
If you need to partially mock a module, you can use "importOriginal" helper inside:
]

[tobiashochguertel]

I got it working so far with vitest

        vi.mock('../../../node_modules/@axa-fr/react-oidc/dist/index.umd.cjs', async (importOriginal) => {
            const mod = await importOriginal<typeof import('../../../node_modules/@axa-fr/react-oidc/dist/index.d.ts')>();
            return {
                ...mod.default,
                useOidc: () => ({ isAuthenticated: true, logout: vi.fn(), login: vi.fn(), renewTokens: vi.fn() }),
                useOidcUser: () => ({ oidcUser: 'Tobias Hochguertel', oidcUserLoadingState: OidcUserStatus.Loaded, reloadOidcUser: vi.fn() })
            };
        });

I changed ...mod, to ...mod.default, then everything else what I didn't want to mock was available.