如何从webpack传递外部到jest?

pprl5pva  于 2023-06-30  发布在  Webpack
关注(0)|答案(4)|浏览(141)

我有这个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'
        }
    }

我们现在正在移动到react,我需要在我的测试文件中导入一些文件,其中包含此依赖项,但jest无法找到它们:

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

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

q3qa4bjr

q3qa4bjr1#

以下是目前使用webpack@4.11.1jest@23.1.0的情况。假设这是你的外部webpack配置:

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

您需要Map每个外部库,以便在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用于浏览器。

zlhcx6iw

zlhcx6iw2#

您需要mock外部库。
使用jquery:
1.在__test__文件夹的同一级别创建__mocks__文件夹。
1.在其中,创建一个与依赖项同名的文件,在本例中为jquery(jquery.js)。
1.在测试文件中,使用 jest.mock 函数引用mock外部依赖:jest.mock('jquery');
从jest the docs:https://facebook.github.io/jest/docs/manual-mocks.html
希望能帮上忙。

46qrfjad

46qrfjad3#

对于我的例子来说,使用__mocks__有点冗长,但是我使用了

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

如果__mocks__的建议对您来说太冗长,请查看此处的文档

dhxwm5r4

dhxwm5r44#

您也可以使用moduleNameMapper,但如果您不需要该功能,只需使用jest-transform-stub对其进行存根。

相关问题