moduleNameMapper是告诉Jest如何解释不同扩展名的文件的设置。你需要告诉它如何处理更少的文件。
在项目中创建一个如下所示的文件（如果愿意，可以使用其他名称或路径）：

config/CSSStub.js

module.exports = {};

这个stub是我们要告诉Jest使用的模块，而不是CSS或Less文件。然后更改moduleNameMapper设置，并在它的对象中添加以下行来使用它：

'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'

现在，Jest会将任何CSS或Less文件视为导出空对象的模块。您还可以做其他事情-例如，如果您使用CSS模块，则可以使用代理，以便每次导入都返回导入的属性名称。
请阅读此guide了解更多信息。

我通过在package.json文件的jest配置中使用moduleNameMapper键解决了这个问题

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

在此之后，您将需要创建两个文件，如下所述

一个月一个月

module.exports = {};

__mocks__/fileMock.js

module.exports = 'test-file-stub';

如果您使用的是CSS模块，那么最好模拟一个代理来启用className查找。因此，您的配置将更改为：

{
  "jest":{
     "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
  }
}

但是您需要安装identity-obj-proxy包作为开发依赖项，即

yarn add identity-obj-proxy -D

有关详细信息.您可以参阅jest docs

从2018年2月开始使用***create-react-app***的更新。你不能覆盖package.json中的moduleNameMapper，但在jest.config.js中它可以工作，不幸的是我没有找到任何关于它为什么工作的文档。所以我的***jest.config.js***看起来像这样：

module.exports = {
...,
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(scss|sass|css)$": "identity-obj-proxy"
  }
}

并且可以很好地跳过scss文件和@import。
支持我的答案，我跟随jest webpack

类似的情况下，安装identity-object-proxy并将其添加到我的CSS jest配置中对我来说是有效的。

//jest.config.js

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

我看到的特定错误：

Jest encountered an unexpected token

/Users/foo/projects/crepl/components/atoms/button/styles.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button { }
                                                                                         ^

SyntaxError: Unexpected token .

  1 | import React from 'react';
> 2 | import styles from './styles.css';

如果你使用的是ts-jest，上面的解决方案都不起作用！你需要模拟转换。
配置文件. js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  roots: [
    "<rootDir>/src"
  ],
  transform: {
    ".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest-config/file-mock.js",
    '.(css|less)$': '<rootDir>/jest-config/style-mock.js'
  },
};

文件-模拟. js

module.exports = {
  process() {
    return `module.exports = 'test-file-stub'`;
  },
};

样式-模拟. js

module.exports = {
    process() {
      return 'module.exports = {};';
    }
  };

我发现这个工作example如果你想了解更多细节。

@import意外标记的解决方案=：）
安装软件包：

npm i --save-dev identity-obj-proxy

在jest.config.js中添加

module.exports = {
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
}

更新：2021年8月如果你使用的是Next JS with TypeScript.只需按照示例repo.
否则，您将浪费数天时间来配置环境。
https://github.com/vercel/next.js/tree/canary/examples/with-jest

我在package.json的底部添加了moduleNameMapper，在那里我配置了jest，如下所示：

"jest": {
    "verbose": true,
    "moduleNameMapper": {
        "\\.(scss|less)$": "<rootDir>/config/CSSStub.js"
    }
}