时间戳

首页 > 解决方案 > Firebase 数据库出现意外令牌错误

typescript - Firebase 数据库出现意外令牌错误

问题描述

我在 TypeScript、Next.js 中使用 jest 并尝试对一些 Firebase 身份验证方法进行单元测试。我总是收到导入错误，不知道为什么。我尝试了一些这样的设置，但没有奏效。

这是错误信息。

● 测试套件未能运行

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

[Path to the file]
import firebase from "firebase/app";
^^^^^^

SyntaxError: Cannot use import statement outside a module

  1 | import { expect } from "@jest/globals";
  2 | import { fail } from "assert";
> 3 | import firebase from "../../../common/firebase/firebase";
    | ^
  4 | 
  5 | test("signUp", () => {
  6 |     return firebase.auth().createUserWithEmailAndPassword("test@test.com", "password")

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
  at Object.<anonymous> (src/services/auth/signup/signUpService.unit.test.ts:3:1)

这是我的示例测试文件 firebase.unit.test.ts：

import { expect } from "@jest/globals";
import { fail } from "assert";
import firebase from "../../../common/firebase/firebase";

test("signUp", () => {
    return firebase.auth().createUserWithEmailAndPassword("test@test.com", "password")
        .then(response => expect(response).toBeDefined())
        .catch(error => fail("error"));
});

firebase.js：

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
        apiKey: "{value}",
        authDomain: "{value}",
        databaseURL: "{value}",
        projectId: "{value}",
        storageBucket: "{value}",
        messagingSenderId: "{value}",
        appId: "{value}",
    };

if (firebase.apps.length === 0) {
    firebase.initializeApp(firebaseConfig);
}

export default firebase;

tsconfig.json：

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

jest.config.js：

module.exports = {
    "roots": [
        "<rootDir>/src"
    ],
    "testMatch": [
        "**/__tests__/**/*.+(ts|tsx|js)",
        "**/?(*.)+(spec|test).+(ts|tsx|js)"
    ],
    "transform": {
        "^.+\\.(ts|tsx)$": "ts-jest"
    },
}

任何意见，将不胜感激。谢谢你。

标签： typescriptfirebasejestjs

解决方案

文件扩展名应该是js而不是ts...

我将文件从“firebase.js”重命名为“firebase.ts”，错误消失了。

推荐阅读