TypeScript + Babel + Jest 不对更少的文件使用 moduleNameMapper

Question

我设置了我的 jest 配置以将任何 .less 和 .css 导入映射到 identity-obj-proxy 模块，基本上每个文档 cite/tutorial 都存在。

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

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

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',
  },
};

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

Answer 1

事实证明这是我们 babel.config.js 的问题。我们正在添加 babel-plugin-css-modules-transform 插件，它显然取代了 moduleNameMapper 条目。

TypeScript + Babel + Jest 不对更少的文件使用 moduleNameMapper

TypeScript + Babel + Jest not using moduleNameMapper for less files

javascript

less

typescript

jestjs

babel-jest