TypeError: reducerManager.addFeatures is not a function

Question

I am trying to write the test with spec file, butting an error as:

TypeError: Cannot read property 'loading' of undefined - not able to understand either fix it out.

any one help me here?

here is my spec.ts file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { provideMockStore, MockStore } from '@ngrx/store/testing';
import { ShellHomeComponent } from './shell-home.component';
import { StoreOne } from './../../models';
import { Store, select } from '@ngrx/store';
import { cold } from 'jasmine-marbles';
import { StoreModule } from '@ngrx/store';
import { reducer } from './../../state/reducer/reducer-storeOne';

describe('ShellHomeComponent', () => {

    let fixture: ComponentFixture<ShellHomeComponent>;
    let mockStore: MockStore<StoreOne>;
    let component: ShellHomeComponent;

    const loadingState = {
        loading: true,
        items: [{ name: '1' }]
    } as StoreOne;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ ShellHomeComponent ],
            providers: [provideMockStore({ initialState: loadingState })]
        })
        .compileComponents();

        mockStore = TestBed.get(Store);

    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ShellHomeComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });


    it('should display loading as true', () => {
        const expected = cold('a', { a: true });
        expect(component.loading).toBeObservable(expected);
    });

});

error I am getting:

expect(received).toEqual(expected) // deep equality

    - Expected
    + Received

      Array [
        Object {
          "frame": 0,
          "notification": Notification {
    -       "error": undefined,
    -       "hasValue": true,
    -       "kind": "N",
    -       "value": true,
    +       "error": [TypeError: Cannot read property 'loading' of undefined],
    +       "hasValue": false,
    +       "kind": "E",
    +       "value": undefined,
          },
        },
      ]

      44 |     it('should display loading as true', () => {
      45 |         const expected = cold('a', { a: true });
    > 46 |         expect(component.loading).toBeObservable(expected);
         |                                   ^
      47 |     });
      48 |
      49 | });

      at compare (node_modules/jasmine-marbles/bundles/jasmine-marbles.umd.js:379:33)
      at src/app/module1/shell/shell-home/shell-home.component.spec.ts:46:35

  console.warn node_modules/@ngrx/store/bundles/store.umd.js:608
    The feature name "storeOne" does not exist in the state, therefore createFeatureSelector cannot access it.  Be sure it is imported in a loaded module using StoreModule.forRoot('storeOne', ...) or StoreModule.forFeature('storeOne', ...).  If the default state is intended to be undefined, as is the case with router state, this development-only warning message can be ignored.

my componet.ts file:

import { Component, OnInit, OnChanges } from '@angular/core';
import { StoreOne, Item } from './../../models';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import * as slices from './../../state';
import * as actions from './../../state/actions';

@Component({
    selector: 'app-shell-home',
    templateUrl: './shell-home.component.html',
    styleUrls: ['./shell-home.component.scss']
})
export class ShellHomeComponent implements OnInit {

    constructor(private store: Store<StoreOne>) {}

    items: Observable<Item[]>;
    loading: Observable<boolean>;

    ngOnInit() {

        this.store.dispatch(actions.Items());
        this.items = this.store.pipe(select(slices.getItems));
        this.loading = this.store.pipe(select(slices.getLoad));

        this.store.subscribe(state => console.log(state));
       //{ "storeOne": { "loading": true, "items": [ {"name": "1" }, { "name": "2"} ] }}

    }


}

UPDATE

my loading state updated to like the follow:

const loadingState = { storeOne: { loading: true, items: [{ name: 1 }] } } as StoreOne;

but getting an error as:

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    src/app/module1/shell/shell-home/shell-home.component.spec.ts:16:26 - error TS2352: Conversion of type '{ storeOne: { loading: boolean; items: { name: number; }[]; }; }' to type 'StoreOne' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
      Type '{ storeOne: { loading: boolean; items: { name: number; }[]; }; }' is missing the following properties from type 'StoreOne': loading, items

    16     const loadingState = { storeOne: { loading: true, items: [{ name: 1 }] } } as StoreOne;
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Answer 1

In my case the problem was the structure of the imports. I had imported a Module with

StoreModule.forFeature('name', nameReducer)

inside a module with:

StoreModule.forFeature('name2', name2Reducer)

The code works fine, but when i test it fails.

The solution was import what a need from the module inside the test declarations insted of the module.

Answer 2

Your code unnecessarily uses techniques for both a unit test and an integration test. The correct solution depends on the goal for your test:

• If your goal is to write an integration test (testing your component with it's live dependencies), import forRoot:

TestBed.configureTestingModule({
  declarations: [ ShellHomeComponent ],
  imports: [StoreModule.forRoot({ storeOne: reducer })]
  // no need to use mock store for an integration test, import your reducer using `forRoot`
})

• If your goal is to write a unit test (mocked store), which I believe it is, provide the MockStore:

TestBed.configureTestingModule({
  declarations: [ ShellHomeComponent ],
  providers: [provideMockStore({ initialState: loadingState 
  // no need to import the `StoreModule` in a unit test, `provideMockStore` will do all the setup
})

At AngularUP, I gave a talk on unit test vs integration tests, as well as MockStore.