业力单元测试/存储 - 状态未定义

Posted 2023-03-16

【中文标题】业力单元测试/存储 - 状态未定义

【英文标题】：Karma unit test / STORE - state undefined

【发布时间】：2018-09-05 06:44:41

【问题描述】：

运行应用程序时一切正常，但在帐户单元测试中似乎没有任何状态或我的状态已启动。有什么明显的我做错了吗？这是错误。

测试错误：

index.js 中的创建选择器返回一个带有未定义参数的函数，但仅在 karma 测试期间。

Account.component.ts

import  Component, OnInit, OnDestroy, ChangeDetectionStrategy  from '@angular/core';
import * as fromAuth from '../../../auth/store/reducers';
import  Store  from '@ngrx/store';
import  Subscription  from 'rxjs/Subscription';

@Component(
  selector: 'app-account',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-sign-up-form
      [user]="user"
      [account]="true"
      [pending]="pending$ | async"
      [errorMessage]="error$ | async">
    </app-sign-up-form>
  `,
  styles: []
)
export class AccountComponent implements OnInit, OnDestroy 
  redirectSubs: Subscription;
  user: object;
  pending$ = this.store.select(fromAuth.getLoginPagePending);
  error$ = this.store.select(fromAuth.getLoginPageError);

  constructor(
    public store: Store<fromAuth.State>,
  )  

  ngOnInit() 
    this.redirectSubs = this.store
      .select(fromAuth.getUser)
      .subscribe(user => 
        this.user = user;
      );
  

  ngOnDestroy() 
    this.redirectSubs.unsubscribe();
  

Account.component.spec.ts

import  async, ComponentFixture, TestBed  from '@angular/core/testing';

import  AccountComponent  from './account.component';
import  SignUpFormComponent  from '../../components/sign-up-form/sign-up-form.component';
import  ReactiveFormsModule  from '@angular/forms';

import  Store, StoreModule  from '@ngrx/store';
import * as fromAuth from '../../store/reducers';


describe('AccountComponent', () => 
  let component: AccountComponent;
  let fixture: ComponentFixture<AccountComponent>;
  let store: Store<fromAuth.State>;

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      declarations: [ AccountComponent, SignUpFormComponent ],
      imports: [
        ReactiveFormsModule,
        StoreModule.forRoot( fromAuth )
      ]
    )
      .compileComponents();
  ));

  beforeEach(() => 
    fixture = TestBed.createComponent(AccountComponent);
    component = fixture.componentInstance;
    store = fixture.debugElement.injector.get(Store);
    fixture.detectChanges();
  );

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

Auth.Reducer.ts

import * as auth from '../actions/auth.actions';
import  User  from '../../models/user';
import  AuthState as State, AuthStateRecord  from './auth.state';
export  State as AuthState ;

export const initialState: State = new AuthStateRecord() as State;

export function reducer(state = initialState, action: auth.Actions): State 
  switch (action.type) 
    case auth.LOGIN_SUCCESS: 
      return state.merge(
        loggedIn: true,
        user: action.payload.user,
      ) as State;
    

    case auth.LOGOUT: 
      return initialState;
    

    default: 
      return state;
    
  


export const getLoggedIn = (state: State) => state.loggedIn;
export const getUser = (state: State) => state.user;

Auth.state.ts

import  Map, Record  from 'immutable';
import  User  from '../../models/user';

export interface AuthState extends Map<string, any> 
  loggedIn: boolean;
  user: User | null;


export const AuthStateRecord = Record(
  loggedIn: false,
  user: null,
);

授权/index.ts

import  createSelector, createFeatureSelector  from '@ngrx/store';
import * as fromRoot from '../../../core/store/reducers/root.reducer';
import * as fromAuth from './auth.reducer';
import * as fromLogin from './login.reducer';

export interface AuthState 
  status:  fromAuth.AuthState;
  loginPage: fromLogin.LoginState;


export interface State extends fromRoot.State 
  auth: AuthState;


export const reducers = 
  status: fromAuth.reducer,
  loginPage: fromLogin.reducer,
;


export const selectAuthState = createFeatureSelector<AuthState>('auth');

这里的“状态”是未定义的...

export const selectAuthStatusState = createSelector(
  selectAuthState,
  (state: AuthState) => state.status
);

export const getLoggedIn = createSelector(
  selectAuthStatusState,
  fromAuth.getLoggedIn
);

export const getUser = createSelector(
  selectAuthStatusState,
  fromAuth.getUser);

export const selectLoginPageState = createSelector(
  selectAuthState,
  (state: AuthState) => state.loginPage
);

export const getLoginPageError = createSelector(
  selectLoginPageState,
  fromLogin.getError
);

export const getLoginPagePending = createSelector(
  selectLoginPageState,
  fromLogin.getPending
);

【问题讨论】：

从第一眼看到错误，我猜你可能需要模拟一个 Observable 或两个...

我也有同样的问题，你解决了吗？

遇到同样的问题有什么解决办法吗？

有人解决了这个问题吗？

【参考方案1】：

尝试在规范文件中将 imports 数组更改为 [ReactiveFormsModule, StoreModule.forRoot(), StoreModule.forFeature('auth', fromAuth)]。