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
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
Seems like NormalModuleFactory.js:72 error is related to dashes in the webpack config filename. Replacing them with dots should solve the problem.
来源：https://stackoverflow.com/questions/35290176/executing-typescript-jasmine-tests-via-webpack-terminal-to-test-angular2