Mocha 测试不能与 Webpack 和 mocha-loader 一起运行 [英] Mocha tests don't run with Webpack and mocha-loader
问题描述
我正在将一些 npm 脚本移植到 Webpack 加载器，以更好地了解 Webpack 的工作原理，除了我的 Mocha 测试之外，我已经让一切正常工作:我有一个失败的测试，但它没有显示 Mocha 正在运行 mocha-loader 或者测试失败:
I am porting some npm scripts to Webpack loaders to better learn how Webpack works and I’ve got everything working except for my Mocha tests: I have one failing test, but it is not showing that Mocha is being run with the mocha-loader or that the test is failing:
我需要做些什么不同的事情才能让所有 src/**/*.test.js 文件与 Webpack 中的 Mocha 一起运行?
What do I need to do differently to get all src/**/*.test.js files to run with with Mocha in Webpack?
- 克隆https://github.com/trevordmiller/webpack-loaders-playground
- 运行
npm test以查看测试应该如何工作 - 运行
npm run dev以查看测试如何不与 Webpack 一起运行
- Clone https://github.com/trevordmiller/webpack-loaders-playground
- Run
npm testto see how tests should work - Run
npm run devto see how tests don't run with Webpack
推荐答案
Mocha 加载器在构建时不会运行测试，它用于创建一个专门包含您的测试的包，然后您可以从浏览器运行该包.
Mocha loader won't run tests while building, it's used to create a bundle specifically containing your tests which you can then run from your browser.
我建议为您的测试创建一个单独的 webpack 配置文件，然后您可以将其托管在 webpack-dev-server 上，该服务器使用与您的应用程序不同的端口.这是一个或多或少是我在自己的项目中使用的模式的示例(在撰写此答案时):
I would recommend creating a separate webpack config file for your tests, which you can then host on a webpack-dev-server that uses a different port from your application. Here's an example that's more-or-less the pattern that I use for my own projects (as of writing this answer):
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;
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>
然后运行npm run devtest，打开http://localhost:，mocha应该运行您的测试.
Then run npm run devtest, open http://localhost:<port you picked>/webpack-dev-server/test.html, and mocha should run your tests.
如果您的模块不需要 CSS/LESS 或图像，您可以从 webpack.tests.config.js 中删除这些加载器.
If you don't require CSS/LESS or images through your modules, you can remove those loaders from webpack.tests.config.js.
启用热加载后，这是一个非常棒的设置，因为我可以让我的应用程序和我的测试在不同的浏览器选项卡中运行，然后更新我的代码并查看我的更改并立即重新运行我的测试.
With hot loading enabled this is a really great setup because I can have both my application and my tests running in different browser tabs, then update my code and see my changes and my tests re-running immediately.
您也可以通过命令行运行 npm run test 来执行相同的测试.
You can also run npm run test to execute the same tests through the command line.
希望这会有所帮助.
这篇关于Mocha 测试不能与 Webpack 和 mocha-loader 一起运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
