Angular ngrx store testing `The feature name "storeOne" does not exist in the state`

Question

After I gone through the below video for ngrx isolated testing: John Crowson - Using MockStore in NgRx 8 | AngularUP

I tried to implement the same with my simple project. But I am getting error which I am not able to understand. any one help me to get solved?

it's very big help for me.

test 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';

describe('ShellHomeComponent', () => {

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

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

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

        mockStore = TestBed.get(Store);

    }));

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

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

    it('should display loading as true', () => {
        const expected = cold('loading', { loading: false, items: [{ name: '3' }] });
        expect(component.loading).toBeObservable(expected);
    });

});

after run I am getting the following error:

ShellHomeComponent › should display loading as true

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

    - Expected
    + Received

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

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

      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:43: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.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        6.321s

Careaga

Answer 1

I had a similar problem. My tests were failing because state in my reducer was undefined. I was also getting a warning in the console that The feature name "my-feature" does not exist in the state's root, therefore createFeatureSelector cannot access it. Be sure it is imported in a loaded module using StoreModule.forRoot('my-feature', ...) or StoreModule.forFeature('my-feature', ...).

The problem was that I was providing the mock store for the feature when I needed to provide the mock store for the entire app.

Try changing provideMockStore({initialState: loadingState}) to something like provideMockStore<State>({initialState: {shellComponent: loadingState}}) where State is the name of your application's global state (make sure that you import State from your application's state.ts file, not @ngrx/store), and shellComponent is the name of the feature you're testing.

Amnesty

Answer 2

To build off Danny's answer, you will do this:

      providers: [
        provideMockStore({
          initialState: {
            'addInvestigationModal': initialState
          }
        })
      ]

However, I still had an error An error was thrown in afterAll error properties: Object({ longStack: 'TypeError: Cannot read property 'property_name' of undefined.

I fixed this by adding

afterEach(() => {
    fixture.destroy();
  });

Superannuation

Answer 3

I was getting this same warning as @Danny:

The feature name "some-feature" does not exist in the state's root, therefore createFeatureSelector cannot access it. Be sure it is imported in a loaded module using StoreModule.forRoot('some-feature', ...) or StoreModule.forFeature('some-feature', ...).

I forget that I had to add the module into the import list.

const someFeatureModule = StoreModule.forFeature('some-feature', someFeatureReducer);
...
@NgModule({
    imports: [
       someFeatureModule  <-- this was missing
    ]
        ...

Bursitis