首页 文章

通过Webpack(终端)执行Typescript Jasmine测试以测试Angular2

提问于
浏览
4

目前我正在尝试让Jasmine与Webpack一起运行,以执行用typescript编写的测试来测试终端中的Angular2应用程序 .

我昨天研究了哪些软件包可用于测试,而angular2有自己的方法 *1 ,我寻找的其他工具比推荐的 jasmine-core 或jasmines原生软件包 jasmine .

我发现 jasmine-node 已经过时2年了 . 目前正在使用Jasmine测试包调查Webpack Angular2 *2

在阅读Ninja Squad的Angular2 *3 成为Ninja之后,我没有关于如何组合3~5个工具链的令人满意的信息 .

Getting to Run Jasmine with Webpack

然后我开始忽略typescript,至少让jasmine和webpack一起工作 . 我找到了Jasmine Webpack插件 *4 并开始按照说明操作 .

目前我不得不开始使用webpack来执行Jasmine . 我添加了另一个切入点:

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

我添加了JasmineWebpackPlugin:

plugins.push(new jasmineWebpackPlugin());

现在我尝试将我的设置与angular webpack starter pack的设置结合起来 *5

我只会得到错误,不能再建造了 .

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

节点版本:5.5.0

npm:3.3.12

操作系统:Windows 7 64位

我的依赖:

"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"
  },

非常感谢您提前的时间 . 我尽力围绕所有这些新工具,特别是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

不能发布超过2个链接,所以我在这里列出链接 .

*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

2 回答

  • 0

    我再次看一下angular2 - webpack入门套件 . 我为测试创建了一个额外的文件后复制了spec-bundle.js,这非常重要!

    我必须学习的另一件事是,茉莉花本身不会这样做 . Karma是管理开始测试所需的所有任务的工具 .

    包括:设置PhantomJS,指导webpack编译打开istanbul执行jasmine的打字稿文件

  • 0

    看起来像NormalModuleFactory.js:72错误与webpack配置文件名中的破折号有关 . 用点替换它们可以解决问题 .

相关问题