如何將外部信息從 webpack 傳遞給 jest？

Question

我有這個 webpack 配置作為我 grunt 構建過程的一部分：

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 示例：

1. 在 __test__ 文件夾的同級創建一個 __mocks__ 文件夾。
2. 在其中，創建一個與依賴項同名的文件，在本例中為 jquery (jquery.js)。
3. 在測試文件中，使用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);

重要的一點是對 commonjs 和 amd react React ，對瀏覽器react React 。

Answer 3

對於我的情況，使用__mocks__會有點冗長，但我使用了

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

如果__mocks__建議太冗長，請查看此處的文檔