Sporadically failing specs with version 13.0.2 instead of version 13.0.1

[LukasMachetanz]

Hey everyone!

Using version 13.0.2 instead of 13.0.1 results in sporadically failing specs within an Nrwl/Nx/Angular project using Karma/Jasmine.

    "@ngrx/component": "^13.0.2",
    "@ngrx/component-store": "^13.0.2",
    "@ngrx/effects": "^13.0.2",
    "@ngrx/entity": "^13.0.2",
    "@ngrx/router-store": "^13.0.2",
    "@ngrx/store": "^13.0.2",

Following artefacts are used within the test suite:

import { MockStore, provideMockStore } from "@ngrx/store/testing";
import { MemoizedSelector, MemoizedSelectorWithProps } from "@ngrx/store";
import { provideMockActions } from "@ngrx/effects/testing";
import { ReactiveComponentModule } from "@ngrx/component";

Error:

TypeError: Cannot read properties of undefined (reading '3')
at apply (libs/ad-templates/data-access/src/lib/+state/selectors/campaign-pipelines.selectors.ts:20:89)
at apply (node_modules/@ngrx/store/fesm2020/ngrx-store.mjs:699:30)
at apply (node_modules/@ngrx/store/fesm2020/ngrx-store.mjs:580:39)
at apply (node_modules/@ngrx/store/fesm2020/ngrx-store.mjs:603:43)

Has anyone an idea what could be the reason for the shown error? Are any similar problems known using the mentioned version? The described problem occurs within our project solely updating the NRGX version, therefore I decided to address this problem here.

The Subject Under Test is an Angular component which uses NGRX selectors implemented as "Selector With Props" which are deprecated now. Could this be a possible reason for the experienced problems using the new version?

Any help appreciated.

Greets,
Lukas

[LukasMachetanz]

I had a look at the changes done from 13.0.1 to 13.0.2: 13.0.1...13.0.2

Could the commit 0640085 be the reason for my experienced problems?

Maybe we are doing something wrong which was previously corrected by NGRX itself?

[timdeschryver]

See docs.

Have you added resetSelectors to your test files?
This was previously handled by NgRx, but due to the new behavior of the Angular TestBed (with teardown), NgRx isn't able to do that for you anymore.

  afterEach(() => {
    store?.resetSelectors();
  });

[LukasMachetanz]

@timdeschryver Thank you for the response. The proposed solution fixes our sporadically failing specs. I guess there is no other option than adding the afterEach hook with the proposed implementation within each test-suite, right?

[knikolos]

@timdeschryver Thank you for the response. The proposed solution fixes our sporadically failing specs. I guess there is no other option than adding the afterEach hook with the proposed implementation within each test-suite, right?

If you are using jasmine you can add this in test.ts

jasmine.getEnv().afterEach(() => {
  TestBed.inject(MockStore, null)?.resetSelectors();
});

[LukasMachetanz]

@knikolos Thank you for this suggestion. With this final input the issue is resolved for me. Thanks for the support. :)

[timdeschryver]

Correct but that solution works until the auto teardown option is enabled.

[maldago]

Correct but that solution works until the auto teardown option is enabled.

Hello @timdeschryver ,

I know this is closed but is there somewhere we can track the auto teardown option release?

Thanks

[timdeschryver]

@maldago https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296#1cd7

[daniel-sc]

This issue/solution resolved some bad headaches on my side 🥇
It should be documented as a "breaking change" in the change log here (IMHO).

[timdeschryver]

That's a good idea @daniel-sc , do you want to add this new behavior to the migration guide?

[vojtech-gabriel]

jasmine.getEnv().afterEach(() => {
  TestBed.inject(MockStore, null)?.resetSelectors();
});

There is no afterEach method in Env class.

How did you make this work?

Update:
Okay, turns out that just calling the global jasmine afterEach method is enough. When run outside a describe block, it is applied to every test case.
Following at the end of test.ts file worked.

afterEach(() => {
  getTestBed().inject(MockStore, null)?.resetSelectors();
});

Note that the null default is required, otherwise if you have tests that don't provide MockStore, you'll get "NullInjectorError: No provider for MockStore!" error.