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

Question

我在 React 应用程序中使用 css 模块和 sass。我使用了 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',
    '^@project(.*)$': '<rootDir>/app/projects/NBK',
    '\.(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',
    '^@project(.*)$': '<rootDir>/app/projects/NBK',
}

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

JEST keeps trying to parse CSS module even after using identity-obj-proxy

reactjs

jestjs

react-testing-library