使用Jest测试Angular时出现“意外的token import”错误

Question

我一直在尝试为一些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 } from '@angular/core';

SyntaxError: 意外的token import

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

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

我创建了一个非常小的示例项目，你可以在其中看到这个错误: 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中设置了这些测试，并且在该设置中也遇到了完全相同的问题。

谢谢！

- Christopher Oldfield

Answer 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)"
    ]
}

- Alexandre Emond