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

Posted 2023-05-08

【中文标题】使用 Jest 测试 Angular 时出现“意外的令牌导入”

【英文标题】："Unexpected token import" when testing Angular with Jest

【发布时间】：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 中设置了这些测试运行，并且该设置存在完全相同的问题。

谢谢！

【参考方案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)"
    ]