问题

以下是您的代码的中文翻译：

我的一些单元测试未能成功运行，显示以下错误：

```plaintext
    Jest 遇到了一个意外的标记

    这通常意味着您试图导入 Jest 无法解析的文件，例如它不是普通的 JavaScript。

    默认情况下，如果 Jest 看到了一个 Babel 配置，它将使用它来转换您的文件，忽略 "node_modules"。

    以下是您可以做的：
     • 如果您试图使用 ECMAScript 模块，请参阅 https://jestjs.io/docs/en/ecmascript-modules 了解如何启用它。
     • 要转换部分 "node_modules" 文件，可以在您的配置中指定一个自定义的 "transformIgnorePatterns"。
     • 如果需要自定义转换，请在您的配置中指定一个 "transform" 选项。
     • 如果您只是想模拟非 JS 模块（例如二进制资源），您可以使用 "moduleNameMapper" 配置选项将它们替换成存根。

    在文档中您会找到这些配置选项的更多详细信息和示例：
    https://jestjs.io/docs/en/configuration.html

    详细信息：

    SyntaxError: 意外的标记 (9:80)

      在解析器中抛出 Parser.pp$4.raise (node_modules/vue-template-es2015-compiler/buble.js:2757:13)
      在解析器中抛出 Parser.pp.unexpected (node_modules/vue-template-es2015-compiler/buble.js:646:8)
      在解析器中 Parser.pp$3.parseExprAtom (node_modules/vue-template-es2015-compiler/buble.js:2196:10)
      在解析器中 Parser.<anonymous> (node_modules/vue-template-es2015-compiler/buble.js:6003:24)
      ...

我的 jest 配置如下：

{
    moduleFileExtensions: [
        'js',
        'jsx',
        'json',
        // 告诉 Jest 处理 *.vue 文件
        'vue',
    ],
    transform: {
        // 使用 vue-jest 处理 *.vue 文件
        '^.+\\.vue$': require.resolve('vue-jest'),
        '.+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2|PNG)$':
            'jest-transform-stub',
        '^.+\\.jsx?$': require.resolve('babel-jest'),
    },
    transformIgnorePatterns: ['node_modules/(?!bootstrap)'],
    // 支持源代码中的相同 @ -> src 的别名映射
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
        '\\.(css|sass)$': 'identity-obj-proxy',
    },
    testEnvironment: 'jest-environment-jsdom-fifteen',
    // 快照的序列化程序
    snapshotSerializers: ['jest-serializer-vue'],
    testMatch: [
        '**/tests/unit/**/*.spec.[jt]s?(x)',
        '**/__tests__/*.[jt]s?(x)',
    ],
    // https://github.com/facebook/jest/issues/6766
    testURL: 'http://localhost/',
    watchPlugins: [
        require.resolve('jest-watch-typeahead/filename'),
        require.resolve('jest-watch-typeahead/testname'),
    ]
}

我对如何调试此错误感到困惑，因为它似乎没有指定实际的意外标记（除非是空格），也没有指向任何组件。

<details>
<summary>英文:</summary>

Several of my unit tests are failing to run with the following error:

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:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
 • 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:

SyntaxError: Unexpected token (9:80)

  at Parser.pp$4.raise (node_modules/vue-template-es2015-compiler/buble.js:2757:13)
  at Parser.pp.unexpected (node_modules/vue-template-es2015-compiler/buble.js:646:8)
  at Parser.pp$3.parseExprAtom (node_modules/vue-template-es2015-compiler/buble.js:2196:10)
  at Parser.<anonymous> (node_modules/vue-template-es2015-compiler/buble.js:6003:24)
  ...

My jest config is as follows:
```js
{
    moduleFileExtensions: [
        'js',
        'jsx',
        'json',
        // tell Jest to handle *.vue files
        'vue',
    ],
    transform: {
        // process *.vue files with vue-jest
        '^.+\\.vue$': require.resolve('vue-jest'),
        '.+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2|PNG)$':
            'jest-transform-stub',
        '^.+\\.jsx?$': require.resolve('babel-jest'),
    },
    transformIgnorePatterns: ['node_modules/(?!bootstrap)'],
    // support the same @ -> src alias mapping in source code
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
        '\\.(css|sass)$': 'identity-obj-proxy',
    },
    testEnvironment: 'jest-environment-jsdom-fifteen',
    // serializer for snapshots
    snapshotSerializers: ['jest-serializer-vue'],
    testMatch: [
        '**/tests/unit/**/*.spec.[jt]s?(x)',
        '**/__tests__/*.[jt]s?(x)',
    ],
    // https://github.com/facebook/jest/issues/6766
    testURL: 'http://localhost/',
    watchPlugins: [
        require.resolve('jest-watch-typeahead/filename'),
        require.resolve('jest-watch-typeahead/testname'),
    ]
}

I'm at a loss for how to debug this error when it doesn't seem to specify the actual token that's unexpected (unless it's whitespace) and it doesn't seem to be pointing to any compon

答案1

得分: 2

已修复该问题 - 它是由于在Vue的HTML模板中使用了可选链 (object?.property) 引起的。

我有一个使用以下语法的HTML元素：

<Component :name="data?.name" />

在我的单页面组件的HTML模板中使用?可选链操作符导致了Unexpected token错误，而没有指定?是意外的令牌。

<Component :name="data?.name" />