Is it possible to implement the AuthState TypeScript Interface in the react-oidc-context Node module for Next.js testing purposes?

Question

We have a Next.js app that uses the react-oidc-context Node module, as we are using ADFS for authentication.

Currently, I am trying to write unit tests using Vitest, and am getting this error:

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

Which comes from this in our index.jsx page:

if (!auth.isAuthenticated) {
  // return "loading" page
}
return (
  // return "working" page
);

Tracing that back, it comes from this custom hook we wrote:

const auth = useOidcAuth();

Which comes from this import:

import { useAuth as useOidcAuth } from "react-oidc-context";

Which comes from this export in react-oidc-context.d.ts:

export declare const useAuth: () => AuthContextProps;

Which comes from this interface in react-oidc-context.d.ts:

export declare interface AuthContextProps extends AuthState {
  // ...
}

Which comes from this interface in react-oidc-context.d.ts:

export declare interface AuthState {
  /**
   * See [User](https://authts.github.io/oidc-client-ts/classes/User.html) for more details.
   */
  user?: User | null;
  /**
   * True when the library has been initialized and no navigator request is in progress.
   */
  isLoading: boolean;
  /**
   * True while the user has a valid access token.
   */
  isAuthenticated: boolean;
  /**
   * Tracks the status of most recent signin/signout request method.
   */
  activeNavigator?:
    | "signinRedirect"
    | "signinPopup"
    | "signinSilent"
    | "signoutRedirect"
    | "signoutPopup"
    | "signoutSilent";
  /**
   * Was there a signin or silent renew error?
   */
  error?: Error;
}

I need to mock or implement that AuthState interface so I can "fake" an authenticated log-in to proceed with testing.

Is this possible, and how would I go about doing this?

Did you try in your test to just mock the custom useAuth hook like described in this other SO question: stackoverflow.com/q/60270013/8583669? You could just return the object { isAuthenticated: true }. — johannchopin
– johannchopin, Commented Apr 23, 2024 at 12:04
@johannchopin Those examples are using Jest, whereas I am using Vitest. — Brian
– Brian, Commented Apr 23, 2024 at 14:58
@Brian Yes, however, the Vitest also possesses almost all necessary functions, and moreover, they have been bestowed with similar designations. — rozsazoltan
– rozsazoltan, Commented Apr 24, 2024 at 13:29

rozsazoltan · Accepted Answer · 2024-04-24 10:12:57Z

1

Vi Functions - Vitest Docs
Mock Functions - Vitest Docs

vi.mock() is used for mocking modules, functions, or objects during tests, allowing you to control their behavior and simulate different scenarios.

import { it, vi } from 'vitest';
import { useAuth as useOidcAuth } from 'react-oidc-context';

vi.mock('react-oidc-context', () => {
  return {
    // It doesn't matter if you renamed it to useOidcAuth upon import, the original one needs to be mocked.
    useAuth: () => ({ 
      isLoading: false,
      isAuthenticated: true,
    }),
  };
});

it('user is authenticated', () => {
  const auth = useOidcAuth();
  expect(auth.isAuthenticated).toBeTruthy();
});

edited Apr 24, 2024 at 10:12

answered Apr 24, 2024 at 9:34

rozsazoltan

18.2k8 gold badges49 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to implement the AuthState TypeScript Interface in the react-oidc-context Node module for Next.js testing purposes?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related