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"],

任何帮助将不胜感激！

rob

Answer 1

好吧，我找到了解决方案。这是一段漫长的旅程。

在jasmine-jquery-matchers库的custom-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 '*';

我注意到茉莉花的index.d.ts文件声明了“ jest-jquery-matchers”，所以为了娱乐，我也为茉莉花-jquery-matchers添加了一个声明。低低，这行得通！

有人知道为什么可以修复错误吗？

Rob

“ TypeError：expect（...）。toBeVisible不是函数” Angular 6 karma测试中的错误

1 个答案: