Jest 遇到了 NUXT 打字稿的意外标记

Question

已经搜索了两天，尝试了很多答案，但找不到解决方案。任何线索？ 下面是我的配置文件。请帮忙？ jest.config.js

module.exports = {
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/$1',
        '^~/(.*)$': '<rootDir>/$1',
        '^vue$': 'vue/dist/vue.common.js',
    },
    moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
    transform: {
        '^.+\\.ts$': 'ts-jest',
        '^.+\\.js$': 'babel-jest',
        '.*\\.(vue)$': 'vue-jest',
    },
    collectCoverage: true,
    collectCoverageFrom: [
        '<rootDir>/components/**/*.vue',
        '<rootDir>/pages/**/*.vue',
    ],
};

.babelrc

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ],
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

package.json

{
    "name": "myApp",
    "version": "1.0.0",
    "private": true,
    "jest": {
        "verbose": true
    },
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "generate": "nuxt generate",
        "start": "nuxt start",
        "lint": "npm run lint:js && npm run lint:style",
        "lint:fix": "npm run lint:js-fix && npm run lint:style-fix",
        "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
        "lint:js-fix": "npm run lint:js -- --fix",
        "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
        "lint:style-fix": "npm run lint:style -- --fix",
        "test": "jest"
    },
    "dependencies": {
        "@nuxtjs/axios": "^5.13.1",
        "@types/jest": "^26.0.23",
        "core-js": "^3.14.0",
        "nuxt": "^2.15.3",
        "nuxt-property-decorator": "^2.9.1"
    },
    "devDependencies": {
        "@babel/plugin-transform-modules-commonjs": "^7.14.5",
        "@commitlint/cli": "^12.0.1",
        "@commitlint/config-conventional": "^12.0.1",
        "@nuxt/types": "^2.15.3",
        "@nuxt/typescript-build": "^2.1.0",
        "@nuxtjs/eslint-config-typescript": "^6.0.0",
        "@nuxtjs/eslint-module": "^3.0.2",
        "@nuxtjs/stylelint-module": "^4.0.0",
        "@nuxtjs/vuetify": "^1.11.3",
        "@vue/test-utils": "^1.1.3",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^27.0.2",
        "eslint": "^7.22.0",
        "eslint-config-prettier": "^8.1.0",
        "eslint-plugin-nuxt": "^2.0.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-vue": "^7.7.0",
        "jest": "^26.6.3",
        "prettier": "^2.3.1",
        "sass": "~1.32.13",
        "standard-version": "^9.3.0",
        "stylelint": "^13.12.0",
        "stylelint-config-prettier": "^8.0.2",
        "stylelint-config-sass-guidelines": "^8.0.0",
        "stylelint-config-standard": "^22.0.0",
        "stylelint-order": "^4.1.0",
        "stylelint-scss": "^3.19.0",
        "ts-jest": "^26.5.4",
        "vue-jest": "^3.0.4"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "ES2018",
        "module": "ESNext",
        "moduleResolution": "Node",
        "lib": [
            "ESNext",
            "ESNext.AsyncIterable",
            "DOM"
        ],
        "esModuleInterop": true,
        "allowJs": true,
        "sourceMap": true,
        "strict": true,
        "noEmit": true,
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "./*"
            ],
            "@/*": [
                "./*"
            ]
        },
        "types": [
            "@nuxt/types",
            "@nuxtjs/axios",
            "@types/node"
        ]
    },
    "exclude": [
        "*.config.js",
        "dist",
        "node_modules",
        ".nuxt",
    ]
}

错误信息 Test suite failed to run Jest 遇到了意外的令牌 这通常意味着您正在尝试导入 Jest 无法解析的文件，例如它不是纯 JavaScript。 默认情况下，如果 Jest 看到 Babel 配置，它将使用它来转换您的文件，而忽略“node_modules”。 以下是您可以执行的操作： • 如果您尝试使用ECMAScript 模块，请参阅https://jestjs.io/docs/en/ecmascript-modules 了解如何启用它。 • 要转换一些“node_modules”文件，您可以在配置中指定自定义“transformIgnorePatterns”。 • 如果您需要自定义转换，请在配置中指定“转换”选项。 • 如果您只是想模拟您的非 JS 模块（例如二进制资产），您可以使用“moduleNameMapper”配置选项将它们存根。 您将在文档中找到这些配置选项的更多详细信息和示例： https://jestjs.io/docs/en/configuration.html 详情：

 SyntaxError: Unexpected token ] in JSON at position 804
        at JSON.parse (<anonymous>)

  at parse (node_modules/tsconfig/src/tsconfig.ts:195:15)
  at readFileSync (node_modules/tsconfig/src/tsconfig.ts:181:10)
  at Object.loadSync (node_modules/tsconfig/src/tsconfig.ts:151:18)
  at find (node_modules/vue-jest/lib/load-typescript-config.js:33:39)
  at loadTypescriptConfig (node_modules/vue-jest/lib/load-typescript-config.js:73:26)
  at compileTypescript (node_modules/vue-jest/lib/compilers/typescript-compiler.js:9:20)
  at processScript (node_modules/vue-jest/lib/process.js:23:12)
  at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:42:18)
  at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:464:35)

Answer 1

经过几天的研究和调试，我终于自己解决了这个问题。 参考本博客https://www.damirscorner.com/blog/posts/20200717-TestingJsxComponentsWithJestInNuxjsS.html

1.我添加了 babel.config.js

module.exports = {
    env: {
        test: {
            presets: [
                ['@vue/cli-plugin-babel/preset'],
                [
                    '@babel/preset-env',
                    {
                        targets: {
                            node: 'current',
                        },
                    },
                ],
            ],
        },
    },
};

2。将“排除”从 tsconfig.json 值更改为（仅顺序差异）

 "exclude": [
        "*.config.js","node_modules", ".nuxt", "dist"]
    }

3.将 typescript 降级为“3.8.3”，将 babel-jest 降级为“^26.0.0”，（支持的版本将从错误消息中显示）