我正在React / Redux / Webpack中开发一个Web应用程序,现在我开始将测试与Mocha集成 .
我跟着the instructions for writing tests in the Redux documentation,但现在我遇到了我的webpack别名问题 .
例如,为我的一个动作创建者查看此测试的导入部分:
import expect from 'expect' // resolves without an issue
import * as actions from 'actions/app'; // can't resolve this alias
import * as types from 'constants/actionTypes'; // can't resolve this alias
describe('Actions', () => {
describe('app',() => {
it('should create an action with a successful connection', () => {
const host = '***************',
port = ****,
db = '******',
user = '*********',
pass = '******';
const action = actions.createConnection(host, port, db, user, pass);
const expectedAction = {
type: types.CREATE_CONNECTION,
status: 'success',
payload: { host, port, database, username }
};
expect(action).toEqual(expectedAction);
});
});
});
正如评论所示,当mocha引用别名依赖时,mocha无法解析我的import语句 .
因为我是 webpack.config.js
:
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
extensions : ['', '.js', '.jsx'],
alias: {
actions: path.resolve(__dirname, 'src', 'actions'),
constants: path.resolve(__dirname, 'src', 'constants'),
/* more aliases */
}
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
include: __dirname
}]
}
};
另外,我正在使用命令 npm test
运行mocha,这里's the script I' m在我的 package.json
中使用 .
{
"scripts": {
"test": "mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive"
}
}
所以这就是我被卡住的地方 . I need to include the aliases from webpack into mocha when it runs.
8 回答
Danny 's answer is great. But my situation is a little bit different. I used webpack' s
resolve.alias
使用src
文件夹下的所有文件 .并为我自己的模块使用一个特殊的前缀,如下所示:
要测试这样的代码,我必须在mocha测试之前添加一个命令
ln -sf src test/alias/-
并使用NODE_PATH=./test/alias
技巧Danny与之搭档 . 所以最终的脚本是这样的:PS:
我使用
-
因为像@
或~
这样的美化字符不够安全 . 我找到了安全字符的答案here好的,所以我意识到我所有的别名都在
src/
目录中,所以我只需要修改我的npm run test
脚本 .可能不适用于所有人,但这解决了我的问题 .
我也遇到了同样的问题,但是用这个插件解决了它 .
https://www.npmjs.com/package/babel-plugin-webpack-aliases
"mocha"的执行命令未读取
webpack.config.js
,因此无法解析别名 .通过设置此插件,在使用"babel-core/register"进行编译时,请考虑
webpack.config.js
. 因此,别名在测试期间也是有效的 .并将此设置添加到
.babelrc
将别名保留在一个地方,如
config/webpack.common.js
然后安装babel-plugin-webpack-alias
然后在
.babelrc
放:我有完全相同的问题 . 似乎不可能在require.js或node的require中使用webpack别名 .
我最终在单元测试中使用mock-require并且只是手动替换路径,如下所示:
mock-require是一个很好的工具,因为你很可能无论如何都要模拟你的大部分依赖,而不是使用
src
中的实际脚本 .您还可以使用我创作的babel插件:https://github.com/trayio/babel-plugin-webpack-alias它会将您的别名路径转换为相对路径,只需在您的
.babelrc
中添加一个babel插件即可 .我假设你的
mocha.opts
中会有--require babel-register
. 你可以使用babel模块解析器插件https://github.com/tleunen/babel-plugin-module-resolver . 这允许您在.babelrc中设置别名,类似于您的webpack别名:我想我解决了这个问题 . 你应该使用2个包: mock-require 和 proxyquire .
假设你有一个像这样的js文件:
app.js
你的测试代码应该像这样写:
app.test.js
files tree
首先通过mock-require in函数模拟别名路径,然后在beforeEach函数中通过proxyquire模拟测试对象 .