Jest errors on SCSS `@import` syntax

[SLain123]

Hi everybody,

In my project, I have configured and used scss modules to style components. Everything worked fine and I created a lot of components, at the moment there is a need to cover them with tests, but when I try to start jest with any of the components using styles through the scss module, I get an error:

src/test/Button.test.tsx
  ● Test suite failed to run

    C:\Users\Admin\Documents\work\ui-kit\src\components\button\Button.module.scss:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import "../../styles/variables.scss";
                                                                                             ^

    SyntaxError: Invalid or unexpected token

       6 | import { getStyleType, getTripletsIcon } from './utils';
       7 |
    >  8 | import Styles from './Button.module.scss';
         | ^
       9 |
      10 | const Button: FC<ButtonI> = ({

It's look like jest can't use scss syntax (@import). Maybe someone has faced a similar problem and it can be solved with an additional configuration? I tried a lot of configs, including from neighboring branches, and it didn't give results.

Thanks!

tsdx.config.js

```js const postcss = require('rollup-plugin-postcss'); const autoprefixer = require('autoprefixer'); const cssnano = require('cssnano'); const image = require('@rollup/plugin-image'); const postcssSVG = require('postcss-svg'); module.exports = { /** * @param {import('rollup/dist/rollup').InputOptions} config */ rollup(config, options) { config.plugins.push( postcss({ modules: true, plugins: [ autoprefixer(), postcssSVG(), cssnano({ preset: 'default', }), ], inject: false, // only write out CSS for the first bundle (avoids pointless extra files): extract: !!options.writeMeta, }) ); config.plugins.unshift(image()); return config; }, }; ```

tsconfig.json

```json { "include": ["src", "types"], "compilerOptions": { "target": "es5", "module": "esnext", "lib": ["dom", "esnext"], "sourceMap": false, "importHelpers": true, "declaration": true, "rootDir": "./src", "strict": true, "noImplicitAny": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictPropertyInitialization": true, "noImplicitThis": true, "alwaysStrict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "moduleResolution": "node", "baseUrl": "./", "paths": { "*": ["src/*", "node_modules/*"] }, "jsx": "react", "esModuleInterop": true } } ```

babel.config.js

```js module.exports = { transformIgnorePatterns: [ '[/\\\\]node_modules[/\\\\](?!some-esm-package).+\\.(js|jsx)$', ], }; ```

package.json

```json "scripts": { "start": "tsdx watch", "build": "tsdx build", "test": "tsdx test --env=jsdom", "test:coverage": "tsdx test --coverage", "prepare": "husky install", "figma-imports": "node figma-imports" }, "peerDependencies": { "react": ">=16" }, "husky": { "hooks": { "pre-commit": "pretty-quick --staged" } }, "prettier": { "printWidth": 80, "semi": true, "singleQuote": true, "trailingComma": "es5" }, "jest": { "setupFilesAfterEnv": [ "./src/setupTests.ts" ] }, "devDependencies": { "@figma-export/output-styles-as-sass": "^3.3.1", "@rollup/plugin-image": "^2.1.0", "@types/jest": "^27.0.1", "@types/lodash.throttle": "^4.1.6", "@types/react": "^17.0.19", "@types/react-calendar": "^3.5.0", "@types/react-dom": "^17.0.9", "@types/react-image-gallery": "^1.0.5", "@types/react-select": "^4.0.17", "autoprefixer": "^10.3.2", "babel-preset-stage-2": "^6.24.1", "cssnano": "^5.0.8", "dotenv": "^10.0.0", "figma-api": "^1.6.1", "husky": "^7.0.1", "postcss": "^8.3.6", "postcss-svg": "^3.0.0", "prettier": "^2.3.2", "pretty-quick": "^3.1.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-dropzone": "^11.3.4", "react-select": "^4.3.1", "rollup-plugin-postcss": "^4.0.1", "sass": "^1.38.0", "tsdx": "^0.14.1", "tslib": "^2.3.1", "typescript": "^4.3.5" }, "dependencies": { "@babel/plugin-transform-modules-commonjs": "^7.17.7", "babel-plugin-transform-export-extensions": "^6.22.0", "jest-enzyme": "^7.1.2", "next": "^11.1.0", "react-calendar": "^3.7.0", "react-collapsible": "^2.8.4", "react-spinners": "^0.11.0", "use-deep-compare-effect": "^1.8.1" } ```

[agilgur5]

This is out-of-scope for TSDX and is very specific to Jest, not TSDX; this is a question for Jest, not TSDX. Issues are also not a support forum and issue templates are there for a reason.

I'll give you a quick answer though, you'll want to configure a Jest transformer in order for Jest to parse your SCSS files. For instance, Jest gives two variations for CSS transformers in its docs. These are simple mocks. There's also a package jest-scss-transform that might interest you if you need something more than a mock.