在mocha测试中使用webpack别名

8 回答

• 3

  Danny 's answer is great. But my situation is a little bit different. I used webpack' s resolve.alias 使用 src 文件夹下的所有文件 .

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

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

  import App from '-/components/App';
  

  要测试这样的代码，我必须在mocha测试之前添加一个命令 ln -sf src test/alias/- 并使用 NODE_PATH=./test/alias 技巧Danny与之搭档 . 所以最终的脚本是这样的：

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

  ---

  PS：

  我使用 - 因为像 @ 或 ~ 这样的美化字符不够安全 . 我找到了安全字符的答案here

  回复于 2023-12-06T16:46:46+08:00
• 0

  好的，所以我意识到我所有的别名都在 src/ 目录中，所以我只需要修改我的 npm run test 脚本 .

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

  可能不适用于所有人，但这解决了我的问题 .

  回复于 2023-12-06T16:46:46+08:00
• 14

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

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

  "mocha"的执行命令未读取 webpack.config.js ，因此无法解析别名 .
  通过设置此插件，在使用"babel-core/register"进行编译时，请考虑 webpack.config.js . 因此，别名在测试期间也是有效的 .

  npm i -D babel-plugin-webpack-aliases
  

  并将此设置添加到 .babelrc

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

  回复于 2023-12-06T16:46:46+08:00
• 2

  将别名保留在一个地方，如 config/webpack.common.js

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

  然后安装babel-plugin-webpack-alias

  npm i babel-plugin-webpack-alias --save-dev
  

  然后在 .babelrc 放：

  {
      "presets": ["env"],
      "plugins": [
          ["babel-plugin-webpack-alias", {
              "config": "./config/webpack.common.js" // path to your webpack config
          }]
      ]
  }
  

  回复于 2023-12-06T16:46:46+08:00
• 36

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

  我最终在单元测试中使用mock-require并且只是手动替换路径，如下所示：

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

  mock-require是一个很好的工具，因为你很可能无论如何都要模拟你的大部分依赖，而不是使用 src 中的实际脚本 .

  回复于 2023-12-06T16:46:46+08:00
• 1

  您还可以使用我创作的babel插件：https://github.com/trayio/babel-plugin-webpack-alias它会将您的别名路径转换为相对路径，只需在您的 .babelrc 中添加一个babel插件即可 .

  回复于 2023-12-06T16:46:46+08:00
• 0

  我假设你的 mocha.opts 中会有 --require babel-register . 你可以使用babel模块解析器插件https://github.com/tleunen/babel-plugin-module-resolver . 这允许您在.babelrc中设置别名，类似于您的webpack别名：

  {
    "plugins": [
      ["module-resolver", {
         "alias": {
           "actions": "./src/actions",
           "constants": "./src/constants"
         }
      }]
    ]
  }
  

  回复于 2023-12-06T16:46:46+08:00
• 4

  我想我解决了这个问题 . 你应该使用2个包： mock-require 和 proxyquire .

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

  app.js

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

  你的测试代码应该像这样写：

  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', () => {
      ...
    });
  });
  

  files tree

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

  首先通过mock-require in函数模拟别名路径，然后在beforeEach函数中通过proxyquire模拟测试对象 .

  回复于 2023-12-06T16:46:46+08:00