Mocha测试不使用Webpack和mocha-loader运行
tre*_*ler 31 mocha.js npm reactjs webpack webpack-dev-server
背景
我正在将一些npm脚本移植到Webpack加载器以更好地了解Webpack是如何工作的,除了我的Mocha测试之外我还有一切正常工作:我有一个失败的测试,但它没有显示Mocha正在运行mocha-loader或测试失败了:
题
我需要做些什么来让所有src/**/*.test.js文件与Webpack中的Mocha一起运行？
重现步骤
- 克隆https://github.com/trevordmiller/webpack-loaders-playground
- 运行
npm test以查看测试应如何工作 - 运行
npm run dev以查看如何使用Webpack运行测试
Jim*_*itt 52
Mocha加载器在构建时不会运行测试,它用于创建一个专门包含测试的包,然后可以从浏览器运行.
我建议为您的测试创建一个单独的webpack配置文件,然后您可以在webpack-dev服务器上托管,该服务器使用与您的应用程序不同的端口.这是一个例子,它或多或少是我用于我自己的项目的模式(在写这个答案时):
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,摩卡应该运行你的测试.
如果您不需要CSS/LESS或模块中的图像,则可以从中删除这些加载器webpack.tests.config.js.
启用热加载后,这是一个非常好的设置,因为我可以让我的应用程序和我的测试在不同的浏览器选项卡中运行,然后更新我的代码并查看我的更改并立即重新运行我的测试.
您还可以npm run test通过命令行运行以执行相同的测试.
希望这可以帮助.
- 值得注意的是，这种方法要求您记住在一个集中的索引文件中列出所有测试。如果你忘记了，测试将永远不会运行。替代方法（包括配置 *Mocha* 以忽略 Webpack 功能）不需要您维护集中的测试列表。我建议改用这种方法：http://stackoverflow.com/questions/33881123/handle-webpack-css-imports-when-testing-with-mocha-and-babel?rq=1 (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"
}
}
| 归档时间： |
|
| 查看次数： |
15746 次 |
| 最近记录： |