teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問フロントエンドにテストを導入したいがkarmaの導入でつまずいた

編集履歴

質問編集履歴

5

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

2018/09/03 11:39

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

title CHANGED
File without changes
body CHANGED
@@ -174,4 +174,42 @@
174
174
  ```
175
175
  実行してみましたがメッセージは変わらずでした。
176
176
 
177
+ ###試したこと３
178
+ karma.conf.jsに`webpack: require('./webpack.config'),`を追記しました。
179
+ ####karma.conf.js
180
+ ```js
181
+ preprocessors: {
182
+ './test/test.js': ['webpack']
183
+ },
184
+ webpack: require('./webpack.config'),
185
+ ```
186
+ WARNING in configuration〜のメッセージは出なくなりました。
187
+ ```
188
+ ℹ ｢wdm｣: wait until bundle finished: noop
189
+ 03 09 2018 20:32:08.204:WARN [karma]: No captured browser, open http://localhost:9876/
190
+ ℹ ｢wdm｣: Hash: 8fb8bf89b9e3a998e103
191
+ Version: webpack 4.17.1
192
+ Time: 11105ms
193
+ Built at: 2018-09-03 20:32:08
194
+ Asset Size Chunks Chunk Names
195
+ app 4.9 KiB app [emitted] app
196
+ test/test.js 45.9 KiB test/test.js [emitted] test/test.js
197
+ Entrypoint app = app
198
+ Entrypoint test/test.js = test/test.js
199
+ [./node_modules/assert/assert.js] 15.1 KiB {test/test.js} [built]
200
+ [./node_modules/inherits/inherits_browser.js] 672 bytes {test/test.js} [built]
201
+ [./node_modules/process/browser.js] 5.29 KiB {test/test.js} [built]
202
+ [./node_modules/util/support/isBufferBrowser.js] 203 bytes {test/test.js} [built]
203
+ [./node_modules/util/util.js] 15.2 KiB {test/test.js} [built]
204
+ [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {test/test.js} [built]
205
+ [./src/index.js] 353 bytes {app} [built]
206
+ [./src/sample.js] 420 bytes {app} {test/test.js} [built]
207
+ [./test/test.js] 279 bytes {test/test.js} [built]
208
+ ℹ ｢wdm｣: Compiled successfully.
209
+ 03 09 2018 20:32:08.220:INFO [karma]: Karma v3.0.0 server started at http://0.0.0.0:9876/
210
+ 03 09 2018 20:32:08.220:INFO [launcher]: Launching browser Chrome with unlimited concurrency
211
+ 03 09 2018 20:32:08.230:INFO [launcher]: Starting browser Chrome
212
+ ```
213
+ まだテストは動かないようです。
214
+
177
215
  必要な情報があれば追記しますのでよろしくお願いします。

4

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

2018/09/03 11:39

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

title CHANGED
File without changes
body CHANGED
@@ -127,5 +127,51 @@
127
127
  ```
128
128
  `(node:4371) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead`は出なくなりましたがテストは走っていない状態？です。
129
129
 
130
+ ### 試したこと2
131
+ ####package.json
132
+ `"build": "webpack --mode development"`を
133
+ `"build": "webpack --mode=development"`に変更
134
+ `"build": "webpack --mode = development"`も試してみました。
135
+ ```json
136
+ {
137
+ "name": "test-test",
138
+ "version": "1.0.0",
139
+ "main": "test.js",
140
+ "dependencies": {},
141
+ "devDependencies": {
142
+ "extract-text-webpack-plugin": "^4.0.0-beta.0",
143
+ "karma": "^3.0.0",
144
+ "karma-chrome-launcher": "^2.2.0",
145
+ "karma-cli": "^1.0.1",
146
+ "karma-mocha": "^1.3.0",
147
+ "karma-webpack": "^3.0.0",
148
+ "mocha": "^5.2.0",
149
+ "webpack": "^4.17.1",
150
+ "webpack-cli": "^3.1.0"
151
+ },
152
+ "scripts": {
153
+ "test": "karma start",
154
+ "build": "webpack --mode=development"
155
+ },
156
+ "author": "",
157
+ "license": "ISC",
158
+ "description": ""
159
+ }
160
+ ```
161
+ ####webpack.config.js
162
+ `mode: 'development',`を追加してみました。
163
+ ```js
164
+ module.exports = {
165
+ mode: 'development',
166
+ entry: {
167
+ app: 'src/index.js'
168
+ },
169
+ output: {
170
+ path: 'dist/',
171
+ filename: '[name].bundle.js'
172
+ }
173
+ };
174
+ ```
175
+ 実行してみましたがメッセージは変わらずでした。
130
176
 
131
177
  必要な情報があれば追記しますのでよろしくお願いします。

3

文言変更

2018/09/03 11:09

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

title CHANGED
File without changes
body CHANGED
@@ -87,7 +87,7 @@
87
87
  extract-text-webpack-pluginを入れましたがお手上げな状態です。
88
88
 
89
89
  [webpack/issues/6568](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
90
- `process.traceDeprecation = true;`をkarma.config.jsに追記して実行しまし、
90
+ `process.traceDeprecation = true;`をkarma.config.jsに追記、
91
91
  karma-webpack.jsに`process.noDeprecation = true;`を追記して`$ node test`を実行したところ
92
92
  ```
93
93
  ⚠ ｢wdm｣: Hash: 841c81d5e12fc948407b

2

リンク名変更

2018/09/03 01:30

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

title CHANGED
File without changes
body CHANGED
@@ -86,7 +86,7 @@
86
86
  `"build": "webpack --mode development"`にしたり
87
87
  extract-text-webpack-pluginを入れましたがお手上げな状態です。
88
88
 
89
- [issue](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
89
+ [webpack/issues/6568](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
90
90
  `process.traceDeprecation = true;`をkarma.config.jsに追記して実行しまし、
91
91
  karma-webpack.jsに`process.noDeprecation = true;`を追記して`$ node test`を実行したところ
92
92
  ```

1

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

2018/09/03 01:28

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

title CHANGED
File without changes
body CHANGED
@@ -86,4 +86,46 @@
86
86
  `"build": "webpack --mode development"`にしたり
87
87
  extract-text-webpack-pluginを入れましたがお手上げな状態です。
88
88
 
89
+ [issue](https://github.com/webpack/webpack/issues/6568#issuecomment-377491754)を参考に
90
+ `process.traceDeprecation = true;`をkarma.config.jsに追記して実行しまし、
91
+ karma-webpack.jsに`process.noDeprecation = true;`を追記して`$ node test`を実行したところ
92
+ ```
93
+ ⚠ ｢wdm｣: Hash: 841c81d5e12fc948407b
94
+ Version: webpack 4.17.1
95
+ Time: 11063ms
96
+ Built at: 2018-08-31 19:32:41
97
+
98
+ WARNING in configuration
99
+ 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.
100
+ You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
101
+ ℹ ｢wdm｣: Compiled with warnings.
102
+ ℹ ｢wdm｣: Compiling...
103
+ 31 08 2018 19:32:41.835:WARN [karma]: No captured browser, open http://localhost:9876/
104
+ ⚠ ｢wdm｣: Hash: fb8f81e72c37d049da1b
105
+ Version: webpack 4.17.1
106
+ Time: 11199ms
107
+ Built at: 2018-08-31 19:32:41
108
+ Asset Size Chunks Chunk Names
109
+ documents/works/test/test.js 13.8 KiB 0 [emitted] documents/works/test/test.js
110
+ Entrypoint documents/works/test/test.js = documents/works/test/test.js
111
+ [0] (webpack)/buildin/global.js 489 bytes {0} [built]
112
+ [1] ./documents/works/test/test.js 275 bytes {0} [built]
113
+ [2] ./node_modules/assert/assert.js 15.1 KiB {0} [built]
114
+ [3] ./node_modules/util/util.js 15.2 KiB {0} [built]
115
+ [4] ./node_modules/process/browser.js 5.29 KiB {0} [built]
116
+ [5] ./node_modules/util/support/isBufferBrowser.js 203 bytes {0} [built]
117
+ [6] ./node_modules/inherits/inherits_browser.js 672 bytes {0} [built]
118
+ [7] ./documents/works/sample.js 420 bytes {0} [built]
119
+
120
+ WARNING in configuration
121
+ 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.
122
+ You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
123
+ ℹ ｢wdm｣: Compiled with warnings.
124
+ 31 08 2018 19:32:41.842:INFO [karma]: Karma v3.0.0 server started at http://0.0.0.0:9876/
125
+ 31 08 2018 19:32:41.843:INFO [launcher]: Launching browser Chrome with unlimited concurrency
126
+ 31 08 2018 19:32:41.846:INFO [launcher]: Starting browser Chrome
127
+ ```
128
+ `(node:4371) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead`は出なくなりましたがテストは走っていない状態？です。
129
+
130
+
89
131
  必要な情報があれば追記しますのでよろしくお願いします。