3

我一直在尝试为一些 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 ' @角/核心';

SyntaxError：意外的令牌导入

我已经尝试了多种方法来通过 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 设置了这些测试mocha-webpack，并且在该设置中遇到了完全相同的问题。

谢谢！

4

1 回答 1

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)"
    ]
}
于 2018-05-04T22:11:32.750 回答