在摩卡testing中使用webpack别名

我正在React / Redux / Webpack中开发一个Web应用程序,现在我正在开始与Mocha集成testing。

我按照在Redux文档中编写testing的说明进行操作 ,但是现在我遇到了一个与我的webpack别名有关的问题。

例如,看看我的一个动作创build者的testing的import部分:

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); }); }); }); 

正如评论所言,摩卡在引用别名依赖关系时无法解决我的导入语句。

因为我还是webpack的新手,这里是我的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,这里是我在package.json使用的脚本。

  { "scripts": { "test": "mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive" } } 

所以这里是我卡住的地方。 我需要在运行时将webpack中的别名join摩卡。

    好吧,所以我意识到我所有的别名都在src/目录下,所以我只需要修改我的npm run test脚本。

     { "scripts": { "test": "NODE_PATH=./src mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive" } } 

    可能不适合每个人,但是这解决了我的问题。

    您也可以使用我创作的babel插件: https : //github.com/trayio/babel-plugin-webpack-alias它会将您的别名path转换为相对path,只需在您的.babelrc一个babel插件即可。

    我想我解决了这个问题。 你应该使用2包: 模拟需求proxyquire

    假设你有一个这样的js文件:

    app.js

     import action1 from 'actions/youractions'; export function foo() { console.log(action1()) }; 

    而你的testing代码应该这样写:

    app.test.js

     import proxyquire from 'proxyquire'; import mockrequire from 'mock-require'; before(() => { // mock the alias path, point to the actual path mockrequire('actions/youractions', 'your/actual/action/path/from/your/test/file'); // or mock with a function mockrequire('actions/youractions', {actionMethod: () => {...})); let app; beforeEach(() => { app = proxyquire('./app', {}); }); //test code describe('xxx', () => { it('xxxx', () => { ... }); }); 

    文件树

     app.js |- test |- app.test.js 

    首先在前一个函数中用mock-require模拟别名path,然后在beforeEach函数中用proxyquire模拟你的testing对象。

    丹尼的答案很好。 但是我的情况有点不同 我使用webpack的resolve.alias来使用src文件夹下的所有文件。

     resolve: { alias: { '-': path.resolve(__dirname, '../src'), }, }, 

    并为我自己的模块使用一个特殊的前缀,如下所示:

     import App from '-/components/App'; 

    为了testing这样的代码,我必须在mochatesting之前添加一个命令ln -sf src test/alias/-并使用Danny阵营的NODE_PATH=./test/alias窍门。 所以最后的脚本会是这样的:

     { "scripts": { "test": "ln -sf src test/alias/-; NODE_PATH=./test/alias mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive" } } 

    PS:

    我用-因为像@~这样的美化字符不够安全。 我在这里find了安全字符的答案

    我有完全相同的问题。 在require.js中或节点的require中使用webpack别名似乎是不可能的。

    我最终在unit testing中使用了mock-require ,只是手动replacepath,如下所示:

     var mock = require('mock-require'); mock('actions/app', '../../src/actions/app'); 

    mock-require是一个很好的工具,因为大多数情况下你可能想要嘲笑你的大部分依赖,而不是使用src的实际脚本。

    我也遇到了同样的问题,但是用这个插件我解决了它。

    https://www.npmjs.com/package/babel-plugin-webpack-aliases

    你的“摩卡”的执行命令不读取webpack.config.js ,所以它不能parsing别名。
    通过设置这个插件,在编译“babel-core / register”时考虑webpack.config.js 。 结果,别名在testing期间也是有效的。

     npm i -D babel-plugin-webpack-aliases 

    并将此设置添加到.babelrc

     { "plugins": [ [ "babel-plugin-webpack-aliases", { "config": "./webpack.config.js" } ] ] }