Jasmine unit tests run in Chrome but not in PhantomJs - jasmine

Question

I have a project that was created with the angular cli. I generate new components with the cli and even the most basic tests fail when using PhantomJS with the following stack.
× should create an instance
PhantomJS 2.1.1 (Windows 8 0.0.0)
Failed: undefined is not a constructor (evaluating 'attr.name.startsWith(_I18N_ATTR_PREFIX)')
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48660:70
filter#[native code]
_visitAttributesOf#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48660:24
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48603:32
visit#http://localhost:9876/_karma_webpack_/vendor.bundle.js:40053:62
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48595:59
forEach#[native code]
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48594:31
visit#http://localhost:9876/_karma_webpack_/vendor.bundle.js:40053:62
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48595:59
forEach#[native code]
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48594:31
visit#http://localhost:9876/_karma_webpack_/vendor.bundle.js:40053:62
http://localhost:9876/_karma_webpack_/vendor.bundle.js:48595:59
forEach#[native code]
visitElement#http://localhost:9876/_karma_webpack_/vendor.bundle.js:48594:31
I suspect that there is some incompatibility with my combination of npm packages. Here is my package.json
"dependencies": {
"#angular/animations": "^5.0.2",
"#angular/common": "^5.0.2",
"#angular/compiler": "^5.0.2",
"#angular/core": "^5.0.2",
"#angular/forms": "^5.0.2",
"#angular/http": "^5.0.2",
"#angular/platform-browser": "^5.0.2",
"#angular/platform-browser-dynamic": "^5.0.2",
"#angular/router": "^5.0.2",
"angularfire2": "^5.0.0-rc.4",
"core-js": "^2.4.1",
"crds-styles": "^1.3.1",
"firebase": "^4.6.2",
"intl": "^1.2.5",
"ng2-toastr": "^4.1.2",
"ngx-bootstrap": "1.9.3",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.4",
"#angular/compiler-cli": "^5.0.2",
"#angular/language-service": "^5.0.2",
"#types/jasmine": "2.5.38",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.89",
"codelyzer": "^4.0.1",
"firebase-tools": "^3.15.4",
"jasmine-core": "~2.6.0",
"jasmine-spec-reporter": "~4.2.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "2.2.4",
"karma-phantomjs-launcher": "^1.0.4",
"karma-teamcity-reporter": "^1.0.0",
"prettier": "^1.9.2",
"protractor": "~5.1.2",
"replace": "^0.3.0",
"ts-node": "~2.0.0",
"tslint": "~5.7.0",
"tslint-config-prettier": "^1.6.0",
"typescript": "2.5.3"
}
Any ideas?

Answer 1

You use the startsWith() method which was introduced in ECMAScript 6. Phantom JS currently does not support this JS version. You can see the current status here : https://github.com/ariya/phantomjs/issues/14506 . You could use ChromeHeadless instead or skip the files that contain ES6 code (but they won't be tested).