Angular click event Dom Unit Test with Jest

Question

I am trying to test a simple click event from a simple button component. With karma + jasmine, it is very straight forward, but I do not get it with jest.

Here is the button component I want to test:

import { Component, EventEmitter, OnInit, Output } from '@angular/core'; @Component({ selector: 'ui-button', styleUrls: ['./button.component.scss'], templateUrl: './button.component.html', }) export class ButtonComponent implements OnInit { @Output() public click = new EventEmitter<void>(); constructor() {} public ngOnInit() {} }

<button type="button" class="btn btn-primary" click="click.emit($event)"> <ng-content></ng-content> </button>

Now I want to test, if the EventEmitter is firing, when I click the button:

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ButtonComponent } from './button.component'; describe('ButtonComponent', () => { let component: ButtonComponent; let fixture: ComponentFixture<ButtonComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ButtonComponent], }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(ButtonComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should fire a click event', (done) => { component.click.subscribe((event: any) => { expect(event).toBeDefined(); done(); }); const htmlButton: HTMLButtonElement = fixture.nativeElement.querySelector('button'); htmlButton.click(); fixture.detectChanges(); }); });

Test fails, because the event is never firing as you can see in my log output:

 FAIL libs/ui/src/lib/button/button.component.spec.ts (9.668s) ● ButtonComponent › should fire a click event Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error: 31 | }); 32 | > 33 | it('should fire a click event', (done) => { | ^ 34 | component.click.subscribe((event: any) => { 35 | expect(event).toBeTruthy(); 36 | done(); at new Spec (../../node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22) at env.(anonymous function) (../../node_modules/jest-preset-angular/zone-patch/index.js:84:27) at src/lib/button/button.component.spec.ts:33:3 at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:391:26) at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/dist/zone.js:150:43) at Suite.<anonymous> (../../node_modules/jest-preset-angular/zone-patch/index.js:40:21) at env.(anonymous function) (../../node_modules/jest-preset-angular/zone-patch/index.js:69:27) at Object.<anonymous> (src/lib/button/button.component.spec.ts:4:1)

What do I need to change, so that my event is firing?

Martin Choraine · Accepted Answer · 2019-07-19 12:35:11Z

1

I don't understand how it could works with karma/jasmine ?

I think that's because of your usage of event emitter :

<button type="button" class="btn btn-primary" (click)="click.emit($event)"> <ng-content></ng-content> </button>

Otherwise your test seems to be good

answered Jul 19, 2019 at 12:35

Martin Choraine

2,4513 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Florian Leitgeb Over a year ago

Ok thanks for pointing this out, but it works in the browser on manual click. But of course you are right. The thing is, it is still not working and still giving me the same Timeout.

Martin Choraine Over a year ago

And if you try to call fixture.detectChanges(); before clicking on the button ?

Martin Choraine Over a year ago

Ok sorry, didn't see it. So now try to use debugElement instead of nativeElement to query elements : fixture.debugElement.query(By.css('button')).nativeElement

Florian Leitgeb Over a year ago

Already tried this. Also tried to dispatchEvent() or triggerEventHandler() with all those different elements.

Martin Choraine Over a year ago

Just to be sure : have you wrapped in click with parenthesis in your template ? I've seen that you've updated your question with .emit($event) but not with parenthesis

|

Collectives™ on Stack Overflow

Angular click event Dom Unit Test with Jest

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related