web-dev-qa-db-fra.com

Les tests Mocha ne s'exécutent pas avec Webpack et mocha-loader

Contexte

Je porte des scripts npm aux chargeurs Webpack pour mieux apprendre comment Webpack fonctionne et j'ai tout fonctionne sauf pour mes tests Mocha: j'ai un test qui échoue, mais cela ne montre pas que Mocha est exécuté avec le mocha-loader ou que le test échoue:

enter image description here

Question

Que dois-je faire différemment pour obtenir tout src/**/*.test.js fichiers avec lesquels exécuter Mocha dans Webpack?

Étapes à reproduire

  1. Clone https://github.com/trevordmiller/webpack-loaders-playground
  2. Courir npm test pour voir comment les tests devraient fonctionner
  3. Courir npm run dev pour voir comment les tests ne s'exécutent pas avec Webpack
npmreactjsmochawebpackwebpack-dev-server
31
trevordmiller

Le chargeur Mocha n'exécutera pas de tests lors de la construction, il est utilisé pour créer un ensemble contenant spécifiquement vos tests que vous pouvez ensuite exécuter à partir de votre navigateur.

Je recommanderais de créer un fichier de configuration webpack séparé pour vos tests, que vous pouvez ensuite héberger sur un serveur webpack-dev-server qui utilise un port différent de votre application. Voici un exemple qui correspond plus ou moins au modèle que j'utilise pour mes propres projets (au moment d'écrire cette réponse):

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

tests/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;

package.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>

Exécutez ensuite npm run devtest, ouvert http://localhost:<port you picked>/webpack-dev-server/test.html, et mocha devrait exécuter vos tests.

Si vous n'avez pas besoin de CSS/LESS ou d'images via vos modules, vous pouvez supprimer ces chargeurs de webpack.tests.config.js.

Avec le chargement à chaud activé, c'est une configuration vraiment géniale car je peux avoir à la fois mon application et mes tests en cours d'exécution dans différents onglets du navigateur, puis mettre à jour mon code et voir mes modifications et mes tests réexécuter immédiatement.

Vous pouvez également exécuter npm run test pour exécuter les mêmes tests via la ligne de commande.

J'espère que cela t'aides.

52
Jim Skerritt

J'ai aimé la réponse de JimSkerritt, mais je n'ai pas pu la faire fonctionner sur mon ordinateur pour une raison quelconque. Avec les deux fichiers de configuration ci-dessous, vous pouvez exécuter l'application via:

npm start              // then http://localhost:8080/bundle

et lancez vos tests avec:

npm test              // then http://localhost:8081/webpack-dev-server/test

les deux serveurs se rechargent automatiquement et vous pouvez exécuter les deux simultanément!

Fichiers de configuration

webpack.config.js

module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

package.json

{
  "name": "2dpointfinder",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline",
    "test": "webpack-dev-server 'mocha!./tests/test.js' --output-filename test.js --port 8081"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.19.0",
    "style-loader": "^0.12.4"
  },
  "devDependencies": {
    "mocha": "^2.3.3",
    "mocha-loader": "^0.7.1",
    "should": "^7.1.0"
  }
}
5
Shaheen Ghiassy