質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
Mocha

Mochaは、JavaScriptのテストフレームワークの一つ。mocha自体にはアサーション機能はなく、ブラウザを使用するフロントエンドのテストや、node.jsを用いたテストの両方に対応しています。

Karma

Karma(元Testacular)は、node.jsベースのJavaScriptテストランナー。AngularJSのテストフレームワークとして開発されたもので、クライアントサイドのJavaScriptコードのテストを容易に実行できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1110閲覧

フロントエンドにテストを導入したいがkarmaの導入でつまずいた

Atsushi_Okumura

総合スコア355

Mocha

Mochaは、JavaScriptのテストフレームワークの一つ。mocha自体にはアサーション機能はなく、ブラウザを使用するフロントエンドのテストや、node.jsを用いたテストの両方に対応しています。

Karma

Karma(元Testacular)は、node.jsベースのJavaScriptテストランナー。AngularJSのテストフレームワークとして開発されたもので、クライアントサイドのJavaScriptコードのテストを容易に実行できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/08/29 10:58

編集2018/09/03 11:39

実現したいこと

javascriptの単体テストを自動で行いたい。
下記の記事を最後まで実行したい。
フロントエンドにテストを導入

発生している問題・エラーメッセージ

(node:4371) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead ⚠ 「wdm」: Hash: 841c81d5e12fc948407b Version: webpack 4.17.1 Time: 11059ms Built at: 2018-08-29 19:41:44 WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ ℹ 「wdm」: Compiled with warnings. ℹ 「wdm」: Compiling... 29 08 2018 19:41:45.180:WARN [karma]: No captured browser, open http://localhost:9876/ ⚠ 「wdm」: Hash: fb8f81e72c37d049da1b Version: webpack 4.17.1 Time: 11165ms Built at: 2018-08-29 19:41:45

package.json

json

1{ 2 "name": "test-test", 3 "version": "1.0.0", 4 "main": "test.js", 5 "dependencies": {}, 6 "devDependencies": { 7 "extract-text-webpack-plugin": "^4.0.0-beta.0", 8 "karma": "^3.0.0", 9 "karma-chrome-launcher": "^2.2.0", 10 "karma-cli": "^1.0.1", 11 "karma-mocha": "^1.3.0", 12 "karma-webpack": "^3.0.0", 13 "mocha": "^5.2.0", 14 "webpack": "^4.17.1", 15 "webpack-cli": "^3.1.0" 16 }, 17 "scripts": { 18 "test": "karma start", 19 "build": "webpack --mode development" 20 }, 21 "author": "", 22 "license": "ISC", 23 "description": "" 24}

js

1// Karma configuration 2// Generated on Tue Aug 28 2018 19:29:52 GMT+0900 (GMT+09:00) 3 4module.exports = function(config) { 5 config.set({ 6 basePath: '', 7 frameworks: ['mocha'], 8 files: [ 9 'documents/works/test/test.js' 10 ], 11 exclude: [ 12 ], 13 preprocessors: { 14 'documents/works/test/test.js': ['webpack'] 15 }, 16 reporters: ['progress'], 17 port: 9876, 18 colors: true, 19 logLevel: config.LOG_INFO, 20 autoWatch: true, 21 browsers: ['Chrome'], 22 singleRun: false, 23 concurrency: Infinity 24 }) 25} 26

試したこと

"build": "webpack --mode development"にしたり
extract-text-webpack-pluginを入れましたがお手上げな状態です。

webpack/issues/6568を参考に
process.traceDeprecation = true;をkarma.config.jsに追記、
karma-webpack.jsにprocess.noDeprecation = true;を追記して$ node testを実行したところ

⚠ 「wdm」: Hash: 841c81d5e12fc948407b Version: webpack 4.17.1 Time: 11063ms Built at: 2018-08-31 19:32:41 WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ ℹ 「wdm」: Compiled with warnings. ℹ 「wdm」: Compiling... 31 08 2018 19:32:41.835:WARN [karma]: No captured browser, open http://localhost:9876/ ⚠ 「wdm」: Hash: fb8f81e72c37d049da1b Version: webpack 4.17.1 Time: 11199ms Built at: 2018-08-31 19:32:41 Asset Size Chunks Chunk Names documents/works/test/test.js 13.8 KiB 0 [emitted] documents/works/test/test.js Entrypoint documents/works/test/test.js = documents/works/test/test.js [0] (webpack)/buildin/global.js 489 bytes {0} [built] [1] ./documents/works/test/test.js 275 bytes {0} [built] [2] ./node_modules/assert/assert.js 15.1 KiB {0} [built] [3] ./node_modules/util/util.js 15.2 KiB {0} [built] [4] ./node_modules/process/browser.js 5.29 KiB {0} [built] [5] ./node_modules/util/support/isBufferBrowser.js 203 bytes {0} [built] [6] ./node_modules/inherits/inherits_browser.js 672 bytes {0} [built] [7] ./documents/works/sample.js 420 bytes {0} [built] WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ ℹ 「wdm」: Compiled with warnings. 31 08 2018 19:32:41.842:INFO [karma]: Karma v3.0.0 server started at http://0.0.0.0:9876/ 31 08 2018 19:32:41.843:INFO [launcher]: Launching browser Chrome with unlimited concurrency 31 08 2018 19:32:41.846:INFO [launcher]: Starting browser Chrome

(node:4371) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks insteadは出なくなりましたがテストは走っていない状態?です。

試したこと2

####package.json
"build": "webpack --mode development"
"build": "webpack --mode=development"に変更
"build": "webpack --mode = development"も試してみました。

json

1{ 2 "name": "test-test", 3 "version": "1.0.0", 4 "main": "test.js", 5 "dependencies": {}, 6 "devDependencies": { 7 "extract-text-webpack-plugin": "^4.0.0-beta.0", 8 "karma": "^3.0.0", 9 "karma-chrome-launcher": "^2.2.0", 10 "karma-cli": "^1.0.1", 11 "karma-mocha": "^1.3.0", 12 "karma-webpack": "^3.0.0", 13 "mocha": "^5.2.0", 14 "webpack": "^4.17.1", 15 "webpack-cli": "^3.1.0" 16 }, 17 "scripts": { 18 "test": "karma start", 19 "build": "webpack --mode=development" 20 }, 21 "author": "", 22 "license": "ISC", 23 "description": "" 24}

####webpack.config.js
mode: 'development',を追加してみました。

js

1module.exports = { 2 mode: 'development', 3 entry: { 4 app: 'src/index.js' 5 }, 6 output: { 7 path: 'dist/', 8 filename: '[name].bundle.js' 9 } 10};

実行してみましたがメッセージは変わらずでした。

###試したこと3
karma.conf.jsにwebpack: require('./webpack.config'),を追記しました。
####karma.conf.js

js

1 preprocessors: { 2 './test/test.js': ['webpack'] 3 }, 4 webpack: require('./webpack.config'),

WARNING in configuration〜のメッセージは出なくなりました。

ℹ 「wdm」: wait until bundle finished: noop 03 09 2018 20:32:08.204:WARN [karma]: No captured browser, open http://localhost:9876/ ℹ 「wdm」: Hash: 8fb8bf89b9e3a998e103 Version: webpack 4.17.1 Time: 11105ms Built at: 2018-09-03 20:32:08 Asset Size Chunks Chunk Names app 4.9 KiB app [emitted] app test/test.js 45.9 KiB test/test.js [emitted] test/test.js Entrypoint app = app Entrypoint test/test.js = test/test.js [./node_modules/assert/assert.js] 15.1 KiB {test/test.js} [built] [./node_modules/inherits/inherits_browser.js] 672 bytes {test/test.js} [built] [./node_modules/process/browser.js] 5.29 KiB {test/test.js} [built] [./node_modules/util/support/isBufferBrowser.js] 203 bytes {test/test.js} [built] [./node_modules/util/util.js] 15.2 KiB {test/test.js} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {test/test.js} [built] [./src/index.js] 353 bytes {app} [built] [./src/sample.js] 420 bytes {app} {test/test.js} [built] [./test/test.js] 279 bytes {test/test.js} [built] ℹ 「wdm」: Compiled successfully. 03 09 2018 20:32:08.220:INFO [karma]: Karma v3.0.0 server started at http://0.0.0.0:9876/ 03 09 2018 20:32:08.220:INFO [launcher]: Launching browser Chrome with unlimited concurrency 03 09 2018 20:32:08.230:INFO [launcher]: Starting browser Chrome

まだテストは動かないようです。

必要な情報があれば追記しますのでよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

webpack/issues/6568
ここに解決策があります。

ちなみにそれ警告であってエラーではないので無視して問題ないです。
ビルドは完了してるはずです。


コメントを受けて追記

警告メッセージ、読みましたか?

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

↓ google翻訳にぶち込んだらこうなります。

'mode'オプションが設定されていない場合、webpackはこの値の 'production'にフォールバックします。 各環境のデフォルトを有効にするには、 'mode'オプションを 'development'または 'production'に設定します。

デフォルトの動作を無効にするには、「none」に設定することもできます。 詳細:https://webpack.js.org/concepts/mode/

まあ、翻訳しなくてもURLを開いてみればいいだけです。

そこにはこう書いてあります。

webpack --mode=production

あなたの指定の仕方は間違ってますよね?

投稿2018/08/29 12:51

編集2018/09/03 06:43
spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Atsushi_Okumura

2018/08/29 23:59

回答ありがとうございます。 試してみます!
Atsushi_Okumura

2018/09/03 01:13

試してみましたが「試したこと」に追記した内容でテストが正常に処理されていないようです。
guest

0

自己解決

###Chromeにアクセスできていなかった

質問を読んでいただいた方々には大変申し訳ありません、
今回最も注目しないといけなかったのはnpm test実行後の

04 09 2018 19:16:59.230:INFO [launcher]: Starting browser Chrome 04 09 2018 19:17:59.235:WARN [launcher]: Chrome have not captured in 60000 ms, killing. 04 09 2018 19:18:01.240:WARN [launcher]: Chrome was not killed in 2000 ms, sending SIGKILL. 04 09 2018 19:18:03.240:WARN [launcher]: Chrome was not killed by SIGKILL in 2000 ms, continuing.

この部分、Chromeにアクセスができていなかった感じでした。
最終的にはChromeを入れ直すことでテストは無事走りました。

###最終的なファイルの内容
package.json

json

1{ 2 "name": "test-test", 3 "version": "1.0.0", 4 "main": "test.js", 5 "dependencies": {}, 6 "devDependencies": { 7 "extract-text-webpack-plugin": "^4.0.0-beta.0", 8 "karma": "^3.0.0", 9 "karma-chrome-launcher": "^2.2.0", 10 "karma-cli": "^1.0.1", 11 "karma-mocha": "^1.3.0", 12 "karma-webpack": "^3.0.0", 13 "mocha": "^5.2.0", 14 "webpack": "^4.17.1", 15 "webpack-cli": "^3.1.0" 16 }, 17 "scripts": { 18 "test": "karma start", 19 "build": "webpack --mode development" // ここのmodeはnom run buid時のmode 20 }, 21 "author": "", 22 "license": "ISC", 23 "description": "" 24}

karma.conf.js

js

1// Karma configuration 2// Generated on Tue Aug 28 2018 19:29:52 GMT+0900 (GMT+09:00) 3// process.traceDeprecation = true; // ←警告メッセージが出ているファイルを探すために追加 4module.exports = function(config) { 5 config.set({ 6 basePath: '', 7 frameworks: ['mocha'], 8 files: [ 9 'test/test.js' 10 ], 11 exclude: [ 12 ], 13 preprocessors: { 14 'test/test.js': ['webpack'] 15 }, 16 webpack: require('./webpack.config'), // webpack.config読込(書かないと読み込まない 17 reporters: ['progress'], 18 port: 9876, 19 colors: true, 20 logLevel: config.LOG_INFO, 21 autoWatch: true, 22 browsers: ['Chrome'], 23 singleRun: false, 24 concurrency: Infinity 25 }) 26}

webpack.config.js

js

1module.exports = { 2 mode: 'development', // ここでmode指定 3 entry: { 4 app: './src/index.js' 5 }, 6 output: { 7 path: '/Users/user-raruka/dist/', 8 filename: '[name].bundle.js' 9 } 10};

karma-webpack.js

js

1'use strict'; 2process.noDeprecation = true; // 警告メッセージをスルー 3var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); 4

閲覧いただきました皆様、大変ありがとうございました。

投稿2018/09/04 11:18

Atsushi_Okumura

総合スコア355

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Atsushi_Okumura

2018/09/04 11:22

本題とは関係ありませんが、npm test実行時にビルドもされると思っていましたが、そうでは無く npm run buildを実行することでビルドされ、 nom test実行時はテストのみ走るようです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問