createComponentFactory dynamic parameters not working

[anikets43]

trying to make unit test reusable, I'm passing parameters to createComponentFactory which doesn't work

function createComponent(param): SpectatorFactory {
    return createComponentFactory({
        component: AdminConfigDetailsComponent,
        declarations: [AdminConfigDetailsComponent],
        imports: [AppModule, SharedModule.forRoot(), HomePageModule],
        providers: [
            { provide: HttpBackend, useClass: HttpBackendStub },
            {
                provide: ActivatedRoute,
                useValue: {
                    params: of({ id: 1 }),
                    snapshot: {
                        queryParams: of({}),
                        data: {
                            entity: param,
                        },
                    },
                    queryParams: of({}),
                },
            },
        ],
    });
}

it('test suite' , () =>{
    spectator = createComponent('myEntity')();
})

Error: 'beforeEach' should only be used in 'describe' function

[pcafstockf]

@anikets43 This is (IMO) a significant limitation of Spectator.
However, there is a not-so-great workaround.

Disclaimer:
I've previously only used angular-testing-library, which (like Spectator) hides all the house keeping around TestBed. So I don't have a great understanding of how TestBed works.
It would be great if someone on the Spectator team would elaborate and/or correct any mistakes in my explanation below, but I noticed you asked this question more than 3 months ago so I'll give it my best.

All the examples for Spectator have the createComponentFactory call at the same level of scope as the beforeEach and afterEach calls (inside describe). I may have missed it in the documentation, but this appears to be a fundamental requirement of Spectator (something to do with TestBed setup, although angular-testing-library manages to work around this somehow).

In your case, the createComponentFactory call is inside the scope of your createComponent function. This violates the scope constraint mentioned above. createComponentFactory does something under the hood which causes Jasmine to believe it is a beforeEach function, and since that is inside your createComponent function, you get

Error: 'beforeEach' should only be used in 'describe' function

Again, my explanation may be a little off, but hopefully you get the general idea.

I worked around this using a combination of globals and providers with useFactory instead of useValue.
Here is a possible modification to your code:

let globalParam;
let spectatorFactory = createComponentFactory({
  component: AdminConfigDetailsComponent,
  declarations: [AdminConfigDetailsComponent],
  imports: [AppModule, SharedModule.forRoot(), HomePageModule],
  providers: [
    {provide: HttpBackend, useClass: HttpBackendStub},
    {
      provide: ActivatedRoute,
      useFactory: () => { //  <--- won't be invoked until its time to *actually* provide
        return {
          params: of({id: 1}),
          snapshot: {
            queryParams: of({}),
              data: {
              entity: globalParam,   //  <--- initialized by createComponent
            },
          },
          queryParams: of({}),
        };
      }
    },
  ],
});
function createComponent(param): SpectatorFactory {
  globalParam = param;   // Initialize the param the ActivatedRoute provider factory will use
  return spectatorFactory();  // Invoke the factory to create the component.
}
it('test suite', () => {
  let spectator = createComponent('myEntity');
});