testing an Angular component with a ngrx store, not causing actions to be triggered

Question

I have a few angular components that I want to test and make sure that they are working.

The idea of the component in it's simplest form is to list datapoints. Each of these datapoints should be removable via and API.

So the flow as it is setup would be

• ngrx store is populated with datapoints from the api
• an angular component renders all points as a list
• A user clicks the delete button which dispatches a delete action
• an effect listens to this action and calls an api to delete it, and dispatches a deleted action to the store once done
• A reducer listens to the deleted action and removes the point from the store
• The component re-renders and the point is removed

I have all of this working on it's own, but as said I want to create a test for it using testing-library. The issue is that no matter what I try, I can't seem to get the point to disappear.

here is how I render the component:

    render(DatapointPageComponent, {
      providers: [
        provideMockStore({
          initialState: { ...APPLICATION_STATE },
        }),
        {
          provide: DatapointService,
          useValue: {
            deleteIntegration() {
              console.log('mock delete');
              return of(true);
            },
          },
        },
      ],
      declarations: [DatapointListComponent],
      imports: [
        AppModule,
        StoreModule.forRoot({}),
        EffectsModule.forRoot(DatapointEffects),
      ],
      schemas: [NO_ERRORS_SCHEMA],
    });

Can add as well, that I do not get the mock delete console log that I am expecting.

Is there something obvious that I am doing wrong?

Answer 1

I'm having to assume provideMockStore is coming from @ngrx/store/testing because you didn't specify it and left out your imports in your code.

Given that likelihood, if you read the documentation that's the normal behavior

https://ngrx.io/guide/store/testing

Note: All dispatched actions don't affect the state, but you can see them in the Actions stream.