I'm working on a directive that emits events on an HTML Input element. The following works exactly as I want when running the app and testing it out
When an arrow key is pressed in the input, or the enter key, the Output event fires in the component just as I want it to.
So it's all technically working as I want it to. I don't have to subscribe in the directive to fromEvent and use the EventEmitter to emit on arrow presses or enter presses (which is what I was doing before). The issue comes when testing the component.
Here's my test file and the error that I'm seeing in the terminal when running the test:
Is there a way to keep the directive code as is, and write the tests properly so the error doesn't occur?
Everything I can see says to use { static: true } in the ViewChild decorator, but since this ElementRef is injected in the constructor, I'm not sure how to do that.

Here's a StackBlitz with the directive working for reference.

https://stackblitz.com/edit/angular-qfkxhf?file=src/main.ts

Directive Event as Output - StackBlitz

A angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js.

StackBlitz

@prestonjlamb I think the `mockElementRef` needs more of the API mocked. Take a look at the `fromEvent` source: https://github.com/ReactiveX/rxjs/blob/7.8.0/src/internal/observable/fromEvent.ts#L233

It's checking the target that you pass in for event listener and emitter methods. If it can't find them, it errors out with `Invalid event target`.

rxjs/fromEvent.ts at 7.8.0 · ReactiveX/rxjs

A reactive programming library for JavaScript. Contribute to ReactiveX/rxjs development by creating an account on GitHub.

GitHub