Mocha 测试不与 Webpack 和 mocha-loader 一起运行
Posted
技术标签:
【中文标题】Mocha 测试不与 Webpack 和 mocha-loader 一起运行【英文标题】：Mocha tests don't run with Webpack and mocha-loader 【发布时间】：2015-11-29 20:30:25 【问题描述】：背景
我正在将一些 npm 脚本移植到 Webpack 加载程序，以更好地了解 Webpack 的工作原理，并且除了 Mocha 测试之外，我已经完成了所有工作：我有一个失败的测试，但它并没有显示 Mocha 正在使用 @ 987654324@ 或测试失败：
问题
我需要做些什么不同的事情才能让所有 src/**/*.test.js 文件在 Webpack 中与 Mocha 一起运行？
重现步骤
-
克隆https://github.com/trevordmiller/webpack-loaders-playground
运行
npm test 以查看测试应该如何工作
运行 npm run dev 以查看测试如何不使用 Webpack 运行
【问题讨论】：
【参考方案1】：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;
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:<port you picked>/webpack-dev-server/test.html，mocha 应该会运行你的测试。
如果您的模块不需要 CSS/LESS 或图像，您可以从 webpack.tests.config.js 中删除这些加载器。
启用热加载后，这是一个非常棒的设置，因为我可以让我的应用程序和我的测试在不同的浏览器选项卡中运行，然后更新我的代码并查看我的更改和我的测试立即重新运行。
您也可以通过命令行运行npm run test 来执行相同的测试。
希望这会有所帮助。
【讨论】：
值得注意的是，这种方法需要您记住在一个集中索引文件中列出所有测试。如果您忘记了，测试将永远不会运行。替代方法（包括配置 Mocha 以忽略 Webpack 功能）不需要您维护集中的测试列表。我建议使用这种方法：***.com/questions/33881123/… 我不久前用一个更好的 index.js 版本更新了我的答案，它不需要您导入每个测试模块。您可以使用require.context 扫描您的所有测试。
好点吉姆，我错过了！也就是说，我走这条路是因为它避免了为测试设置专用的 webpack.config：github.com/coryhouse/react-slingshot/commit/…
@JimSkerritt 我试试 cli 'find ./ -name '*.test.js' | xargs mocha -R min -r babel/register'，它说找不到模块 babel/resgiter。
你有一个简单的 .test.js 文件，我可以参考并学习你是如何编写它的吗？【参考方案2】：
我喜欢 JimSkerritt 的回答，但由于某种原因无法在我的计算机上运行。使用下面的两个配置文件，您可以通过以下方式运行应用程序：
npm start // then http://localhost:8080/bundle
并运行您的测试：
npm test // then http://localhost:8081/webpack-dev-server/test
两台服务器都会自动重新加载&&您可以同时运行！
配置文件
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"
【讨论】：
以上是关于Mocha 测试不与 Webpack 和 mocha-loader 一起运行的主要内容，如果未能解决你的问题，请参考以下文章
基于 Vue 测试套件引入 Mocha + Expect 测试 Vue 组件