使用 webpack 2 / karma 模拟导入答案

【问题标题】：Mocking imports with webpack 2 / karma使用 webpack 2 / karma 模拟导入
【发布时间】：2017-10-16 00:43:22
【问题描述】：

我正试图弄清楚如何加快我的项目的单元测试。我正在使用 webpack 2 和 karma。

我有一个自定义的 npm 模块，我将它与我的应用程序捆绑在一起。这有很多具有依赖关系的导出（在项目中使用摇树）。

例如，我的 npm 模块“Test”的 index.js 如下所示：

export Button from "./Button"
export Unused1 from "./Unused1"
export Unused2 from "./Unused2"
...many more imports follow

我的组件测试将使用“Test”中的“Button”

import {Button} from "Test"

我想创建一个简单的测试，它将由 webpack 捆绑并提供给 karma/phantomjs。测试应该只捆绑/解析需要的东西，例如它应该只解析上面示例中的“按钮”。

基本上，我尝试注入“Test”：{ Button}，其中 Button 我从测试文件中的“Test/Button”导入。

它们似乎仍然捆绑了“Test”的整个 index.js，其中包括所有导出。

有什么建议吗？谢谢！

【问题讨论】：

【解决方案1】：

为什么不使用 require.context？

// webpack.testfiles.js:

var context = require.context('./js', true, /spec\.(js|jsx|ts|tsx)$/);
context.keys().forEach(context);

然后在业力配置中传递该文件：

...
        files: [
            'webpack.files.js',
        ],
...

在此处阅读更多信息：Webpack Dependency Management

【讨论】：