React项目Jest测试报错：导入的themr函数未被识别

I'm setting up Jest for my React app, and basic functionality tests work fine. But when I use the themr function imported from react-css-themr, I get the error:
TypeError: (0 , _reactCssThemr.themr) is not a function

I've simplified my component and Jest config to minimal versions, but the error persists. I suspect this is a Jest configuration issue preventing proper resolution of the node module.

My Test Code #

import JestTest from 'components/JestTest.jsx';
import TestRenderer from 'react-test-renderer';

describe('CompsCards', () => {
  it('renders', () => {
    const e = TestRenderer.create(<JestTest />).toJSON();
    expect(e).toMatchSnapshot();
  });
});

The Component (JestTest.jsx) #

import theme from 'css-modules/JestTest.css';
import { themr } from 'react-css-themr';

export class JestTest extends React.Component {
  render () {
    const {theme} = this.props;
    return (
      <div className={theme.JestTest}>Why no workey?</div>
    );
  }
}

const ThemedJestTest = themr('JestTest', theme)(JestTest);
export default ThemedJestTest;

Jest Config (jest.config.js) #

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest'
  },
  verbose: true,
  setupFiles: ['./jest-setup.js'],
  moduleDirectories: ['node_modules'],
  moduleFileExtensions: [
    'js',
    'jsx',
    'css'
  ],
  moduleNameMapper: {
    '^components/(.+)$': '<rootDir>/src/client/components/$1',
    '^css-modules/(.+)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|scss)$': 'identity-obj-proxy'
  }
};

Jest Setup (jest-setup.jsx) #

require.requireActual('babel-polyfill');

Solution #

The most likely culprit here is that Jest isn't transpiling the react-css-themr module. By default, Jest skips transpiling code in node_modules, but some modules (including react-css-themr) are distributed with untranspiled ES6+ syntax that Node/Jest can't handle natively.

Fix 1: Update Jest Config to Transpile react-css-themr

Add transformIgnorePatterns to your jest.config.js to exclude react-css-themr from the default ignore list:

module.exports = {
  // ... existing config
  transformIgnorePatterns: [
    '/node_modules/(?!react-css-themr)'
  ]
};

This tells Jest to transpile the react-css-themr module while still ignoring other node_modules packages.

Fix 2: Verify Import Syntax

Double-check that you're using the correct import syntax for your version of react-css-themr. While the named import { themr } is correct for most versions, if you're using an older release, you might need to use the default import:

// Try this if Fix 1 doesn't work
import themr from 'react-css-themr';

Fix 3: Ensure Babel is Configured Correctly

Make sure your Babel setup includes the necessary presets to transpile React and ES6 code. Your .babelrc or babel.config.json should look something like this:

{
  "presets": [
    ["@babel/preset-react", { "runtime": "automatic" }],
    ["@babel/preset-env", { "targets": { "node": "current" } }]
  ]
}

The @babel/preset-env with node: current ensures compatibility with your current Node version, and the React preset handles JSX syntax.

Bonus: Add React to Global Scope (If Needed)

If your component doesn't import React explicitly (and you're not using the automatic runtime), you might need to add it to Jest's global scope in your setup file:

// jest-setup.jsx
import React from 'react';
global.React = React;
require.requireActual('babel-polyfill');

内容的提问来源于stack exchange，提问作者Adam Beck