NextJS Jest SyntaxError: Unexpected token 'export'

Question

I'm trying to test a page in NextJs that has a firebase context provider that initializes firebase and another that controls access to firebase/auth. In the Auth Context I import things I need directly, like so:

import {
  getAuth,
  User,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  UserCredential,
  signOut,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";

But Jest doesn't seem to like it, because I get this error:

SyntaxError: Unexpected token 'export'

      15 |   createUserWithEmailAndPassword,
      16 |   UserCredential,
    > 17 |   signOut,
         |               ^
      18 |   signInWithPopup,
      19 |   GoogleAuthProvider,
      20 | } from "firebase/auth";

I do have ts-jest installed, and I saw a fix somewhere using babel but I'm not too fond of using babel with NextJS, is there another way to fix this issue?

Answer 1

You could use next-firebase-auth

it also shows how to set your app for jest:

// Create a mock FirebaseUser instance with the fields that you use.
const mockFirebaseUser = {
  displayName: 'Banana Manana',
  // ... other fields from firebaseUser that you may use
}

/**
 * Build and return a dummy AuthUser instance to use in tests.
 *
 * @arg {boolean} isLoggedIn - Pass `false` to mimic a logged out user.
 * @returns {AuthUserContext} - A mocked AuthUser instance, with 'serialize' added.
 */
const getMockAuthUser = (isLoggedIn = true) => ({
  id: isLoggedIn ? 'abcd1234' : null,
  email: isLoggedIn ? 'banana@banana.com' : null,
  emailVerified: isLoggedIn,
  getIdToken: jest.fn(async () => (isLoggedIn ? 'i_am_a_token' : null)),
  clientInitialized: isLoggedIn,
  firebaseUser: isLoggedIn ? mockFirebaseUser : null,
  signOut: jest.fn(),
  serialize: jest.fn(() => 'serialized_auth_user'),
})

export default getMockAuthUser