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

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

ただいまの
回答率

87.93%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,279

score 353

 実現したいこと

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

{
  "name": "test-test",
  "version": "1.0.0",
  "main": "test.js",
  "dependencies": {},
  "devDependencies": {
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-mocha": "^1.3.0",
    "karma-webpack": "^3.0.0",
    "mocha": "^5.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "scripts": {
    "test": "karma start",
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}
// Karma configuration
// Generated on Tue Aug 28 2018 19:29:52 GMT+0900 (GMT+09:00)

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [
      'documents/works/test/test.js'
    ],
    exclude: [
    ],
    preprocessors: {
        'documents/works/test/test.js': ['webpack']
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

 試したこと

"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"も試してみました。

{
  "name": "test-test",
  "version": "1.0.0",
  "main": "test.js",
  "dependencies": {},
  "devDependencies": {
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-mocha": "^1.3.0",
    "karma-webpack": "^3.0.0",
    "mocha": "^5.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "scripts": {
    "test": "karma start",
    "build": "webpack --mode=development"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

webpack.config.js

mode: 'development',を追加してみました。

module.exports = {
    mode: 'development',
    entry: {
        app: 'src/index.js'
    },
    output: {
        path: 'dist/',
        filename: '[name].bundle.js'
    }
};


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

試したこと3

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

karma.conf.js

    preprocessors: {
        './test/test.js': ['webpack']
    },
    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


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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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/30 08:59

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

    キャンセル

  • 2018/09/03 10:13

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

    キャンセル

  • 2018/09/03 15:58

    https://github.com/webpack/webpack/issues/6568#issuecomment-371376970
    このあたりの記述を見て、
    `"build": "webpack --mode development"`
    の記述が正しいものだと思い込んでいました。
    確認不足で申し訳ありません。
    `webpack --mode=production`に書き直して実行してみます。
    ご指摘ありがとうございます。

    キャンセル

check解決した方法

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

{
  "name": "test-test",
  "version": "1.0.0",
  "main": "test.js",
  "dependencies": {},
  "devDependencies": {
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-mocha": "^1.3.0",
    "karma-webpack": "^3.0.0",
    "mocha": "^5.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "scripts": {
    "test": "karma start",
    "build": "webpack --mode development" // ここのmodeはnom run buid時のmode
  },
  "author": "",
  "license": "ISC",
  "description": ""
}


karma.conf.js

// Karma configuration
// Generated on Tue Aug 28 2018 19:29:52 GMT+0900 (GMT+09:00)
// process.traceDeprecation = true; // ←警告メッセージが出ているファイルを探すために追加
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [
      'test/test.js'
    ],
    exclude: [
    ],
    preprocessors: {
        'test/test.js': ['webpack']
    },
    webpack: require('./webpack.config'), // webpack.config読込(書かないと読み込まない
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}


webpack.config.js

module.exports = {
    mode: 'development', // ここでmode指定
    entry: {
        app: './src/index.js'
    },
    output: {
        path: '/Users/user-raruka/dist/',
        filename: '[name].bundle.js'
    }
};


karma-webpack.js

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/04 20:22

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

    キャンセル

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

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る