Angular严格模式下Ngrx新版带参Selector如何用Jasmine Mock？

解决方法 #

你可以通过两种方式构造符合MemoizedSelector类型要求的返回值，兼容Angular严格模式校验：

方式1：用NgRx原生createSelector生成合法Selector（推荐）

直接调用NgRx自带的createSelector生成标准的MemoizedSelector实例，不需要手动补全属性，类型天然匹配：

import * as contextSelector from '@core/store/selectors/context.selectors';
import { createSelector } from '@ngrx/store';
import { ContextState } from '你项目中ContextState的定义路径';

// 假设需要mock返回的固定值是mock-scope
const mockReturnValue = 'mock-scope';

spyOn(contextSelector, 'getCurrentScope').and.returnValue(
  createSelector(
    (state: ContextState) => state,
    () => mockReturnValue
  )
);

如果需要根据传入的arg参数动态返回不同的mock值，可以改成callFake写法：

spyOn(contextSelector, 'getCurrentScope').and.callFake((arg: string) => 
  createSelector(
    (state: ContextState) => state,
    () => `mock-${arg}`
  )
);

方式2：手动构造符合类型的Mock Selector

如果不想依赖createSelector，可以手动补全MemoizedSelector要求的所有属性，满足类型校验：

import * as contextSelector from '@core/store/selectors/context.selectors';
import { MemoizedSelector } from '@ngrx/store';
import { ContextState } from '你项目中ContextState的定义路径';

const mockReturnValue = 'mock-scope';
const mockSelector: Partial<MemoizedSelector<ContextState, string>> = jasmine.createSpy()
  .and.returnValue(mockReturnValue);
// 补全MemoizedSelector必填属性
mockSelector.release = () => void 0;
mockSelector.projector = () => mockReturnValue;
mockSelector.setResult = () => void 0;
mockSelector.clearResult = () => void 0;

spyOn(contextSelector, 'getCurrentScope').and.returnValue(mockSelector as MemoizedSelector<ContextState, string>);

内容的提问来源于stack exchange，提问作者pred