TypeScript + Babel + Jest 不使用 moduleNameMapper 来减少文件答案

【问题标题】：TypeScript + Babel + Jest not using moduleNameMapper for less filesTypeScript + Babel + Jest 不使用 moduleNameMapper 来减少文件
【发布时间】：2020-11-10 06:30:06
【问题描述】：

我的 jest 配置设置为将任何 .less 和 .css 导入映射到 identity-obj-proxy 模块，这基本上在现有的每个文档引用/教程中都有规定。

module.exports = {
  // ...
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
  },
};

但是，我发现当 .less 文件包含一些形式的无效 css（例如单行 cmets、调用 mixins 等）时，导入的对象为空。这使我发现映射甚至没有被触发，并且一些其他机制（我还没有弄清楚，因为我没有设置这个项目）已经从样式表而不是简单地生成类名使用代理。

import styles from './my-style-sheet.less'; // styles = {}
import * as styles from './my-style-sheet.less'); // styles = { default: {} }
import styles from './not-a-real-file.less'); // styles = {}
const styles = require('./my-style-sheet.less'); // styles = {}

对我来说真正奇怪的是，当我调试并评估表达式 require('./my-style-sheet.less') 时，它确实导入了代理模块。事实上，我可以要求任何以.less 结尾的东西，它会导入代理，不管文件是否存在——这是我所期望的。

moduleNameMapper 中的其他模式正常工作，例如某些路径别名。

module.exports = {
  // ...
  moduleNameMapper: {
    '^common': '<rootDir>/src/components/common',
  },
};

我不知道发生了什么，也不知道如何调试它。

【问题讨论】：

标签： javascript typescript jestjs less babel-jest

【解决方案1】：

原来这是我们的babel.config.js 的问题。我们添加了babel-plugin-css-modules-transform 插件，它显然取代了moduleNameMapper 条目。

【讨论】：