时间戳

首页 > 解决方案 > 开玩笑 moduleNameMapper 忽略点 (\\.) 并嘲笑它不应该做的事情

webpack - 开玩笑 moduleNameMapper 忽略点 (\\.) 并嘲笑它不应该做的事情

问题描述

我有一个要为其配置 Jest 的 TypeScript 和 Webpack 项目。

在某些地方，我import使用.svg扩展名为 Webpack 的文件来通过其加载器进行处理，因此我添加了jest.config.js一个moduleNameMapper: {'\\.(svg)$': '<rootDir>/__mocks__/fileMock.js'}.

但是，当我运行测试时，它似乎试图@ant-design/icons-svg用它不应该替换的，因为and之间fileMock.js没有点 ( .) （依赖关系不以 a 结尾）。@ant-design/icons-svg.svg

运行jest我得到：

Configuration error:
Could not locate module @ant-design/icons-svg mapped as:
C:\Users\USER\Documents\Project\__mocks__\fileMock.js.
Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/\.(svg)$/": "C:\Users\USER\Documents\Project\__mocks__\fileMock.js"
  },
  "resolver": undefined
}

如果我创建了一个__mocks__/fileMock.js带有module.exports = 'MOCK';此错误的文件，但测试中的代码会中断，因为@ant-design/icons-svg它被替换为'MOCK'.

如何让它只模拟以 结尾的文件.svg？正\.(svg)$则表达式应该这样做，但 Jest 似乎有自己的想法。

附加信息：

babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
        '@babel/preset-typescript',
    ],
};

jest.config.ts

export default {
    moduleNameMapper: {
        '\\.(svg)$': '<rootDir>/__mocks__/fileMock.js',
    },
};

编辑：我在这里创建了一个 MCVE 存储库：https ://github.com/soryy708/jest-bug-mcve/

标签： webpackjestjs

解决方案

推荐阅读