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

Question

実現したいこと

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'
    }
};

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

###試したこと３
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

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

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

Answer 1

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

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

Comments

[Atsushi_Okumura]

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

[Atsushi_Okumura]

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

[Atsushi_Okumura]

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

Answer 2

###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');
…

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

Comments

[Atsushi_Okumura]

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