TypeScript + Babel + Jest not using moduleNameMapper for less files

Question

I have my jest config set up to map any.less and.css imports to the identity-obj-proxy module, as prescribed in basically every documentation cite/tutorial in existence.

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

However, I've found that when a.less file includes some forms of invalid css (eg single-line comments, calling mixins, etc), the imported object is empty. This lead me to the discovery that the mapping isn't even being triggered, and some other mechanism (that I haven't figured out, since I didn't set up this project) has been generating class names from the stylesheets rather than simply using the proxy.

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 = {}

What's really strange to me is that when I'm debugging and I evaluate the expression require('./my-style-sheet.less') it does import the proxy module. In fact, I can require anything ending in .less and it will import the proxy, regardless of whether the file exists--which is what I would expect.

Other patterns in moduleNameMapper are working correctly such as some path aliases.

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

I have no idea what's going on nor how I can debug this.

Answer 1

It turns out it was an issue with our babel.config.js . We were adding the babel-plugin-css-modules-transform plugin, which apparently superseded the moduleNameMapper entry.