"TypeError: expect(...).toBeVisible is not a function" Error in Angular 6 karma Tests

Question

我使用 npm 安装了 jasmine-jquery-matchers 库到我的 Angular 6 应用程序中。运行测试出现以下错误：

ERROR in [at-loader] 
./src/app/landing/components/title/title.component.spec.ts:51:30
    TS2339: Property 'toBeVisible' does not exist on type 'Matchers<any>'.

这是我的测试规格：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TitleComponent } from './title.component';
import { FormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { UserInfoService } from '../../../shared/services/user-info.service';
import {DebugElement} from "@angular/core";
import {By} from "@angular/platform-browser";
import { matchers } from "jasmine-jquery-matchers/dist/jasmine-jquery-matchers" ;

describe('Title Component', () => {
  let component: TitleComponent;
  let fixture: ComponentFixture<TitleComponent>;
  let userInfoService: UserInfoService;
  let el: DebugElement; 
  //const matchers = window['jasmine-jquery-matchers'];

  beforeEach(() => {
    jasmine.addMatchers(matchers);

    TestBed.configureTestingModule({
      imports: [ FormsModule, RouterTestingModule ],
      declarations: [ TitleComponent ],
      providers: [ UserInfoService ]
    });

    fixture         = TestBed.createComponent(TitleComponent);
    component       = fixture.componentInstance;
    userInfoService = TestBed.get(UserInfoService);
  });


  it("should be visible when the user service's isPageTitleEnabled() method returns true", () => {
    el = fixture.debugElement.query(By.css('div.tc-title')); 
    spyOn(<any>UserInfoService.prototype, 'isPageTitleEnabled').and.returnValue(true);
    fixture.detectChanges();
    expect(el.nativeElement.children.length).toEqual(1);
    el = el.query(By.css('span.tc-header-title')); 
    expect(el.nativeElement).toBeVisible();
  });
});

还有其他测试我没有包括在内，因为它们都有效。

这是堆栈跟踪：

TypeError: expect(...).toBeVisible is not a function
            at <Jasmine>
            at UserContext.<anonymous> (webpack:///src/app/landing/components/title/title.component.spec.ts:44 <- config/spec-bundle.js:103558:34)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (webpack:///node_modules/zone.js/dist/zone.js:388 <- config/spec-bundle.js:100764:26)
            at ProxyZoneSpec../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (webpack:///node_modules/zone.js/dist/proxy.js:128 <- config/spec-bundle.js:100252:39)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (webpack:///node_modules/zone.js/dist/zone.js:387 <- config/spec-bundle.js:100763:32)
            at Zone../node_modules/zone.js/dist/zone.js.Zone.run (webpack:///node_modules/zone.js/dist/zone.js:138 <- config/spec-bundle.js:100514:43)
            at runInTestZone (webpack:///node_modules/zone.js/dist/jasmine-patch.js:145 <- config/spec-bundle.js:99817:34)
            at UserContext.<anonymous> (webpack:///node_modules/zone.js/dist/jasmine-patch.js:160 <- config/spec-bundle.js:99832:20)
            at <Jasmine>
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (webpack:///node_modules/zone.js/dist/zone.js:421 <- config/spec-bundle.js:100797:31)
            at Zone../node_modules/zone.js/dist/zone.js.Zone.runTask (webpack:///node_modules/zone.js/dist/zone.js:188 <- config/spec-bundle.js:100564:47)
            at drainMicroTaskQueue (webpack:///node_modules/zone.js/dist/zone.js:595 <- config/spec-bundle.js:100971:35)

也许我需要在 karma.conf.js 中配置一些东西？我确实将其添加为框架：

frameworks: ['jasmine', "jasmine-jquery-matchers"],

如有任何帮助，我们将不胜感激！

罗布

Answer 1

嗯，我找到了我的解决方案。这是一段不平凡的旅程。

在 jasmine-jquery-matchers 库的自定义-typings.d.ts 中，它说：

* You can include your type definitions in this file until you create one for the @types

然后接着说：

// support NodeJS modules without type definitions
declare module '*';

我注意到 jasmine 的 index.d.ts 文件声明了 "jest-jquery-matchers"，所以为了好玩，我也添加了 jasmine-jquery-matchers 的声明。瞧，这奏效了！

有人知道为什么修复了这些错误吗？

罗布

"TypeError: expect(...).toBeVisible is not a function" Error in Angular 6 karma Tests

"TypeError: expect(...).toBeVisible is not a function" Error in Angular 6 karma Tests

unit-testing

jasmine-matchers

karma-jasmine

angular