在 firebase/auth 中使用 createUserWithEmailAndPassword 时，Jest 遇到了 Next.js 和 TypeScript 的意外令牌

Question

. Answers to this question are eligible for a +50 reputation bounty. Atticus29 wants to to this question:

Apologies for the long-windedness of the question, which I imagine contributed to its lack of attention; I just wanted to communicate what had been attempted.

I am trying to set up firebase authentication on my Next.js project (using TypeScript), and I believe that I have encountered some configuration issues related to using firebase that are causing my Jest tests to fail.

Here are the relevant config files:

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
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    "^@/components/(.*)$": "<rootDir>/components/$1",
    "^@/pages/(.*)$": "<rootDir>/pages/$1",
  },
  testEnvironment: "jest-environment-jsdom",
};

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

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "firebase.js"],
  "exclude": ["node_modules"]
}

package.json:

{
  "name": "video-annotator",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --watch",
    "test:ci": "jest --ci"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.3",
    "@next/font": "13.1.1",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "eslint-config-next": "13.1.1",
    "firebase": "^9.15.0",
    "next": "13.1.1",
    "react": "^18.2.0",
    "react-dom": "18.2.0",
    "react-intl": "^6.2.5",
    "typescript": "4.9.4"
  },
  "devDependencies": {
    "@jest/globals": "^29.3.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "eslint": "^8.31.0",
    "eslint-plugin-formatjs": "^4.3.9",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.3.1",
    "next-router-mock": "^0.9.1-beta.0",
    "ts-jest": "^29.0.5"
  }
}

And, in some of my attempted solutions below, you may also need to see:

tsconfig.jest.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

I have noticed that my test suite started failing when I added

const userInfo = await createUserWithEmailAndPassword(
          auth,
          email,
          password
        );

to the codebase in pages/create-account/index.tsx around ln. 94.

The displayed error is very strange. The test suite fails because, "Jest encountered an unexpected token".

Additionally, in the details section of the test output, I see:

Details:

.../video-annotator/node_modules/firebase/auth/dist/esm/index.esm.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from '@firebase/auth';
                                                                                  ^^^^^^

SyntaxError: Unexpected token 'export'

  10 | import { Paper } from "@mui/material";
  11 | import { Button } from "@mui/material";
> 12 | import { AuthContext } from "../contexts/authContext";
     |               ^
  13 | import { useContext } from "react";

I am confident that there is nothing wrong with the import { AuthContext } from "../contexts/authContext"; statement, because if I swap that line of code with the one above it, I see this instead:

SyntaxError: Unexpected token 'export'

  10 | import { Paper } from "@mui/material";
  11 | import { AuthContext } from "../contexts/authContext";
> 12 | import { Button } from "@mui/material";
     |               ^

Given my confidence that neither Button nor my AuthContext are the problem and noting that there are no errors in the tests until I comment back in the createUserWithEmailAndPassword call:

const userInfo = await createUserWithEmailAndPassword(
          auth,
          email,
          password
        );,

, I have to conclude that either

1. I have misused the above statement somehow,
2. that something else is happening with the firebase import, or
3. that I have misconfigured jest somehow in a way that it's not playing well with firebase.

I explored the "Jest encountered an unexpected token" part of the error as well:

1. I tried adding "^firebase/auth$": "/node_modules/firebase/auth/dist/esm/index.esm.js", to jest.config.js in the moduleNameMapper and re-running the tests. No change.

2. I used ts-jest and the Rust compiler instead of Babel during setup, so I figured that the provided link to https://jestjs.io/docs/getting-started#using-typescript did not apply to my case.

I did, however try to replace my original jest.config.js from what is seen above to:

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
};

This gave me a new variant of the "Jest encountered an unexpected token" error:

Details:

/Users/mf/Desktop/video-annotator/__tests__/login.test.tsx:39
    return (0, react_1.render)(<react_intl_1.IntlProvider locale={locale} messages={messages}>
                               ^

SyntaxError: Unexpected token '<'

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1449:14). 

This error in turn was similar to an issue reported here , where they recommended splitting the config files into parts in order to prevent an automatic change from "react" to "preserve":

This issue is caused because jsx is not being transformed and jest doesn't know how to parse it. The fix is very simple, in your tsconfig.json you need to set the "jsx" key to "react" rather than "preserve". Unfortunately next's build expects it to be "preserve" and automatically changes it back in tsconfig.json:( The way I got around this was to create a seperate tsconfig.jest.json. Here are the steps:

create a file tsconfig.jest.json with the following contents:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

... 2) configure jest.config.js to use the new tsconfig.jest.json.

I tried this as well, and it did not solve my issue.

I tried a few other suggestions in related SO posts as well, but none of them seemed to help in my particular case.

I'm mostly looking for guidance on what to try next, unless solutions or mistakes immediately jump out a someone. I think that I've made quite a mess of it all trying all of these different solutions.

Should I just switch to using Babel? It seems like there's a bigger community and history with Babel than with ts-jest.

My repo (and the create-account branch I'm currently on) can be found here . You can reproduce the error locally by cloning the repository, checking out the create-account branch, running npm install , and then running npm test . You may also need to create a './key.ts' file a populate it with:

export const secrets = {
  apiKey: "TODO",
  authDomain: "TODO",
  projectId: "TODO",
  storageBucket: "TODO",
  messagingSenderId: "TODO",
  appId: "TODO",
  measurementId: "TODO",
};

On the other hand, authentication is really the first main feature of the project, so I think that it could be relatively straightforward to follow the logic in the repo. without downloading locally.

Thank you very much in advance!

Answer 1

I didn't work much with NexTJS so please pardon me if I'm missing something.

I could get the tests running thanks to this answer just by adding:

module.exports = async () => ({
  ...(await createJestConfig(customJestConfig)()),
  transformIgnorePatterns: [
    '/node_modules/(?!(firebase|@firebase)/)',
  ]
});

And then the full jest.config.js file was like:

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
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    "^@/components/(.*)$": "<rootDir>/components/$1",
    "^@/pages/(.*)$": "<rootDir>/pages/$1",
  },
  testEnvironment: "jest-environment-jsdom",
  
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = async () => ({
  ...(await createJestConfig(customJestConfig)()),
  transformIgnorePatterns: [
    '/node_modules/(?!(firebase|@firebase)/)',
  ]
})

And I got that the tests are all green:)

Test Suites: 2 passed, 2 total
Tests:       13 passed, 13 total
Snapshots:   0 total
Time:        6.104 s
Ran all test suites.

Weirdly the examples from their documentations show that we could add the same pattern in your customJestConfig object.

---

Side note: Please invalidate the secrets of your firebase app and make sure to delete them from your repository.