npm - test - Las pruebas de Mocha no se ejecutan con Webpack y mocha-loader
mocha es6 import (2)
El cargador Mocha no ejecutará pruebas durante la compilación, sino que se usa para crear un paquete que contenga específicamente sus pruebas, que luego puede ejecutar desde su navegador.
Recomendaría crear un archivo de configuración de paquete web por separado para sus pruebas, que luego puede alojar en un servidor webpack-dev-server que usa un puerto diferente de su aplicación. Aquí hay un ejemplo que es más o menos el patrón que uso para mis propios proyectos (al escribir esta respuesta):
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;
paquete.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>
Luego ejecute npm run devtest , abra http://localhost:<port you picked>/webpack-dev-server/test.html , y mocha debería ejecutar sus pruebas.
Si no necesita CSS / LESS o imágenes a través de sus módulos, puede eliminar esos cargadores de webpack.tests.config.js .
Con la carga en caliente habilitada, esta es una muy buena configuración porque puedo ejecutar mi aplicación y mis pruebas en diferentes pestañas del navegador, luego actualizo mi código y veo que mis cambios y mis pruebas vuelven a ejecutarse inmediatamente.
También puede npm run test ejecución npm run test para ejecutar las mismas pruebas a través de la línea de comando.
Espero que esto ayude.
Fondo
Estoy portando algunos scripts npm a los cargadores de Webpack para conocer mejor cómo funciona Webpack y tengo todo funcionando, excepto por mis pruebas de Mocha: tengo una prueba de falla, pero no muestra que Mocha se esté ejecutando con el mocha-loader o que la prueba está fallando:
Pregunta
¿Qué debo hacer de forma diferente para obtener todos los archivos src/**/*.test.js para ejecutar con Mocha en Webpack?
pasos para reproducir
- Clonar https://github.com/trevordmiller/webpack-loaders-playground
- Ejecute la
npm testpara ver cómo deberían funcionar las pruebas - Ejecute
npm run devpara ver cómo las pruebas no se ejecutan con Webpack
Me gustó la respuesta de JimSkerritt, pero no pude hacer que funcione en mi computadora por alguna razón. Con los dos archivos de configuración a continuación, puede ejecutar la aplicación a través de:
npm start // then http://localhost:8080/bundle
y ejecuta tus pruebas con:
npm test // then http://localhost:8081/webpack-dev-server/test
ambos servidores auto-reload && ¡puedes ejecutar ambos simultáneamente!
Archivos de configuración
webpack.config.js
module.exports = {
entry: "./index.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{ test: //.css$/, loader: "style!css" }
]
}
};
paquete.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"
}
}