如何将外部从 webpack 传递到 jest？

Question

我在 grunt 构建过程中得到了这个 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'
        }
    }

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

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

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

Answer 1

您需要模拟外部库。

示例jquery：

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

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

希望对您有所帮助。

Answer 2

以下是今天适用于 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);
else{var n="object"==typeof exports?t(require("react")):t(e.React);

重要的一点是 react 用于 commonjs 和 amd，React 用于浏览器。

Answer 3

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

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

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

如何将外部从 webpack 传递到 jest？

How to pass externals from webpack to jest?

javascript

unit-testing

reactjs

webpack

jestjs