Angular 16 ProvideMockStore() breaking TestBed after using this.store.selectSignal()

Question

After upgrading an Angular project to v.16 and refactoring RxJS to start using Signals, I started using the new function this.store.selectSignal().

Does someone else has ever faced the following error?

TypeError: Cannot read properties of undefined (reading 'changes')
    at apply (http://localhost:9876/_karma_webpack_/webpack:/src/app/core/components/changelog/store/changelog.selectors.ts:20:15)
    at apply (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm2022/ngrx-store.mjs:793:30)
    at apply (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm2022/ngrx-store.mjs:673:39)
    at apply (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm2022/ngrx-store.mjs:696:43)
    at apply (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm2022/ngrx-store.mjs:796:36)
    at selector (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm2022/ngrx-store.mjs:673:39)
    at ComputedImpl.computation (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngrx/store/fesm2022/ngrx-store.mjs:535:31)
    at ComputedImpl.recomputeValue (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:2510:29)
    at ComputedImpl.onProducerUpdateValueVersion (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:2496:14)
    at ComputedImpl.signal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:2532:14)

Here is the test:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {provideMockStore} from '@ngrx/store/testing';

import {ChangelogComponent} from './changelog.component';
import {ModalComponent} from '../modal/modal/modal.component';

describe('ChangelogComponent', () => {
    let component: ChangelogComponent;
    let fixture: ComponentFixture<ChangelogComponent>;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports: [FontAwesomeModule, ModalComponent, ChangelogComponent],
            providers: [provideMockStore()],
        }).compileComponents();

        fixture = TestBed.createComponent(ChangelogComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

The component has a facade:

    changes = this.facade.changes;

    constructor(private facade: ChangelogFacade) {}

In the facade I'm getting the signal from the selector. changes = this.store.selectSignal(getChangelog);

I expected my tests to run succeffully. At first, I was using a regular selector with an Observable and | async in the template.

Answer 1

The fix was initializing the mock store data.

providers: [provideMockStore({
  initialState: {
    changelog: {
      changes: [
        {
          tagName: 'v1.0.0',
          date: '2021-01-01',
          changes: ['Initial release'],
        },
      ],
      isLoading: false,
    },
  },
})]