Unit testing angular component which uses input.required

44 Views Asked by At

I'm trying to unit test one of my components which has

 regexCtrl = input.required<FormControl<string>>({alias: 'regex'});

After some Googling, this was, more or less, what I thing should be to correct way

fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.componentRef.setInput('regex', new FormControl(''));
fixture.detectChanges();

Which gives an error:

console.error
    NG0303: Can't set value of the 'regex' input on the 'MyComponent' component. Make sure that the 'regex' property is annotated with @Input() or a mapped @Input('regex') exists.

The weird thing is, is that the error suggests that I need to annotate the input with @Input, which is not needed anymore (I'm using angular 17.0.3)

Just in case the alias didn't work as expected in my spec file, I also tried to set regexCtrl , which resulted in the same error

Any suggestions how this is done now?

UPDATE: Found a solution which at least works and seems a step into the right direction (only the cast feels off)

 component.regexCtrl = computed(() => new FormControl('')) as InputSignal<FormControl<string>>;

UPDATE2: After updating it works. I think it was related to the jest dependencies (I update angular, jest and nx so I'm not really sure which one did the trick). Now I can just do:

 fixture.componentRef.setInput('regex', new FormControl());
0

There are 0 best solutions below