Vitest not able to mock OidcProvider

[Fraulk]

Hello, I replaced an oidc package with your project and it works perfectly, but it broke my test because of this error:

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

I also saw that issue #1343 and tried the mock the author did, but it now gives me another error:

TypeError: Cannot read properties of undefined (reading 'match')

[Fraulk]

In the end, I just removed the OidcProvider so my tests can run

[guillaume-chervet]

hi @Fraulk , for the moment i did not find a solution. I set up oidc component in higher component that I does not know how to test.

[giammyisjammy]

This would be very interesting to know. I came up with the same solution as @Fraulk

In case someone needs a working snippet here it is:

// src/components/Providers/index.ts
import { OidcProvider, OidcSecure } from '@axa-fr/react-oidc'
import { HelmetProvider } from 'react-helmet-async'

import { config } from '@/common/config/oidc'

import { DesignSystemProvider } from './DesignSystemProvider'

import type React from 'react'

export interface ProvidersProps {
  children: React.ReactNode
}
export function AppProviders({ children }: ProvidersProps) {
  return (
    // whatever other providers you need e.g. Redux
    <HelmetProvider>
      <OidcProvider configuration={config}>
        <OidcSecure>
          <DesignSystemProvider>{children}</DesignSystemProvider>
        </OidcSecure>
      </OidcProvider>
    </HelmetProvider>
  )
}

export default AppProviders

// src/components/Providers/test.ts
import { HelmetProvider } from 'react-helmet-async'

import { DesignSystemProvider } from './DesignSystemProvider'
import { ProvidersProps } from '.'

import type React from 'react'

export function TestProviders({ children }: ProvidersProps) {
  return (
    // same but without OidcProvider
    <HelmetProvider>
      <DesignSystemProvider>{children}</DesignSystemProvider>
    </HelmetProvider>
  )
}

export default Providers

This way I can switch providers with import path:

import Providers from '@/common/components/Providers' // AppProviders
import Providers from '@/common/components/Providers/test' // TestProviders

However this would not help with setting up E2E tests because the app would break as soon as it encounters the first invocation of any @axa-fr/react-oidc hooks. In unit test environment one could circumvent the issue by mocking the @axa-fr/react-oidc module but AFAIK only some E2E frameworks allow to mock modules (i.e. Cypress) while some others don't (i.e. Playwright).

It would be nice to know how to handle these scenarios, possibly without relying on features of external libraries.