Question

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

/angular-lightning-test/node_modules/ng-lightning/ng-lightning.js:1       （{ “对象”：功能（模块，产品出口，要求，__目录名，文件名__，全球，笑话）{进口   来自'@ angular / core'的{NgModule};

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中运行这些测试，并且与该设置存在完全相同的问题。

谢谢！

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

使用Jest

1 个答案: