如何将外部内容从 webpack 传递给 jest？

Posted 2023-02-22

【中文标题】如何将外部内容从 webpack 传递给 jest？

【英文标题】：How to pass externals from webpack to jest?

【发布时间】：2017-04-22 11:11:27

【问题描述】：

我已经将这个 webpack 配置作为我繁重的构建过程的一部分：

module.exports = 
options: 
    output: 
        path: path.resolve('../ui/static/js'),
        filename: '[name].js',
        chunkFilename: '[id].[name].js',
        libraryTarget: 'amd',
        library: '[name]'
    ,

    externals: [
        'jquery',
        'lodash',
        'backbone',
        'backbone.layoutmanager',
        'moment',
        'spin',
        'lib/select2.min',
        'dispatcher'
    ],
    resolve: 
        root: path.resolve('../ui'),
        alias: 
            'jst': 'static/jst'
        
    

我们现在开始做出反应，我需要在我的测试文件中导入一些文件，其中包含这些依赖项，但是我找不到它们：

Cannot find module 'lib/select2.min' from 'helpers.js'
Cannot find module 'jst/templates_jst' from 'base-view.js

解决此问题的正确方法是什么？

【问题讨论】：

您是否尝试过使用安装文件并导入这些包并附加到global？

是的。它在我的模板上失败了，它包含在 webpack 中，如下所示：resolve: root: path.resolve('../ui'), alias: 'jst': 'static/jst' 我开玩笑说：Cannot find module 'jst/templates_jst' from 'base-view.js'

我可以通过将 spin、jquery、backbone 添加到 __mocks__ 文件夹来防止错误，但我不知道如何处理 jst/templates_jst

另一种可能是使用虚拟模拟jest.mock('jst/templates_jst', () => , virtual: true)

【参考方案1】：

对于我的情况，使用 __mocks__ 会有点冗长，但我使用了

jest.mock('myModule', () => /* module impl */, virtual: true)

如果__mocks__ 的建议对您来说过于冗长，请查看文档here

【讨论】：

这太棒了，我在我执行的任何网络搜索中都没有看到这一点，这对外部库非常有用，我也不想在创建时如此冗长，谢谢你

优秀的答案。不知道这个virtual: true。它对我来说就像一个魅力！

【参考方案2】：

您需要模拟外部库。

jquery 示例：

在 __test__ 文件夹的同一级别创建一个 __mocks__ 文件夹。 在其中创建一个与依赖项同名的文件，在本例中为 jquery (jquery.js)。 在测试文件中，使用jest.mock函数引用mock外部依赖：jest.mock('jquery');

来自开玩笑的文档： https://facebook.github.io/jest/docs/manual-mocks.html

希望对你有帮助。

【讨论】：

这将如何解决问题？如果我在测试中模拟 react，它们将不再通过，因为我需要实际的 react 来渲染组件进行测试。

对于反应它当然无济于事，如果反应作为外部库，无论如何你必须将它放在依赖项中。但它适用于一些不影响您的测试的外部包，但仍然必须安装以解决导入和编译问题。这里的模拟很适合。

【参考方案3】：

这就是今天适用于 webpack@4.11.1 和 jest@23.1.0 的内容。假设这是你的外部 webpack 配置：

externals: 
  react: 
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react',
  ,

您需要映射每个外部库以在您的 jest 配置中正确解析，如下所示：

moduleNameMapper: 
  "^./react": path.resolve(__dirname, 'node_modules/react'),

在调试您的问题时，请务必检查您构建的组件文件的外观。您要确保看到类似以下内容：

!function(e,t)if("object"==typeof exports&&"object"==typeof module)
module.exports=t(require("react"));
else if("function"==typeof define&&define.amd)define(["react"],t);
elsevar n="object"==typeof exports?t(require("react")):t(e.React);

react 用于 commonjs 和 amd，React 用于浏览器。