Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot run npm run test on Chrome or PhantomJS #4654

Closed
zwolej opened this issue Feb 13, 2017 · 11 comments
Closed

Cannot run npm run test on Chrome or PhantomJS #4654

zwolej opened this issue Feb 13, 2017 · 11 comments

Comments

@zwolej
Copy link

@zwolej zwolej commented Feb 13, 2017

I have almost fresh new project based on:

@angular/cli: 1.0.0-beta.31
node: 6.2.1
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7

When I am trying to run npm run test with defaults, I am getting.

...
Can't bind to 'routerLink' since it isn't a known property of 'a'.
...

wird is that in npm run start everything works fine including routings, since I have impoterd in imports RouterModule in app.module.ts.

So I've tried to change to PhantomJS by installing:

npm i --save-dev phantomjs-prebuilt
npm install --save-dev karma-phantomjs-launcher

In Karma i added:

require('karma-phantomjs-launcher'),
...
browsers: ['PhantomJS'],

and I am getting

 TypeError: undefined is not an object (evaluating '(_a = ((Object))).assign.ap                                                                                                                                                 ply')
  at webpack:///~/@angular/common/src/pipes/intl.js:187:0 <- src/test.ts:34435

I added also in pollyfills.ts (after npm run install --save-dev intl)

import 'intl';
import 'intl/locale-data/jsonp/en';

but still I cannot run tests, any ideas?

@ruffiem
Copy link
Contributor

@ruffiem ruffiem commented Feb 13, 2017

@zwolej you need to uncomment those from your polyfills.ts

import 'core-js/es6/object';
import 'core-js/es6/array';
import 'intl';  // Run `npm install --save intl`.
@zwolej
Copy link
Author

@zwolej zwolej commented Feb 13, 2017

@ruffiem now I am getting on PhantomJS

Failed: undefined is not a constructor (evaluating 'suffix.startsWith('{' + BLOCK_PLACEHOLDER)')
webpack:///~/@angular/compiler/src/shadow_css.js:462:0 <- src/test.ts:57570:40

chrome

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'.

@ruffiem
Copy link
Contributor

@ruffiem ruffiem commented Feb 13, 2017

Also, you do not have to import import 'intl/locale-data/jsonp/en';in your polyfills since intl imports it already.

@ruffiem
Copy link
Contributor

@ruffiem ruffiem commented Feb 13, 2017

uncomment import 'core-js/es6/set'; since startsWith use get & set but if you keep having such issues, just uncomment the whole es6 suite 👍

@ruffiem
Copy link
Contributor

@ruffiem ruffiem commented Feb 13, 2017

As for Can't bind to 'routerLink' since it isn't a known property of 'a'. means your component does not have access to the RouterModule.

@zwolej
Copy link
Author

@zwolej zwolej commented Feb 13, 2017

I uncommented all core-js/es6 imports. Now I am getting on phantomjs and chrome

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'.

I would like only remind that npm run start works great. I can easly naviagte and so on using those routerLinks

@Meligy
Copy link
Contributor

@Meligy Meligy commented Feb 14, 2017

This is not a CLI problem. This is an Angular testing StackOverflow type question.

In testing, you get a testing module that is different from your normal module. That's why npm start works.

Check the component that has routeLink, go to the test for that, and add

import { RouterTestingModule } from '@angular/router/testing';

And in the actual test:

    TestBed.configureTestingModule({
      imports: [RouterTestingModule, ....],
      ...
    });

Please check the official testing guide for more:
https://angular.io/docs/ts/latest/guide/testing.html

Cheers,

@zwolej
Copy link
Author

@zwolej zwolej commented Feb 15, 2017

Thanks! I didnt used TestBed.createComponent in tests before. Work like a charm.

@zwolej zwolej closed this Feb 15, 2017
@pabagan
Copy link

@pabagan pabagan commented Feb 23, 2017

Same issue here with Angular2 CLI and Phantom.

TypeError: undefined is not an object (evaluating '(_a = ((Object))).assign.ap                                                                                                                                          ply')  at webpack:/

Solved thanks to @ruffiem but for me worked uncomenting just:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/array';

Edit: needed to uncomment import 'core-js/es6/string'; or lot of my test breaks (don't know why...)

grking8 added a commit to grking8/mathdruck-ng1 that referenced this issue Mar 30, 2017
Unit testing with CSS errors - Failed: undefined is not a
constructor (evaluating 'suffix.startsWith('{' +
BLOCK_PLACEHOLDER)')

To get around this, add polyfills as per
angular/angular-cli#4654
@sarathsaleem
Copy link

@sarathsaleem sarathsaleem commented Jun 18, 2017

I have enabled all the polyfills and change es5 as target, but still getting the the DOM Exception error

LOG: 'Attempting to configure 'innerHTML' with descriptor '{"configurable":true}' on object '[object HTMLUnknownElement]' and got error, giving up: TypeError: Attempting to configurable attribute of unconfigurable property.

PhantomJS 2.1.1 (Mac OS X 0.0.0) AppComponent should create the app FAILED
        NotFoundError: NotFoundError: DOM Exception 8 in src/test.ts (line 83723)
        appendChild@[native code]

Angular version

@angular/cli: 1.0.1
node: 7.7.1
os: darwin x64
@angular/common: 2.4.0
@angular/compiler: 2.4.0
@angular/core: 2.4.0
@angular/forms: 2.4.0
@angular/http: 2.4.0
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.0
@angular/platform-browser-dynamic: 2.4.0
@angular/router: 3.4.0
@angular/cli: 1.0.1
@angular/compiler-cli: 2.4.0

any idea?

@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 7, 2019

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.