Help required with Unit tests

[madtag]

Hi all I have to write unit tests for my application using your module. I am using Jest and React Testing Library. While the test passes the warnings below do not make for nice viewing from the manager.

Main is where there is the Authprovider wrapping the APP like this:

   <AuthProvider authConfig={authConfig}>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <Suspense fallback={SuspenseFallback}>
          <App />
        </Suspense>
        <alertsComponent.Alerts />
      </ErrorBoundary>
    </AuthProvider>

When I render Main in the test file like this:

  const info = render(
    <Provider store={store}>
      <Router history={history}>
        <Main {...otherProps} />
      </Router>
    </Provider>
  )

I get the following error when running the test:

console.warn
      Passed login state must be of type 'string'. Received 'undefined'. Ignoring value...

      at login (node_modules/react-oauth2-code-pkce/dist/AuthContext.js:82:21)
      at node_modules/react-oauth2-code-pkce/dist/AuthContext.js:221:17
      at commitHookEffectListMount (node_modules/react-dom/cjs/react-dom.development.js:23150:26)
      at commitPassiveMountOnFiber (node_modules/react-dom/cjs/react-dom.development.js:24931:11)
      at commitPassiveMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24891:9)
      at commitPassiveMountEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24878:7)
      at commitPassiveMountEffects (node_modules/react-dom/cjs/react-dom.development.js:24866:3)
      at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:27039:3)

    console.error
      TypeError: Cannot read properties of undefined (reading 'getRandomValues')
          at getRandomInteger (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-oauth2-code-pkce\dist\pkceUtils.js:17:19)
          at generateRandomString (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-oauth2-code-pkce\dist\pkceUtils.js:28:33)
          at C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-oauth2-code-pkce\dist\authentication.js:20:67
          at Generator.next (<anonymous>)
          at C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-oauth2-code-pkce\dist\authentication.js:8:71
          at new Promise (<anonymous>)
          at Object.<anonymous>.__awaiter (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-oauth2-code-pkce\dist\authentication.js:4:12)
          at redirectToLogin (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-oauth2-code-pkce\dist\authentication.js:18:12)
          at login (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-oauth2-code-pkce\dist\AuthContext.js:85:46)
          at C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-oauth2-code-pkce\dist\AuthContext.js:221:17
          at commitHookEffectListMount (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-dom\cjs\react-dom.development.js:23150:26)
          at commitPassiveMountOnFiber (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-dom\cjs\react-dom.development.js:24931:11)
          at commitPassiveMountEffects_complete (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-dom\cjs\react-dom.development.js:24891:9)
          at commitPassiveMountEffects_begin (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-dom\cjs\react-dom.development.js:24878:7)
          at commitPassiveMountEffects (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-dom\cjs\react-dom.development.js:24866:3)
          at flushPassiveEffectsImpl (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-dom\cjs\react-dom.development.js:27039:3)
          at flushPassiveEffects (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-dom\cjs\react-dom.development.js:26984:14)
          at C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\react-dom\cjs\react-dom.development.js:26769:9
          at workLoop (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\scheduler\cjs\scheduler.development.js:266:34)
          at flushWork (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\scheduler\cjs\scheduler.development.js:239:14)
          at performWorkUntilDeadline (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\scheduler\cjs\scheduler.development.js:533:21)
          at Timeout.task [as _onTimeout] (C:\Users\mark.tagliaferro\Downloads\React_Projects\flashcalls-frontend\gui\node_modules\jsdom\lib\jsdom\browser\Window.js:516:19)
          at listOnTimeout (node:internal/timers:564:17)
          at processTimers (node:internal/timers:507:7)

      at node_modules/react-oauth2-code-pkce/dist/AuthContext.js:86:21

[soofstad]

If you mock the subtle crypto module, as you can see has been done in the tests for this library, this error would go away. However, testing the authentication part of your application is not trivial, so you should consider if it's worth your time. You could also setup the localStorage so that the library detects the user as already logged in.

Sorry for the slow response. Summer holidays 😎✌️