SyntaxError: Unexpected token : 在 TypeScript 中使用 Aurelia 运行玩笑测试时答案

【问题标题】：SyntaxError: Unexpected token : when running jest test with Aurelia in TypeScriptSyntaxError: Unexpected token : 在 TypeScript 中使用 Aurelia 运行玩笑测试时
【发布时间】：2019-05-17 12:04:03
【问题描述】：

刚刚使用 aurelia-cli 创建了一个新的 TypeScript Aurelia 项目。使用 import 安装 bootstrap 并在 app.ts 中包含 bootstrap css。

import 'bootstrap/dist/css/bootstrap.min.css';
import '../../static/assets/css/app.scss';
import { routes } from './routes';

interface IApp {
  message: string;
}

export class App implements IApp{
  message = 'Hello World!';
}

现在当我运行测试时，我得到如下错误的意外令牌

yarn test

# and the output contains

yarn run v1.12.3
$ nps test
nps is executing `test` : nps test.jest
nps is executing `test.jest` : node node_modules/rimraf/bin.js test/coverage-jest && jest
ts-jest[config] (WARN) TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 FAIL  test/unit/app.spec.ts
  ● Test suite failed to run

    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 hav`enter code here`e 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.

SyntaxError: Unexpected token :



  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
  at Object.<anonymous> (src/home/app.ts:163:1)

我在 app.ts 中注释了 import bootstrap.css 行，一切运行正常。

我是否遗漏了一些配置以允许我在 .ts 组件中使用 css 导入？

这是我在 package.json 中开玩笑的部分

"jest": {
    "verbose": true,
    "roots": [
      "<rootDir>/test"
    ],
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "testRegex": "\\.spec\\.(ts|js)$",
    "testPathIgnorePatterns": [
      "build",
      "dist",
      "sample"
    ],
    "setupFiles": [
      "<rootDir>/test/jest-pretest.ts"
    ],
    "testEnvironment": "node",
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,ts}",
      "!**/*.spec.{js,ts}",
      "!**/node_modules/**",
      "!**/test/**"
    ],
    "coverageDirectory": "<rootDir>/test/coverage-jest",
    "coverageReporters": [
      "json",
      "lcov",
      "text",
      "html",
      "clover"
    ]

  },

【问题讨论】：

你在使用 webpack 吗？
最近有一篇关于jsdom jest和Aurelia的博客。也许它可以帮助您解决您遇到的问题？ discourse.aurelia.io/t/…

标签： javascript typescript unit-testing jestjs aurelia

【解决方案1】：

我遇到了同样的错误。我通过将 tsconfig.json 中的模块 compilerOption 从“esnext”更改为“commonjs”解决了我的问题。 Why am I getting “Unexpected token import” on one webpack project but not the other?

【讨论】：