I have been working on integrating Firebase authentication into my Next.js project (using TypeScript), but it appears that there are configuration issues with Firebase causing my Jest tests to fail.
Here are the key configuration files:
jest.config.js :
const nextJest = require("next/jest");
const createJestConfig = nextJest({
// Specify the path to your Next.js app to load next.config.js and .env files in the test environment
dir: "./",
});
// Add any custom configurations for Jest
const customJestConfig = {
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
moduleNameMapper: {
// Manage module aliases
"^@/components/(.*)$": "<rootDir>/components/$1",
"^@/pages/(.*)$": "<rootDir>/pages/$1",
},
testEnvironment: "jest-environment-jsdom",
};
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"
},
...
}
In my troubleshooting, I encountered an error related to:
const userInfo = await createUserWithEmailAndPassword(
auth,
email,
password
);
in the file pages/create-account/index.tsx around line 94.
The error message indicates an unexpected token issue when Jest encounters the code snippet above.
Further details revealed a SyntaxError related to 'export' within a Firebase file:
.../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'
...
I have tried various solutions, including modifying jest.config.js and setting up ts-jest, but the issue persists. Any guidance on next steps would be greatly appreciated.
Should I consider switching to Babel instead of ts-jest given the challenges faced?
You can find my repository with the problematic branch here. To replicate the error, clone the repo, switch to the create-account branch, install dependencies with `npm install`, and run `npm test`. Don't forget to create a './key.ts' file as indicated in the README.
Thank you in advance for any assistance!