reactjs - 即使在使用了identity-obj-proxy之后，JEST仍然尝试解析CSS模块

Question

我在 React 应用程序中使用带有 sass 的 css 模块。 我使用了identity-obj-proxy，但它不适用于css模块，它适用于普通的scss文件。 我在 jest.config.js 中有 jest 配置设置，并且我确信它被正确读取。

App.js

import scss from '@project/styles/js-variables.scss';

jest.config.js

module.exports = {
  verbose: true,
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@app(.*)$': '<rootDir>/app$1',
    '^@project(.*)$': '<rootDir>/app/projects/NBK$1',
    '\\.(scss|sass|css)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/testing/mocks/fileMock.js',
  },
  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\](?!(@amcharts)\\/).+\\.(js|jsx|ts|tsx)$'],
};

js-variables.scss

@import '~@project/styles/colors';
@import '~@project/styles/variables';

:export {
  mainColor: $main-color;
  bodyColor: $body-black;
  backgroundColor: $dropdown-background-color;
}

我已经尝试了所有方法，使用转换和自定义映射器，但没有任何效果。 如有任何帮助，我们将不胜感激。

Answer 1

在这种情况下，您应该将 '\\.(scss|sass|css)$': 'identity-obj-proxy' 移动到 moduleNameMapper 的顶部条目> 对象。由于顺序很重要，您的 .scss 文件导入首先与 '^@project(.*)$' 进行匹配。

moduleNameMapper: {
    '\\.(scss|sass|css)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/testing/mocks/fileMock.js',
    '^@app(.*)$': '<rootDir>/app$1',
    '^@project(.*)$': '<rootDir>/app/projects/NBK$1',
}