属性 'toHaveStyle' 在类型 'JestMatchers<Element>' 上不存在

Question

我有一个颜色指令，可以将背景颜色设置为卡片。我不明白如何通过 Jest

进行测试

  @Input('appColor') public color: string;

  constructor(
    private element: ElementRef,
    private render: Renderer2,
  ) {
  }

  public ngAfterViewChecked(): void {
    this.setCategoryColor();
  }

  private setCategoryColor(): void {
    this.render.setStyle(this.element.nativeElement, 'background-color', this.color);
  }

测试

 it('create testing html template and check set color', () => {
       instance.ngAfterViewChecked();

    expect(spectator.element).toHaveStyle({
      backgroundColor: 'red',
    });
  });

Answer 1

我是这样解决问题的：

指令

  public ngAfterViewInit(): void {
    this.setCategoryColor();
    this.changeDetector.detectChanges();
  }

  private setCategoryColor(): void {
    this.render.setStyle(this.element.nativeElement, 'background-color', this.color);
  }

directive.spec.ts

describe('UnsubscribeDirective', () => {
  let spectator: SpectatorDirective<ColorDirective>;
  let instance: ColorDirective;

  const createDirective = createDirectiveFactory({
    directive: ColorDirective,
    template: `<div appColor="#fff">Testing Highlight Directive</div>`,
  });

  beforeEach(() => {
    spectator = createDirective();
    instance = spectator.directive;
  });

  describe('should create directive', () => {
    it('should be defined', () => {
      expect(instance).toBeDefined();
    });
  });

  describe('ngAfterViewInit', () => {
    it('should be defined', () => {
      expect(instance.ngAfterViewInit).toBeDefined();
    });
  });

  it('set background-color', () => {
    instance.ngAfterViewInit();

    expect(spectator.element).toHaveStyle({
      backgroundColor: '#fff',
    });
  });
});

属性 'toHaveStyle' 在类型 'JestMatchers<Element>' 上不存在

Property 'toHaveStyle' does not exist on type 'JestMatchers<Element>'

angular-directive

jestjs

angular