Angular CLI launched unit tests throw when NgRedux is injected

[CalvinDale]

I'm getting the following error when I run unit tests in an Angular-CLI-created project that injects NgRedux into its main AppComponent.

D:\VST\IssueDemoProj>ng test

Chrome 53.0.2785 (Windows 7 0.0.0) ERROR: 'Unhandled Promise rejection:', TypeError{}, 
'; Zone:', '<root>', '; Task:', 'Promise.then', '; Value:', TypeError{}
...

D:\> ng -v
angular-cli: 1.0.0-beta.11-webpack.8
node: 6.5.0
os: win32 x64

I'm not sure what the root cause might be...but so far I've only experienced this issue if I inject NgRedux.

Steps to reproduce

1. ng new IssueDemoProj
2. cd IssueDemoProj
3. ng serve (fails with TypeScript issues)
   • refer to this issue
   • Fix by uninstalling and re-installing TypeScript
     • npm uninstall --save-dev typescript
     • npm install --save-dev typescript@beta
     • ng serve works now
4. ng test (different console while ng serve is still active, runs ok)
5. npm i --save redux ng2-redux
6. In AppModule,
   • import { NgRedux } from 'ng2-redux';
   • @NgModule({ ... providers: [NgRedux] ... })
7. In AppComponent,
   • import { NgRedux } from 'ng2-redux';
   • constructor(private ngRedux: NgRedux<{ prop1: string }>) { }
8. ng test (fails now)
   • Reports different error than aforementioned 'Unhandled Promise rejection:'...
   • To see above error, fix up \node_modules\karma\lib\reporter.js to handle objects per this issue
     • Just above msg = (msg || '').replace(... line, insert if (msg && typeof (msg) !== 'string') { msg = JSON.stringify(msg); }
9. In AppComponent, delete the constructor
   • I.e., remove private ngRedux: NgRedux<{ prop1: string }> injection
10. ng test (works now)

Any ideas as to what might be the root cause here?

[SethDavenport]

Looking into it. Thanks for the detailed repro steps!

[SethDavenport]

I can reproduce the issue. Still trying to figure out what's happening. @e-schultz any thoughts?

I can hook up ng2-redux with a simple store and @selector and the app runs fine. It's just the tests that are having issues. My best guess at this point is that it's ngModule-related somehow.

@CalvinDale can I see your app.component.spec.ts file? Are you mocking out the NgRedux dependency at all?

[CalvinDale]

Sorry, I can't provide my app.component.spec.ts. Unfortunately the bits generated for this post are in my office; and I'm out-of-town this weekend. However, in performing only the steps outlined above, I neither created nor edited this file or any other spec file to trigger this issue. So my project contained only whatever specs are set up by the CLI by default and no I didn't mock the NgRedux dependency.

[CalvinDale]

I just tried this again with updated bits: a new Angular 2.0.0 project created by Angular-CLI 1.0.0-beta.15 using ng2-redux 4.0.0-beta.0.

But I'm still getting the same error. The issue seems to be that Angular can't inject NgRedux during the tests.

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [NgReduxModule],
    providers: [ApplicationRef, NgRedux]
  });
});

it('should be able to inject NgRedux', async(() => {
  inject([NgRedux], (ngRedux: NgRedux<{ prop1: string }>) => {
    expect(ngRedux).not.toBe(undefined);
  });
}));

Here's the error message:

zone.js:355 Unhandled Promise rejection: Cannot read property 'error' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'error' of undefined(…) TypeError: Cannot read property 'error' of undefined
    at directCallParentKarmaMethod (http://localhost:9876/context.js:233:28)
    at ContextKarma.error (http://localhost:9876/context.js:139:5)
    at ZoneDelegate.invoke (http://localhost:9876/base/src/test.ts:24001:28)
    at Zone.run (http://localhost:9876/base/src/test.ts:23894:43)
    at http://localhost:9876/base/src/test.ts:24260:57
    at ZoneDelegate.invokeTask (http://localhost:9876/base/src/test.ts:24034:37)
    at Zone.runTask (http://localhost:9876/base/src/test.ts:23934:47)
    at drainMicroTaskQueue (http://localhost:9876/base/src/test.ts:24166:35)consoleError @ zone.js:355
zone.js:357 Error: Uncaught (in promise): TypeError: Cannot read property 'error' of undefined(…)consoleError @ zone.js:357

I looked at the examples for Ng2-Redux and didn't see any tests of components or services requiring NgRedux to be injected in their constructor. But I wasn't even able to get a mock to inject in place of NgRedux. So I'm not sure what I'm doing wrong.

Any ideas?
Thanks!

[SethDavenport]

Hi Calvin,

Sorry haven't had much time to dig into it. I'll try and get to it this weekend.

In general, in my unit tests I would inject a mock instead of ngRedux - it gives you more control over the state of the test.

However if you've tried that and you're still getting the error then something funky is happening.

@bennett000 @e-schultz have either of you encountered this on your recent cli/unit testing adventures?

[bennett000]

I have not encountered this yet. One thing I have been doing since RC5 is using the Module for bootstrapping. I don't think this will necessarily help, but I like it better than bootstrapping in App Component:

import { store } from '/path/to/store';

  @NgModule({
    bootstrap: [AppComponent],
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
    ],
    providers: [
      NgRedux,
    ],
  })
  class AppModule {
    constructor(private ngRedux: NgRedux<IState>) {
      this.ngRedux.provideStore(store);
    }
  }

  return AppModule;

[tallaxes]

Encountered something similar, and I think I figured it out. The core of the problem is that Redux checks for process.env.NODE_ENV, and process ends up being undefined on the client for Angular CLI 'ng test'. It means that likely any use of Redux itself in Angular CLI tests is going to fail this way, not just its injection.

I am not sure what is the most appropriate (and consistent) way to set process.env for 'ng test'; possibly via webpack's DefinePlugin; though none of Angular CLI webpack "modules" use it right now. (I think the reason it is not a problem for e.g. ng serve is that something pulls in node-process, which sets process.env. Also see angular/angular-cli#2110, gaearon/redux-devtools#162). As an ugly temporary workaround, setting it in test.ts with (<any>window).process = { env: { NODE_ENV: 'development' }}; works.

This is hard to debug since when undefined under Karma it ends up throwing ReferenceError "process is not defined", which Karma does not report, as it expects passed in message to be string. JSON.stringify does not help there (stringifies to empty object), but JSON.stringify(msg, Object.getOwnPropertyNames(msg)) does a reasonable job.

[CalvinDale]

I'm glad to learn that @tallaxes figured out the root issue and a viable workaround. I haven't tried it yet. However, though I have NgRedux deployed in one small internal app, I have subsequently decided to abandon this approach and instead use Breeze.js. I think Breeze is a better fit for what I'm doing and consequently I'll probably never try the workaround.

[cmaart]

@CalvinDale: I get the same error without using ng2-redux though:

zone.js:355 Unhandled Promise rejection: Cannot read property 'error' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'error' of undefined(…) TypeError: Cannot read property 'error' of undefined at directCallParentKarmaMethod (http://localhost:9876/context.js:233:28) at ContextKarma.error (http://localhost:9876/context.js:139:5)

That is somehow related to the way karma is set up because it tries to call a function "error" on a global object karma, which doesn't exist for me. And you have the same issue it seems

[SethDavenport]

@tallaxes that makes sense. I tend to roll my own webpack setups since I've found the CLI to be somewhat limited in configurability. And in fact in our webpack configs that's exactly what we do - use webpack.DefinePlugin to register a process.env.NODE_ENV for client code to use. We'll look to see if there's a way to make this less painful for use with the CLI.

[e-schultz]

For what it's worth - currently my 'ng test' won't run on a newly started project - it just hangs without any error :(

[tallaxes]

@e-schultz How about ng test --log-level DEBUG?

[yohanfernando]

OMG, I spent like a couple of days trying to solve this and just thought I will log a bug and @tallaxes I love you man for this 👍 (fyi beginner at angular/redux and thought I was doing something wrong - a good learning exercise though!).

And the CLI team as pulled a PR angular/angular-cli@e23e0fe and this is resolved from Angular CLI v1.0.0-beta.18 onwards - ALL WORKING :)

[SethDavenport]

@yohanfernando thanks for the info - that's good news indeed. The angular-cli fix will help for a number of libs, not just redux :)