Question

我正在尝试用Jest following this article测试@ ngrx / Effect，但无论如何我都会遇到相同的错误。我也遵循的official doc也无济于事。我不明白我在这里做错了什么：（

角度：6.1.0

ngrx：6.1.0

我也在使用@ nrwl / nx（6.3.0）

我的规格文件：

describe('AuthenticationEffects', () => {
  let actions: Observable<any>;
  let effects: AuthenticationEffects;
  let authenticationService: AuthService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [],
      providers: [
        AuthenticationEffects,
        provideMockActions(() => actions),
        {
          provide: AuthService,
          useValue: {
            login: jest.fn(),
            logout: jest.fn()
          }
        }
      ]
    });
  });

  beforeEach(() => {
    effects = TestBed.get(AuthenticationEffects);
    authenticationService = TestBed.get(AuthService);
  });

  it('should be created', () => {
    expect(effects).toBeTruthy();
  });
});

笑话输出

  ● AuthenticationEffects › should be created

    TypeError: Cannot read property 'getComponentFromError' of null

      at TestBed.Object.<anonymous>.TestBed._initIfNeeded (../../packages/core/testing/src/test_bed.ts:351:46)      at TestBed.Object.<anonymous>.TestBed.get (../../packages/core/testing/src/test_bed.ts:431:10)      at Function.Object.<anonymous>.TestBed.get (../../packages/core/testing/src/test_bed.ts:197:25)      at Object.<anonymous> (libs/authentication/src/lib/store/effects/authentication.effect.spec.ts:50:23)
  ● AuthenticationEffects › should be created

    expect(received).toBeTruthy()

    Received: undefined

      53 |
      54 |   it('should be created', () => {
    > 55 |     expect(effects).toBeTruthy();
         |                     ^
      56 |   });
      57 |


      at Object.<anonymous> (libs/authentication/src/lib/store/effects/authentication.effect.spec.ts:55:21)

编辑1

更多线索！

jest.config.js

module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'jest-preset-angular/preprocessor.js'
  },
  resolver: '@nrwl/builders/plugins/jest/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  collectCoverage: true,
  coverageReporters: ['html']
};

Package.json与玩笑相关的配置和依赖项

[...]
"jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/jest/setupJest.ts",
    "globals": {
      "ts-jest": {
        "tsConfigFile": "tsconfig.spec.json"
      },
      "__TRANSFORM_HTML__": true,
      "testResultsProcessor": "./node_modules/jest-html-reporter"
    },
    "collectCoverageFrom": [
      "{apps|libs}/**/src/**/*.ts",
      "!jest/*.ts",
      "!{apps|libs}/**/src/**/*module.ts",
      "!apps/**/src/environments/*.ts",
      "!apps/**/src/main.ts",
      "!apps/**/src/polyfills.ts"
    ],
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "index.ts"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 60,
        "functions": 60,
        "lines": 60,
        "statements": -20
      }
    },
    "moduleNameMapper": {
      "@sk-frontend/(.*)": "<rootDir>/libs/$1"
    }
  },
  "jest-html-reporter": {
    "pageTitle": "Your test suite",
    "outputPath": "coverage/index.html",
    "includeFailureMsg": false
  },
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/pwa": "^0.8.1",
    "@angular/router": "^6.1.0",
    "@angular/service-worker": "^6.1.0",
    "@ngrx/effects": "^6.1.0",
    "@ngrx/entity": "^6.1.0",
    "@ngrx/router-store": "6.1.0",
    "@ngrx/store": "^6.1.0",
    "@nrwl/nx": "6.3.0",
    "core-js": "^2.5.4",
    "js-sha256": "^0.9.0",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/bazel": "^6.1.7",
    "@angular/cli": "6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@ngrx/schematics": "^6.1.0",
    "@ngrx/store-devtools": "^6.1.0",
    "@nrwl/builders": "6.3.0",
    "@nrwl/schematics": "6.3.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "^23.0.0",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-marbles": "^0.3.1",
    "jasmine-spec-reporter": "~4.2.1",
    "jest": "^23.0.0",
    "jest-preset-angular": "6.0.0",
    "jsonwebtoken": "^8.3.0",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngrx-store-freeze": "0.2.4",
    "prettier": "1.13.7",
    "protractor": "^5.4.1",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
[...]

模块

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    StoreModule.forFeature('authentication', fromAuthentication.reducer),
    EffectsModule.forFeature([AuthenticationEffects])
  ],
  providers: [
    {
      provide: AUTHENTICATION_CONFIG,
      useValue: authenticationConfigDefault
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthenticationTokenInterceptor,
      multi: true
    }
  ]
})
export class AuthenticationModule {}

Answer 1

由于我看不到您的效果文件，因此几乎不可能为您提供一个明确的解决方案。

有点猜测，似乎您错过了在测试平台中提供服务/模拟的功能，因此在加载时试图从未定义的服务中调用方法。

您应该从事类似的工作

import { Actions } from '@ngrx/effects';
import { RandomEffects } from 'random-path/random.effects';
import { RandomService } from 'random-path/random-service'

describe('Random Effects', () => {

let randomService: RandomService;

beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        Actions,
        RandomEffects,
        { provide: RandomService, useFactory: RandomServiceFactory },
      ]
    });

    randomService = TestBed.get(RandomService);
  });
}

用笑话测试@ ngrx / Effect

1 个答案: