webentwicklung-frage-antwort-db.com.de

Mokka-Tests laufen nicht mit Webpack und Mokka-Loader

Hintergrund

Ich portiere einige npm-Skripte auf Webpack-Loader, um besser zu lernen, wie Webpack funktioniert, und ich habe alles außer meinen Mocha-Tests zum Laufen gebracht: Ich habe einen Test, der nicht funktioniert, aber es zeigt nicht, dass Mocha mit dem mocha-loader oder dass der Test fehlschlägt:

enter image description here

Frage

Was muss ich anders machen, um alle src/**/*.test.js - Dateien mit Mocha in Webpack zum Laufen zu bringen?

Schritte zum Reproduzieren

  1. Klonen https://github.com/trevordmiller/webpack-loaders-playground
  2. Führen Sie npm test Aus, um zu sehen, wie Tests funktionieren sollen
  3. Führen Sie npm run dev Aus, um zu sehen, wie Tests mit Webpack nicht ausgeführt werden
npmreactjsmochawebpackwebpack-dev-server
31
trevordmiller

Mocha Loader führt während der Erstellung keine Tests aus. Es wird verwendet, um ein spezielles Paket mit Ihren Tests zu erstellen, das Sie dann über Ihren Browser ausführen können.

Ich würde empfehlen, eine separate Webpack-Konfigurationsdatei für Ihre Tests zu erstellen, die Sie dann auf einem Webpack-Dev-Server hosten können, der einen anderen Port als Ihre Anwendung verwendet. Hier ist ein Beispiel, das mehr oder weniger dem Muster entspricht, das ich für meine eigenen Projekte verwende (zum Zeitpunkt der Erstellung dieser Antwort):

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>

Führen Sie dann npm run devtest Aus, öffnen Sie http://localhost:<port you picked>/webpack-dev-server/test.html, Und Mokka sollte Ihre Tests ausführen.

Wenn Sie kein CSS/WENIGER oder keine Bilder für Ihre Module benötigen, können Sie diese Loader aus webpack.tests.config.js Entfernen.

Wenn das Laden im laufenden Betrieb aktiviert ist, ist dies eine großartige Einrichtung, da sowohl meine Anwendung als auch meine Tests in verschiedenen Browser-Registerkarten ausgeführt werden können. Anschließend wird der Code aktualisiert und die Änderungen und Tests werden sofort erneut ausgeführt.

Sie können auch npm run test Ausführen, um dieselben Tests über die Befehlszeile auszuführen.

Hoffe das hilft.

52
Jim Skerritt

Ich mochte JimSkerritts Antwort, konnte sie aber aus irgendeinem Grund nicht auf meinem Computer zum Laufen bringen. Mit den beiden folgenden Konfigurationsdateien können Sie die App ausführen über:

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

und führen Sie Ihre Tests mit:

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

beide Server werden automatisch neu geladen && Sie können beide gleichzeitig ausführen!

Konfigurationsdateien

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