Can't get Sass/CSS Modules to load with components

[vudjustin]

Describe the bug

Hey there! I’m trying to get jest-preview to work with my codebase but I’m having some trouble. I can get the HTML for my React component to render but when I try to get the styles working I get some errors. I'm using Sass and CSS modules.

  ● Test suite failed to run

    Can't find stylesheet to import.
      ╷
    1 │ @import 'static/style/_variables.scss';
      │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      ╵
      src/components/general/Icon/style.scss 1:9  root stylesheet

       6 | module.exports = {
       7 |   process(src, filename) {
    >  8 |     return processCss(src, filename);
         |            ^
       9 |   },
      10 | };

Reproduce

I’ve added the transforms the docs suggested to my jest.config.js since my file already had an existing transform:

 transform: {
  '^.+\\.(css|scss|sass)$': '../../cssTransform.js',
  '^(?!.*\\.(mjs|cjs|ts|tsx|css|json)$)': '../../fileTransform.js',
  '\\.[jt]sx?$': '../../babelJestLoader.js',
 },
 transform: {
  '^.+\\.(css|scss|sass)$': '../../cssTransform.js',
  '^(?!.*\\.(mjs|cjs|ts|tsx|css|json)$)': '../../fileTransform.js',
  '\\.[jt]sx?$': '../../babelJestLoader.js',
 },

I’m using CSS modules and made sure I removed the '\\.(css|less|scss|sass)$':'identity-obj-proxy' from the moduleMapper field as well in the jest.config.js

I also have setupFilesAfterEnv field hooked up with a setup.ts file where I specify the paths to sass files that are included in @imports, trying varying pathing options and also tried importing them as global CSS in the same file as well

jestPreviewConfigure({
 autoPreview: true,
 sassLoadPaths: [
  './src/static/style/_variables.scss',
  './src/static/style/_mixins.scss',
  './src/static/style/_base.scss',
  './src/static/style/_fonts.scss',
  './src/static/style/_mapbox.scss',
  './src/static/style/style.scss',
 ],
});

Environment (please complete the following information)

• OS: Mac OS 12.4
• Browser: Chrome
• Jest version: 27.5.1

[nvh95]

Hi @vudjustin. Can you help to prepare a reproduction repository on GitHub/ https://codesandbox.io or https://stackblitz.com? That would help us to identify the issue faster. Thanks.

[ntt261298]

@vudjustin Can you try to use sassLoadPaths : ['src'] in jestPreviewConfigure ? sassLoadPaths is where jest-preview finds your scss imports. Example: @import 'static/style/_variables.scss';, if you specify sassLoadPaths : ['src'], jest-preview will try to find the resource from src folder (Absolute path to scss from root project will be src/static/style/_variables.scss). If it still doesn't work, it would be easier for us to detect the problem if you prepare a reproduction repository. Thanks.

[github-actions[bot]]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that are unactionable. Please reach out if you have more information for us! 💪