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

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

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.

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();
});

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
]
...