Angular-CLI “ng e2e”: missing localStorage in protractor tests with ts-node

Question

I've got an Angular2 project based on ngrx and built with @angular/cli: 1.0.0-beta.32.3 . The app itself has a lot in common with officially supported example ngrx app: https://github.com/ngrx/example-app .

I synchronize some part of the store with localStorage using https://github.com/btroncone/ngrx-store-localstorage package, so:

in my reducers/index.ts file (looks like the original https://github.com/ngrx/example-app/blob/master/src/app/reducers/index.ts ) in place of original:

const developmentReducer: ActionReducer<State> = compose(
  storeFreeze,
  combineReducers
)(reducers);

const productionReducer: ActionReducer<State> = combineReducers(reducers);

I've got slightly modified version:

const developmentReducer: ActionReducer<State> = compose(
  storeFreeze,
  localStorageSync(['auth'], true),
  combineReducers
)(reducers);

const productionReducer: ActionReducer<State> = compose(
  localStorageSync(['auth'], true),
  combineReducers
)(reducers);

It works just fine, no issues at all.

The thing is I cannot run protractor e2e tests with this setup . This localStorageSync takes browser's localStorage as the default argument. However, angular-cli's protractor uses ts-node as stated in protractor.conf.js :

beforeLaunch: function() {
  require('ts-node').register({
    project: 'e2e'
  });
},

ng e2e ends with the error:

[19:25:07] I/direct - Using ChromeDriver directly...
[19:25:09] E/launcher - Error: ReferenceError: localStorage is not defined
    at Object.exports.localStorageSync (/home/myfolder/e2e-storage-test/node_modules/ngrx-store-localstorage/src/index.ts:118:77)
    at Object.<anonymous> (/home/myfolder/e2e-storage-test/src/app/reducers/index.ts:32:3)
    at Module._compile (module.js:570:32)
    at Module.m._compile (/home/myfolder/e2e-storage-test/node_modules/ts-node/src/index.ts:406:23)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/home/myfolder/e2e-storage-test/node_modules/ts-node/src/index.ts:409:12)

Full traceback available here: https://gist.github.com/radoslawroszkowiak/17e53b9043264b6d813df2374e8d4dc8 .

I'd like to avoid messing up with things like node-localstorage since I don't want this project to be used for server-side rendering, only browser environment.

How to work around this issue?

Answer 1

The reason turned out to be pretty silly, as one could have expected.

In one of the e2e test files there was an import of path name from application's routing module. This caused the chain of imports, including components imported in the routing module, etc.

Since the e2e test files are executed with ts-node, not in the browser context, the error was thrown as soon as the compiler encountered localStorage occurrence.

Removing the problematic import within e2e spec file solved the issue.

Conclusion for me is: be careful while importing anything from your app inside e2e modules.