Help us understand the problem. What is going on with this article?

karma+webpack+babel+mocha+power-assert の設定

More than 3 years have passed since last update.

テストランナーとして karma(実行環境は Chrome)、モジュール管理は webpack、トランスパイラは Babel、テストフレームワークに mocha、アサーションライブラリは power-assert を使った設定になります。

webpackの代わりにbrowserifyを使った設定例や、karma以外のテストランナーの設定例、power-assertの代わりにchaiを使った設定例は見つかったのですが、上記組み合わせがなかったので参考になれば幸いです。

最終的な設定はこちら

karma.conf.js
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [
      'path/to/tests/**/*.js'
    ],
    exclude: [],
    plugins: [
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-webpack'
    ],
    preprocessors: {
      'path/to/tests/**/*.js': ['webpack']
    },
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/,
            query: {
              presets: ['react', 'es2015', 'stage-2'],
              plugins: ['babel-plugin-espower']
            }
          },
          {
            test: /\.json$/,
            loader: 'json'
          }
        ]
      },
      node: {
        fs: 'empty'
      }
    },
    browsers: ['Chrome'],
    singleRun: false
  });
};

一部設定を削ったりしているので package.json を含めた全体の設定を見たい人はこちらのリポジトリをのぞいてみてください。
以下、実際に表示されたエラーと経緯です。

最初の設定

karma.conf.js
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [
      'path/to/tests/**/*.js'
    ],
    exclude: [],
    plugins: [
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-webpack'
    ],
    preprocessors: {
      'path/to/tests/**/*.js': ['webpack']
    },
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/,
            query: {
              presets: ['react', 'es2015', 'stage-2'],
              plugins: ['babel-plugin-espower']
            }
          }
        ]
      }
    },
    browsers: ['Chrome'],
    singleRun: false
  });
};

謎のエラー

以下のようなエラーが出てきて意味不明で困りました。

  [684] ./~/redux-actions/lib/ownKeys.js 453 bytes {0} [built]
  [685] ./~/redux-actions/~/reduce-reducers/lib/index.js 419 bytes {0} [built]
  [686] ./src/reducer.js 2.67 kB {0} [built]
  [687] ./src/middleware.js 1.1 kB {0} [built]

WARNING in ./~/power-assert/~/power-assert-formatter/lib/create.js
Critical dependencies:
35:28-49 the request of a dependency is an expression
 @ ./~/power-assert/~/power-assert-formatter/lib/create.js 35:28-49

WARNING in ./~/power-assert/~/power-assert-formatter/~/acorn/dist/acorn.js
Critical dependencies:
1:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/power-assert/~/power-assert-formatter/~/acorn/dist/acorn.js 1:478-485

ERROR in ./~/cssstyle/lib/CSSStyleDeclaration.js
Module not found: Error: Cannot resolve module 'fs' in /Users/kodama/Work/redux-tooltip/node_modules/cssstyle/lib
 @ ./~/cssstyle/lib/CSSStyleDeclaration.js 7:9-22

ERROR in ./~/power-assert/~/power-assert-formatter/~/estraverse/estraverse.js
Module not found: Error: Cannot resolve module 'json' in /Users/kodama/Work/redux-tooltip/node_modules/power-assert/node_modules/power-assert-formatter/node_modules/estraverse
 @ ./~/power-assert/~/power-assert-formatter/~/estraverse/estraverse.js 831:22-47

ERROR in ./~/power-assert/~/empower/~/escallmatch/~/estraverse/estraverse.js
Module not found: Error: Cannot resolve module 'json' in /Users/kodama/Work/redux-tooltip/node_modules/power-assert/node_modules/empower/node_modules/escallmatch/node_modules/estraverse
 @ ./~/power-assert/~/empower/~/escallmatch/~/estraverse/estraverse.js 831:22-47
webpack: bundle is now VALID.
05 01 2016 14:14:26.656:WARN [karma]: No captured browser, open http://localhost:9876/
05 01 2016 14:14:26.664:INFO [karma]: Karma v0.13.18 server started at http://localhost:9876/
05 01 2016 14:14:26.703:INFO [launcher]: Starting browser Chrome
05 01 2016 14:14:28.181:INFO [Chrome 47.0.2526 (Mac OS X 10.11.2)]: Connected on socket yHM_-NlQUabzaxrZAAAA with id 97862818
Chrome 47.0.2526 (Mac OS X 10.11.2) ERROR
  Uncaught Error: Cannot find module "./package.json"
  at /Users/kodama/Work/redux-tooltip/test/features/tooltip.js:8426

ヒントをもらう

あきらめてbrowserifyを使った構成にしてしのいだのですが、リプライをいただきました。

@t_wada さんありがとうございます!

教えに従ってJSONローダーを追加

karmaの設定を変更して、json-loaderpackage.jsonに追加しました。
これでJSON関連のエラーは消えました。が、fsモジュールがないというエラーが出ています。

  [686] ./~/redux-actions/lib/ownKeys.js 453 bytes {0} [built]
  [687] ./~/redux-actions/~/reduce-reducers/lib/index.js 419 bytes {0} [built]
  [688] ./src/reducer.js 2.67 kB {0} [built]
  [689] ./src/middleware.js 1.1 kB {0} [built]

WARNING in ./~/power-assert/~/power-assert-formatter/lib/create.js
Critical dependencies:
35:28-49 the request of a dependency is an expression
 @ ./~/power-assert/~/power-assert-formatter/lib/create.js 35:28-49

WARNING in ./~/power-assert/~/power-assert-formatter/~/acorn/dist/acorn.js
Critical dependencies:
1:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/power-assert/~/power-assert-formatter/~/acorn/dist/acorn.js 1:478-485

ERROR in ./~/cssstyle/lib/CSSStyleDeclaration.js
Module not found: Error: Cannot resolve module 'fs' in /Users/kodama/Work/redux-tooltip/node_modules/cssstyle/lib
 @ ./~/cssstyle/lib/CSSStyleDeclaration.js 7:9-22
webpack: bundle is now VALID.
05 01 2016 14:26:29.688:WARN [karma]: No captured browser, open http://localhost:9876/
05 01 2016 14:26:29.697:INFO [karma]: Karma v0.13.18 server started at http://localhost:9876/
05 01 2016 14:26:29.735:INFO [launcher]: Starting browser Chrome
05 01 2016 14:26:30.895:INFO [Chrome 47.0.2526 (Mac OS X 10.11.2)]: Connected on socket D3hhFiMr_HoktVxDAAAA with id 82912336
Chrome 47.0.2526 (Mac OS X 10.11.2) ERROR
  Uncaught Error: Cannot find module "fs"
  at /Users/kodama/Work/redux-tooltip/test/features/tooltip.js:19229

似たような症状を発見

Cannot resolve module 'fs' #8

Screen Shot 0028-01-05 at 15.11.07.png

なぜだかよくわからないけど以下を追加すると直りました。

webpack.config.js
node: {
  fs: 'empty'
}
kuy
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away