npm - Mocha テストが Webpack と mocha-loader で実行されない

Question

バックグラウンド

Webpack がどのように機能するかをよりよく理解するために、いくつかの npm スクリプトを Webpack ローダーに移植しています。Mocha テスト以外はすべて機能していますmocha-loader。失敗しています:

質問

src/**/*.test.jsWebpack で Mocha を使用してすべてのファイルを実行するには、別の方法で何をする必要がありますか?

再現する手順

クローンhttps://github.com/trevordmiller/webpack-loaders-playground
実行npm testして、テストがどのように機能するかを確認します
実行npm run devして、Webpack でテストが実行されないことを確認します

score 53 · Accepted Answer

Mocha ローダーは、ビルド中にテストを実行しません。ブラウザーから実行できるテストを具体的に含むバンドルを作成するために使用されます。

テスト用に別の webpack 構成ファイルを作成することをお勧めします。これは、アプリケーションとは異なるポートを使用する webpack-dev-server でホストできます。これは、多かれ少なかれ自分のプロジェクトに使用するパターンの例です（この回答を書いている時点で）：

webpack.tests.config.js

module.exports = {
    entry: 'mocha!./tests/index.js',
    output: {
        filename: 'test.build.js',
        path: 'tests/',
        publicPath: 'http://' + hostname + ':' + port + '/tests'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel-loader']
            },
            {
                test: /(\.css|\.less)$/,
                loader: 'null-loader',
                exclude: [
                    /build/
                ]
            },
            {
                test: /(\.jpg|\.jpeg|\.png|\.gif)$/,
                loader: 'null-loader'
            }
        ]
    },
    devServer: {
        host: hostname,
        port: port
    }
};

テスト/index.js

// This will search for files ending in .test.js and require them
// so that they are added to the webpack bundle
var context = require.context('.', true, /.+\.test\.js?$/);
context.keys().forEach(context);
module.exports = context;

パッケージ.json

"scripts": {
    "test": "find ./ -name '*.test.js' | xargs mocha -R min -r babel/register",
    "devtest": "webpack-dev-server --config webpack.tests.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
}

test.html

<!DOCTYPE html>
<html>
    <head>
        <title>Mocha</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
        <script src="/tests/test.build.js"></script>
    </head>
    <body>
    </body>
</html>

次に、 run npm run devtest、 open http://localhost:<port you picked>/webpack-dev-server/test.html、および mocha でテストを実行する必要があります。

モジュールを介して CSS/LESS または画像を必要としない場合は、これらのローダーをから削除できますwebpack.tests.config.js。

ホットロードを有効にすると、アプリケーションとテストの両方を別のブラウザータブで実行し、コードを更新して、変更内容とテストがすぐに再実行されることを確認できるため、これは非常に優れたセットアップです。

npm run testコマンドラインから同じテストを実行することもできます。

お役に立てれば。