質問編集履歴

5 試したこと3を追加しました

Atsushi_Okumura

Atsushi_Okumura score 353

2018/09/03 20:39  投稿

フロントエンドにテストを導入したいがkarmaの導入でつまずいた
### 実現したいこと
javascriptの単体テストを自動で行いたい。
下記の記事を最後まで実行したい。
[フロントエンドにテストを導入](https://qiita.com/howdy39/items/cdd5b252096f5a2fa438)
### 発生している問題・エラーメッセージ
```
(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
{
 "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": ""
}
```
```js
// 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](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
`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
{
 "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',`を追加してみました。
```js
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  
```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  
```  
まだテストは動かないようです。  
 
必要な情報があれば追記しますのでよろしくお願いします。
  • JavaScript

    36513 questions

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

  • Node.js

    4416 questions

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

  • webpack

    728 questions

  • Mocha

    16 questions

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

  • Karma

    11 questions

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

4 試したことを追加しました

Atsushi_Okumura

Atsushi_Okumura score 353

2018/09/03 20:09  投稿

フロントエンドにテストを導入したいがkarmaの導入でつまずいた
### 実現したいこと
javascriptの単体テストを自動で行いたい。
下記の記事を最後まで実行したい。
[フロントエンドにテストを導入](https://qiita.com/howdy39/items/cdd5b252096f5a2fa438)
### 発生している問題・エラーメッセージ
```
(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
{
 "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": ""
}
```
```js
// 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](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
`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  
{  
 "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',`を追加してみました。  
```js  
module.exports = {  
   mode: 'development',  
   entry: {  
       app: 'src/index.js'  
   },  
   output: {  
       path: 'dist/',  
       filename: '[name].bundle.js'  
   }  
};  
```  
実行してみましたがメッセージは変わらずでした。  
必要な情報があれば追記しますのでよろしくお願いします。
  • JavaScript

    36513 questions

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

  • Node.js

    4416 questions

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

  • webpack

    728 questions

  • Mocha

    16 questions

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

  • Karma

    11 questions

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

3 文言変更

Atsushi_Okumura

Atsushi_Okumura score 353

2018/09/03 10:30  投稿

フロントエンドにテストを導入したいがkarmaの導入でつまずいた
### 実現したいこと
javascriptの単体テストを自動で行いたい。
下記の記事を最後まで実行したい。
[フロントエンドにテストを導入](https://qiita.com/howdy39/items/cdd5b252096f5a2fa438)
### 発生している問題・エラーメッセージ
```
(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
{
 "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": ""
}
```
```js
// 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](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
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`は出なくなりましたがテストは走っていない状態?です。
必要な情報があれば追記しますのでよろしくお願いします。
  • JavaScript

    36513 questions

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

  • Node.js

    4416 questions

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

  • webpack

    728 questions

  • Mocha

    16 questions

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

  • Karma

    11 questions

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

2 リンク名変更

Atsushi_Okumura

Atsushi_Okumura score 353

2018/09/03 10:28  投稿

フロントエンドにテストを導入したいがkarmaの導入でつまずいた
### 実現したいこと
javascriptの単体テストを自動で行いたい。
下記の記事を最後まで実行したい。
[フロントエンドにテストを導入](https://qiita.com/howdy39/items/cdd5b252096f5a2fa438)
### 発生している問題・エラーメッセージ
```
(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
{
 "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": ""
}
```
```js
// 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を入れましたがお手上げな状態です。
[issue](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
[webpack/issues/6568](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
`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`は出なくなりましたがテストは走っていない状態?です。
必要な情報があれば追記しますのでよろしくお願いします。
  • JavaScript

    36513 questions

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

  • Node.js

    4416 questions

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

  • webpack

    728 questions

  • Mocha

    16 questions

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

  • Karma

    11 questions

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

1 いただいた回答を試した結果を追記しました。

Atsushi_Okumura

Atsushi_Okumura score 353

2018/08/31 19:45  投稿

フロントエンドにテストを導入したいがkarmaの導入でつまずいた
### 実現したいこと
javascriptの単体テストを自動で行いたい。
下記の記事を最後まで実行したい。
[フロントエンドにテストを導入](https://qiita.com/howdy39/items/cdd5b252096f5a2fa438)
### 発生している問題・エラーメッセージ
```
(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
{
 "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": ""
}
```
```js
// 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を入れましたがお手上げな状態です。
[issue](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に  
`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`は出なくなりましたがテストは走っていない状態?です。  
 
 
必要な情報があれば追記しますのでよろしくお願いします。
  • JavaScript

    36513 questions

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

  • Node.js

    4416 questions

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

  • webpack

    728 questions

  • Mocha

    16 questions

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

  • Karma

    11 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る