Host-based testing can't resolve component under karma-typescript (JIT compiler)

[thw0rted]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report ??? 
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[X] Support request ???
[ ] Other... Please describe:

Problem description

I wrote some tests using createHostFactory that worked fine when I built my code using karma-webpack, but I'm trying to switch to karma-typescript and I can't get them working again.

Under karma-webpack, the AngularCompilerPlugin did AOT (Ivy) template compilation, but when I switched to karma-typescript, I had to use the JIT compiler. For non-Spectator tests, I would change

testBed.configureTestingModule({
  providers: [
    // Dependencies, mocks and whatnot
  ],
  declarations: [ HelloComponent ],
});
fixture = testBed.inject(HelloComponent);

to

testBed.configureTestingModule({...})
  .compileComponents()
  .then(() => fixture = testBed.inject(HelloComponent));

This change allowed all the tests to run without problems. For Spectator tests, I didn't need to include a call to configureTestingModule before, but without one I got errors during createHost about un-compiled templates. So, I changed

const createHost = createHostFactory({
  component: HelloComponent,
  providers: [ ... ],
});

beforeEach(() => {
  host = createHost("<foo-component someInput='value'>");
});

to

const createHost = createHostFactory({
  component: HelloComponent,
  declareComponent: false,
});

beforeEach(() => {
  testBed.configureTestingModule({
    providers: [ ... ],
    declarations: [ HelloComponent ],
  )}
    .compileComponents()
    .then(() => host = createHost("<foo-component someInput='value'>"));
});

This fixed the error about uncompiled templates, but now during the createHost call, it fails with an error that it's unable to resolve HelloComponent. The error message includes the entire (compiled) text of HelloComponent inline -- from the linked repro:

        Error: Cannot find component/directive function HelloComponent() {
                this.color = "blue";
                this.title = "Hello :)";
            } in host template 😔

It looks like the template engine is trying to use HelloComponent as an injection token (?) but failing to look it up, even though it's been added to declarations. I've also tried declaring it using createHostFactory, by removing declareComponent: false, and taking it out of the declarations passed to configureTestingModule, but the error is the same.

I tried looking through the docs, both here and at karma-typescript, but I'm running out of ideas. As I said, it worked fine when the tests were bundled with Webpack/AngularCompilerPlugin. I don't know if I'm using Spectator wrong, using karma-typescript wrong, or if there's a bug in one or the other of the libraries that prevents this from working.

Minimal reproduction of the problem with instructions

Repro here, based on the karma-typescript Angular starter project.

Environment

Angular version: 12.2.2
 

[NetanelBasal]

My knowledge of this package is limited, and this is beyond the scope of Spectator. We encourage you to create a PR and explain any changes you would like to make. Moving to discussions for now.