angular: Cannot set signal input in tests with non-standard setup (Stackblitz/Jest preset without JIT transform) - NG0303

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Description

In unit tests using this function to set signal based inputs

    fixture = TestBed.createComponent(ParagraphBlockComponent);
    component = fixture.componentInstance;
    fixture.componentRef.setInput('title', 'my title');

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

this is the component:

@Component({
  standalone: true,
  selector: 'paragraph-block',
  templateUrl: './paragraph-block.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ParagraphBlockComponent {
  title = input<string>();
}

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

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

Please provide the environment you discovered this bug in (run `ng version`)

Angular 17.1.0

Anything else?

No response

About this issue

Original URL
State: closed
Created 5 months ago
Reactions: 2
Comments: 21 (12 by maintainers)

Most upvoted comments

Thanks @TarsisDragomir, no worries. Thank you for giving feedback early. I’m in contact with the Jest preset maintainer to help enable signal inputs.

devversion on Jan 23, 2024

I have exactly same issue when using the new signal input api that 17.1 introduced. Using jest for testing but cannot use componentRef.setInput anymore (get same error as reporter of this issue). I am using ‘alias’; tried both the name and the alias but none of them work. It really looks that it fails because it no longer has the @Input() annotation. Somebody changed this thread to a stackblitz issue, but not sure if that is correct. Or maybe I am missing something that I should have upgraded/changed also after going to 17.1. Any help is welcome. Thanks!

$project = input<Project>(getEmptyProject(), { alias: 'project' });

TarsisDragomir on Jan 23, 2024

I never know how Stackblitz’ compilation pipeline works (the legacy one, without Webcontainers), but the behavior is expected if the custom JIT transform that was added in 17.1 is not being used.

JoostK on Jan 21, 2024

@dapperdandev The official jest builder should have worked since we launched signal inputs. Do you see any issues? If so, please create an issue and link here.

devversion on Mar 29, 2024

Closing because:

we’ve collaborated with Jest to support signal inputs, queries, model etc — this now works
we’ve collaborated with Stackblitz to support non-Webcontainer instances— this now works

https://github.com/thymikee/jest-preset-angular/pull/2303 https://stackblitz.com/edit/ng-jasmine-wec9ye?file=src%2Fapp%2Fapp.component.ts

devversion on Mar 8, 2024