Angular ngrx 存储测试`功能名称 "storeOne" 在状态中不存在`

Question

在我看完下面的 ngrx 隔离测试视频后： John Crowson - Using MockStore in NgRx 8 | AngularUP

我尝试用我的简单项目实现相同的功能。但是我收到了我无法理解的错误。有人帮我解决吗？

对我帮助很大

测试ts文件：

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

});

在运行之后出现以下错误：

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

我遇到了类似的问题。我的测试失败了，因为我的 reducer 中的 state 未定义。我也在控制台中收到警告 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', ...).

问题在于，当我需要为 整个应用程序提供模拟商店时，我正在为功能提供模拟商店。

尝试将 provideMockStore({initialState: loadingState}) 更改为类似 provideMockStore<State>({initialState: {shellComponent: loadingState}}) 的内容，其中 State 是应用程序全局状态的名称（确保从应用程序的 state.ts 文件，而不是 @ngrx/store)，并且 shellComponent 是您正在测试的功能的名称。

Answer 2

要建立 Danny 的答案，您需要这样做：

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

但是，我还是报错了An error was thrown in afterAll error properties: Object({ longStack: 'TypeError: Cannot read property 'property_name' of undefined。

我通过添加

解决了这个问题

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

Answer 3

我收到了与相同的警告：

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', ...).

我忘了我必须将模块添加到导入列表中。

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

Angular ngrx 存储测试`功能名称 "storeOne" 在状态中不存在`

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

angular8

ngrx-store

angular-test

ngrx-store-8.0