Hey there, let's work through this issue step by step. The error you're hitting happens because identity-obj-proxy (the tool you're using to mock CSS modules) can't parse @import statements in your CSS files—it only handles basic class name mappings, not nested imports or other CSS features. On top of that, there's a small syntax mistake in your Jest configuration that's compounding the problem.

Step 1: Fix the Invalid Jest Configuration #

First off, your moduleNameMapper is nested incorrectly in package.json—you have an extra moduleNameMapper key inside the main one. That's invalid JSON and will cause Jest to misread your settings. Let's correct that structure first.

Step 2: Replace identity-obj-proxy with a CSS Transform That Supports @import #

To handle @import statements properly, we'll use jest-css-modules-transform—a tool that can parse standard CSS (including imports, variables, and media queries) for Jest tests.

1. Install the dependency:

   npm install --save-dev jest-css-modules-transform
   

2. Update your Jest configuration in package.json: remove the CSS mapping from moduleNameMapper and add the new transform to handle CSS files:

   "jest": {
     "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
     "moduleFileExtensions": [ "js" ],
     "moduleDirectories": [ "node_modules" ],
     "testPathIgnorePatterns": [ "<rootDir>/node_modules/", "<rootDir>/app/" ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
     },
     "transform": {
       "^.+\\.js$": "babel-jest",
       "^.+\\.css$": "jest-css-modules-transform"
     }
   }
   

Alternative: DIY CSS Transform (No Extra Dependencies) #

If you prefer not to install another package, you can create a simple transform script to stub CSS files entirely. Create a file named cssTransform.js in your project root:

module.exports = {
  process() {
    // Return an empty object to mock CSS exports
    return 'module.exports = {};';
  },
  getCacheKey() {
    // Use a fixed key to let Jest cache this transform result
    return 'cssTransform';
  },
};

Then update your Jest config's transform section to use this script:

"transform": {
  "^.+\\.js$": "babel-jest",
  "^.+\\.css$": "<rootDir>/cssTransform.js"
}

Note: This method ignores all CSS content (including class names), so use it only if your tests don't rely on importing CSS class names for assertions.

Why This Works #

jest-css-modules-transform actually parses your CSS files, resolves @import statements, and generates a mock object with class names—just like identity-obj-proxy, but with support for more CSS features. Fixing the nested moduleNameMapper ensures Jest reads your configuration correctly from the start.

内容的提问来源于stack exchange，提问作者Jamie Hutber