使用 Jest 测试 Angular 时出现“意外的令牌导入”答案

【问题标题】："Unexpected token import" when testing Angular with Jest使用 Jest 测试 Angular 时出现“意外的令牌导入”
【发布时间】：2018-04-25 12:37:39
【问题描述】：

我一直在尝试为某些 Angular 组件设置测试，但我一直遇到问题，因为我的所有组件都使用 ng-lightning，这会导致以下错误：

/angular-lightning-test/node_modules/ng-lightning/ng-lightning.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { NgModule } 来自“@angular/core”；

SyntaxError: 意外的令牌导入

我已经尝试了多种方法来通过 Babel 进行此操作，但我不确定是否需要这样做，因为 Jest 可以在此项目中使用 import 处理所有其他文件。

我使用jest-preset-angular 来处理这些测试的设置。你可以看到它使用的配置here。

我创建了一个非常小的示例项目，您可以在其中看到此错误：

https://github.com/humantree/angular-lightning-test

组件就这么简单：

@Component({
  selector: 'badge',
  template: '<ngl-badge>{{text}}</ngl-badge>'
}) export class BadgeComponent {
  text = 'Test Badge';
}

测试就这么简单（我意识到缺少一个实际的测试，但在此之前仍然会发生错误）：

describe('BadgeComponent', () => {
  let badge: BadgeComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [BadgeComponent],
      imports: [NglModule.forRoot()]
    });

    badge = TestBed.get(BadgeComponent).instance;
  });
});

任何人都可以看到我可以添加到我的 Jest 配置（或其他任何内容）中以解决此错误的任何内容吗？

注意：不管怎样，我还使用 mocha-webpack 在 Mocha 中设置了这些测试运行，并且该设置存在完全相同的问题。

谢谢！

【问题讨论】：

标签： javascript angular jestjs salesforce-lightning

【解决方案1】：

尝试以下方法：

1) 安装以下包：babel-jest、babel-preset-env

2) 在你的项目根目录下添加一个 .babelrc 文件。

{ "presets": ["env"]}

3) 编辑您的 jest.config.js 文件，以便 babel 处理 ng-lightning

{
    "preset": "jest-preset-angular",
    "transform": {
        "^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
        "^.+\\.js$": "babel-jest"
    },
    "transformIgnorePatterns": [
        "node_modules/(?!ng-lightning)"
    ]
}

【讨论】：