CODEWITHSUNDEEP
reactjsunit-testingnext.jsjestjsfirebase-authentication
user15498557
user15498557

Reputation: 127

Next/Firebase failing Jests export

I'm having an issue with running some Jest tests in my Next.js and Firebase project.

Please excuse me if these are not good unit tests, but I'm mostly just practicing.

The problem When running this test, I get this error:

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from '@firebase/auth';
                                                                                      ^^^^^^
SyntaxError: Unexpected token 'export'

Test file:

import { render, screen } from "@testing-library/react";
import Navbar from "components/Navbar";

describe("Navbar", () => {
  it("renders a navbar", () => {
    render(<Navbar />);
    const navbar = screen.getByRole("navigation", {});

    expect(navbar).toBeInTheDocument();
  });
});

Here is my jest.config.js file

// jest.config.js
const nextJest = require("next/jest");

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ["node_modules", "<rootDir>/"],
  testEnvironment: "jest-environment-jsdom",
  transformIgnorePatterns: ["/node_modules/(?!internmap|delaunator|robust-predicates)"],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

I think this may be similar to this issue, but I can't seem to apply it to my own situation. Jest tests failing on d3 import

I'd really appreciate any help! Thank you.

Upvotes: 4

Views: 567

Answers (1)

Jim Jeffers
Jim Jeffers

Reputation: 17930

I resolved this by mocking the Firebase module and remapping jest to load the mock.

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    /* This is key to preventing the webpack error. */
    '^firebase(.*)$': '<rootDir>/__mocks__/firebaseMock.js',
  },
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

Then for the mock itself I simply kept running jest until I mocked all of the necessary functions that my app was calling:

   // __mocks__/firebaseMock.js
   module.exports = {
      getApps: jest.fn(() => []),
      initializeApp: jest.fn(),
      getApp: jest.fn(),
      getFirestore: jest.fn(() => ({
        collection: jest.fn(),
      })),
      collection: jest.fn(() => ({
        withConverter: jest.fn(),
      })),
    }

At which point my tests could successfully run without issue. I believe you can still overwrite this default mock with jest.mock() inside of individual tests but haven't needed to do that yet for our purposes.

Upvotes: 1

Related Questions