routablehq / jest-scss-transform Goto Github PK

Describe the bug

Using jest-scss-transform with Jest 28 produces an error: (ok in jest 27)

 Invalid return value:
      `process()` or/and `processAsync()` method of code transformer found at
      "node_modules/jest-scss-transform/lib/index.js"
      should return an object or a Promise resolving to an object. The object
      must have `code` property with a string of processed code.
      This error may be caused by a breaking change in Jest 28:
      https://jestjs.io/docs/upgrading-to-jest28#transformer
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation

Possibly relates to a change in jest v28

process() and processAsync() methods of a custom transformer module cannot return a string anymore. They must always return an object:

 process(sourceText, sourcePath, options) {
-   return `module.exports = ${JSON.stringify(path.basename(sourcePath))};`;
+   return {
+     code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
+   };
  }

To Reproduce

Steps to reproduce the behavior:

1. Configure jest with jest-scss-transform.
2. Use jest 28

Expected behavior

Jest runs as expected

Environment (please complete the following information):

• Windows 11 21H2 22000.613
• jest-scc-transform v1.0.2
• Jest v28.0.3
• Node v16.14.2

I have Vue CLI project, so I use vue.config.js and I am providing paths to SASS so it knows where to look for dependency files

includePaths: [
          path.resolve(__dirname, 'src/styles'),
          path.resolve(__dirname, 'src/WS_UIkit/src/styles'),
        ],

I am not familiar with this jest transformers, so I do not know whether it takes this configuration into account.. because it seems that it is not 🤷

So I am looking for another way to provide this config to SASS but I didn't find it... it seems that SASS does not use some kind of sass.config.js or similar.

Thanks for any hints 🙏