使用 Jest 进行 ElementRef angular 单元测试时出错

Question

当我使用 Jest 运行单元测试时出现错误，我在 Angular 中有应用程序的组件，当我在构造函数“ElementRef”中有时，它会引发以下错误：

Incrementador Component › should create

Can't resolve all parameters for IncrementadorComponent: (?).

  at syntaxError (../packages/compiler/src/util.ts:108:17)
      at Array.forEach (<anonymous>)
      at Array.forEach (<anonymous>)
  at src/app/recovered/components/incrementador/incrementador.component.spec.ts:28:8
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:386:30)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:117:43)     
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:385:36)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:143:47)

只要构造函数中没有 ElementRef 参数，测试就可以正常运行。 但是当我戴上它时，测试失败并出现上面列出的错误： Cannot resolve all parameters for IncrementadorComponent: (?) 。

import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';

@Component({
  selector: 'app-incrementador',
  templateUrl: './incrementador.component.html',
  styleUrls: ['./incrementador.component.scss']
})
export class IncrementadorComponent implements OnInit {

  @ViewChild('txtProgress') txtProgress: ElementRef;

  @Input('nombre') leyenda: string = 'Leyenda';
  @Input() progreso: number = 50;

  @Output('actualizaValor') cambioValor: EventEmitter<number> = new EventEmitter();

  constructor( private elementRef: ElementRef) { }
  // constructor( ) { }

  ngOnInit() { }

  onChanges( newValue: number ) {

    if ( newValue >= 100 ) {
      this.progreso = 100;
    }else if ( newValue <= 0 ) {
      this.progreso = 0;
    }else {
      this.progreso = newValue;
    }
    this.txtProgress.nativeElement.value = this.progreso;
    this.cambioValor.emit( this.progreso );
  }

  cambiarValor( valor: number ) {

    if ( this.progreso >= 100 && valor > 0 ) {
      this.progreso = 100;
      return;
    }
    if ( this.progreso <= 0 && valor < 0 ) {
      this.progreso = 0;
      return;
    }
    this.progreso = this.progreso + valor;
    this.cambioValor.emit( this.progreso );
  }
}

import { ComponentFixture, inject, TestBed } from '@angular/core/testing';

import { IncrementadorComponent } from './incrementador.component';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { ElementRef, NO_ERRORS_SCHEMA } from '@angular/core';

export class MockElementRef extends ElementRef {
  constructor() { super(undefined); }
}


describe('Incrementador Component', () => {
  let component: IncrementadorComponent;
  let fixture: ComponentFixture<IncrementadorComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ IncrementadorComponent ],
      imports: [ FormsModule ],
      providers: [
        {
          provide: ElementRef,
          useClass: MockElementRef
        }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
    fixture = TestBed.createComponent(IncrementadorComponent);
    component = fixture.componentInstance;
  });

  test('should create', () => {
    expect(component).toBeTruthy();
  });

我澄清说，使用 Jasmine 和 Karma 不会发生这种情况。 Jest 只是发生在我身上。

Answer 1

解决了！！！

你好，这里有2件事可以解决你的问题：

• 在运行测试之前总是运行 ngcc。 这是必需的，以便 Angular 使用正确的 Ivy 编译器。
• 在 tsconfig.spec.json 中设置 emitDecoratorMetadata: true。

感谢https://github.com/ahnpnl

https://github.com/thymikee/jest-preset-angular/issues/774#issuecomment-772881086-