Executing Typescript Jasmine tests via Webpack (Terminal) to test Angular2

Question

Currently I'm trying to get Jasmine to run along with Webpack, to execute tests written in typescript to test Angular2 Apps in the Terminal.

I researched yesterday which packages are available for testing, and while angular2 has their own approach *1, I looked for other tools than the recommended jasmine-core or jasmines native package jasmine.

I found jasmine-node which is outdated for 2 years now. Currently investigating the Webpack+Angular2 with Jasmine testing package *2

After reading Become a Ninja with Angular2 *3 by Ninja Squad I have no satisfying information on how to combine the 3~5 toolchains.

Getting to Run Jasmine with Webpack

Then i started to ignore typescript, to at least get jasmine and webpack get to work together. I found the Jasmine Webpack Plugin *4 and started to follow the instructions.

Currently I'm stuck with getting to work webpack to execute Jasmine. I added another entry point:

entry: {
    'vendor': './src/vendor.ts',
    'main': './src/main.ts', // our angular app
    'test': './src/spec.ts' // Testing with jasmine
},

I added the JasmineWebpackPlugin:

plugins.push(new jasmineWebpackPlugin());

Now I try to combine my setting with the settings from the angular webpack starter pack *5

I only get errors, can't build anymore.

Errors in npm-debug.log

14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack     at emitTwo (events.js:100:13)
14 verbose stack     at EventEmitter.emit (events.js:185:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:100:13)
14 verbose stack     at ChildProcess.emit (events.js:185:7)
14 verbose stack     at maybeClose (internal/child_process.js:821:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

Additional Infos

Node Version: 5.5.0

npm: 3.3.12

OS: Windows 7 64-Bit

My dependencies:

  "dependencies": {
    "angular2": "2.0.0-beta.2",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "es7-reflect-metadata": "^1.4.0",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^0.3.3",
    "css-loader": "^0.23.0",
    "exports-loader": "0.6.2",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.8.4",
    "html-webpack-plugin": "^1.7.0",
    "http-server": "^0.8.5",
    "imports-loader": "^0.6.4",
    "jasmine-core": "2.4.1",
    "jasmine-webpack-plugin": "^0.1.1",
    "json-loader": "^0.5.3",
    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.1",
    "karma-coverage": "^0.5.3",
    "karma-jasmine": "^0.3.6",
    "karma-phantomjs-launcher": "^0.2.1",
    "karma-sourcemap-loader": "^0.3.6",
    "karma-webpack": "1.7.0",
    "node.extend": "^1.1.3",
    "phantomjs": "^1.9.18",
    "phantomjs-polyfill": "0.0.1",
    "protractor": "^3.0.0",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.2",
    "rimraf": "^2.4.4",
    "style-loader": "^0.13.0",
    "ts-helper": "0.0.1",
    "ts-loader": "^0.7.2",
    "tsconfig-lint": "^0.4.3",
    "tslint": "^3.2.0",
    "tslint-loader": "^2.1.0",
    "typedoc": "^0.3.12",
    "typescript": "^1.7.3",
    "typings": "^0.6.1",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.12.1",
    "webpack-war-archiver-plugin": "0.0.1"
  },

Thank you a lot for your time in advance. I do my best to wrap my head around all these new tools, especially webpack/jasmine.

    > webpack-dev-server --config webpack-test-config.js --progress --profile --colors --display-error-details --display-cached --inline --debug

 70% 1/1 build modules node_modules\webpack\lib\NormalModuleFactory.js:72
                        var elements = request.replace(/^-?!+/, "").replace(/!!+/g, "!").split("!");
                                              ^

TypeError: Cannot read property 'replace' of undefined
    at node_modules\webpack\lib\NormalModuleFactory.js:72:26
    at node_modules\webpack\lib\NormalModuleFactory.js:28:4
    at node_modules\webpack\lib\NormalModuleFactory.js:159:3
    at NormalModuleFactory.applyPluginsAsyncWaterfall (node_modules\tapable\lib\Tapable.js:75:69)
    at NormalModuleFactory.create (node_modules\webpack\lib\NormalModuleFactory.js:144:8)
    at node_modules\webpack\lib\Compilation.js:214:11
    at node_modules\webpack\node_modules\async\lib\async.js:181:20
    at Object.async.forEachOf.async.eachOf (node_modules\webpack\node_modules\async\lib\async.js:233:13)
    at Object.async.forEach.async.each (node_modules\webpack\node_modules\async\lib\async.js:209:22)
    at Compilation.addModuleDependencies (node_modules\webpack\lib\Compilation.js:185:8)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "jasmine"<
npm ERR! node v5.5.0
npm ERR! npm  v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! jasmine: `webpack-dev-server --config webpack-test-config.js --progress --profile --colors --display-error-details --display-cached --inline --debug`
npm ERR! Exit status 1

Can't post more than 2 Links, so I'm listing the links here.

*1: angular.io/docs/ts/latest/testing/jasmine-testing-101.html

*2: angularclass.github.io/angular2-webpack-starter/

*3: books.ninja-squad.com/angular2

*4: github.com/iredelmeier/jasmine-webpack-plugin

*5: github.com/AngularClass/angular2-webpack-starter/blob/master/webpack.test.config.js

check this for putting tests to work with webpack -> github.com/AngularClass/angular2-webpack-starter — Angular University
– Angular University, Commented Feb 9, 2016 at 11:54
I already tried that config, but it doesn't look like it is working: — Martin Muzatko
– Martin Muzatko, Commented Feb 9, 2016 at 12:50

Martin Muzatko · Accepted Answer · 2016-02-10 13:54:33Z

0

I was taking a look at the angular2 - webpack starter kit again. It worked after I created an extra file for the tests and copied the spec-bundle.js, which is very important!

Another thing that I had to learn is, that jasmine alone won't do it. Karma is the tool that manages all the tasks that are needed in order to start the testing.

Including: Setting up PhantomJS, directing webpack to compile typescript files launching istanbul executing jasmine

answered Feb 10, 2016 at 13:54

Martin Muzatko

3365 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ciekawy Over a year ago

Is there a chance to put your results on github? I would be interested in participating as I'm looking for similar configuration for Ionic2 as it also uses angular2/typescript/webpack

Martin Muzatko Over a year ago

Hi there! I'll put it up as soon as I find some time. I'll get back to you.

Martin Muzatko Over a year ago

Meanwhile, you can watch github.com/martinmuzatko. Thank you for your interest.

ciekawy Over a year ago

Actually I've started to try doing sth similar. I think that simple webpack plugin to execute karma server should be enough. And now I'm facing some not directly related issue stackoverflow.com/questions/35597719/…

cyberXndr · Accepted Answer · 2016-05-03 09:52:33Z

0

Seems like NormalModuleFactory.js:72 error is related to dashes in the webpack config filename. Replacing them with dots should solve the problem.

answered May 3, 2016 at 9:52

cyberXndr

54 bronze badges

Collectives™ on Stack Overflow

Executing Typescript Jasmine tests via Webpack (Terminal) to test Angular2

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related