moduleNameMapper是告诉 Jest 如何解释具有不同扩展名的文件的设置。您需要告诉它如何处理 Less 文件。

在您的项目中创建一个这样的文件（如果您愿意，可以使用不同的名称或路径）：

config/CSSStub.js

module.exports = {};

这个存根是我们将告诉 Jest 使用的module，而不是 CSS 或 Less 文件。然后更改moduleNameMapper设置并将此行添加到其对象以使用它：

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

现在 Jest 会将任何 CSS 或 Less 文件视为导出空对象的module。您也可以做其他事情——例如，如果您使用 CSS module，您可以使用代理，以便每次导入都返回导入的属性名称。

在本指南中阅读更多内容。

我通过使用moduleNameMapperpackage.json 文件中 jest 配置中的密钥解决了这个问题

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

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

• __mocks__/styleMock.js

  module.exports = {};

• __mocks__/fileMock.js

  module.exports = '测试文件存根';

如果您使用 CSS module，那么最好模拟代理以启用 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 文档

从 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

类似的情况，安装身份对象代理并将其添加到 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，则上述解决方案均无效！你需要模拟变换。

开玩笑的配置文件

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

style-mock.js

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

如果您想要更多详细信息，我找到了这个工作示例。