JEST 和 AGM 模块的意外令牌导出答案

【问题标题】：Unexpected token export for JEST & AGM moduleJEST 和 AGM 模块的意外令牌导出
【发布时间】：2019-02-13 00:36:00
【问题描述】：

我正在使用 Jasmine 为 Angular 编写测试。在测试使用 AGM 的组件时，出现以下错误：

C:\Path\node_modules\@agm\core\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename, global,jest){export * from './directives';
         ^^^^^^
SyntaxError: Unexpected token export

知道我的测试 component.spec.ts 是空的，还没有测试任何东西。

【问题讨论】：

标签： angular jasmine jestjs

【解决方案1】：

这个解决方案应该有效：

你需要在你的开发依赖中安装 3 个新的包（如果你没有的话）：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

然后你需要在根项目中创建一个名为.babelrc的文件并添加这一行：

{ "presets": ["@babel/preset-env"] }

下一步是添加一个 npm 脚本，该脚本将运行 babel 来编译 ES2015 中的 js 文件。打开您的 package.json 将其添加到脚本部分：

"compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env"

这个脚本必须在 npm install 之后运行，所以在你的 package.json 的脚本部分添加这一行：

"postinstall": "npm run compile_@agm_core",

一旦你这样做了，运行 npm install 你会看到类似的东西：

babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env 使用 Babel 成功编译了 35 个文件。

第二部分是测试使用 AGM 导入的组件。我实际上不知道你是如何使用它的，但这是逻辑：

my-agm-component.ts ：

import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { MapsAPILoader } from '@agm/core';

@Component({
    selector: 'app-my-agm-component',
    templateUrl: './my-agm.component.html'
})
export class MyAgmComponent implements OnInit {
    public latitude: number = 39.8282;
    public longitude: number = -98.5795;
    public zoom: number = 4;
    @ViewChild('search')
    public searchElementRef: ElementRef;

    constructor(private mapsAPILoader: MapsAPILoader, private ngZone: NgZone) {
    }

    ngOnInit(): void {
        this.loadGMAP();
    }

    private async loadGMAP(): Promise<void> {
        await this.mapsAPILoader.load();
        this.listenGMAPSearch();
    }

    private listenGMAPSearch(): void {
        const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
            types: ['address']
        });

        autocomplete.addListener('place_changed', () => {
            this.ngZone.run(() => {
                this.onPlaceChanged(autocomplete.getPlace());
            });
        });
    }

    private onPlaceChanged(place: google.maps.places.PlaceResult): void {
        if (!place.geometry) {
            return;
        }

        // handle addr from place.geometry here
    }
}

my-agm-component.spec.ts ：

我使用的是 mocha 而不是开玩笑，但这就是我测试组件初始化的方式。您应该能够在没有意外令牌导出错误的情况下运行您的规范文件。

import { NgZone } from '@angular/core';
import { stubClass, expect, stub } from '../../../../../../test';
import { MyAgmComponent } from './my-agm.component';

describe('MyAgmComponent', () => {
    let component: MyAgmComponent, mapsAPILoader: any, ngZone: NgZone;

    beforeEach(() => {
        // mocking mapsAPILoader
        mapsAPILoader = <any>{load: () => Promise.resolve({})};

        // spying load method call
        stub(mapsAPILoader, 'load').returns(null);

        // initializing component
        component = new MyAgmComponent(
            mapsAPILoader,
            ngZone = stubClass(NgZone)
        );
    });

    it('should init the component', () => {
        return expect(component).to.not.be.undefined;
    });
});

我知道这是一篇很长的帖子，但我希望它对您有所帮助。该解决方案基于this github thread。

【讨论】：