ts-jest failing for scss files

Issue

I get the following error when I run ts-jest:

error TS2307: Cannot find module '../styles/styles.scss'
import css from '../styles/styles.scss'

My jest.config.js file is as follows:

module.exports = {
  testEnvironment: "node",
  preset: 'ts-jest',
  setupFilesAfterEnv: ["<rootDir>/__tests__/setup-enzyme.ts"],
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  testRegex: "(/__tests__/.*|(\\.|/).*spec)\\.tsx$",
  moduleFileExtensions: [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  snapshotSerializers: ["enzyme-to-json/serializer"],
  globals: {
    "ts-jest": {
      "tsConfig": "<rootDir>/tsconfig.jest.json"
    }
  },
  moduleNameMapper:{
    "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
  }
};

It does not pick up the mocks I have specified for scss files. I need to explicitly specify the following configuration in order for the tests to pass:

  globals: {
    "ts-jest": {
      "tsConfig": "<rootDir>/tsconfig.jest.json",
      diagnostics: false
    }
  },

Versions:

“jest”: “^25.1.0”, “ts-jest”: “^25.2.0”, “@types/jest”: “^25.1.2”,

Expected Behaviour

The tests should pick up the mocks mentioned in the moduleNameMapper section of the jest.config.js file even when diagnostics: true.

[ahnpnl]

ts-jest only handles typescript files. If you want to handle scss, you need a custom jest transformer to handle that.

[davidpaley]

I am using the same aproach that you @ahnpnl shared for my project, using similar type of transform and it is still not working for me. @anshulguleria could you fix this?

This is my package.json config:

"jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "modulePaths": [
      "<rootDir>/src"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}"
    ],
    "resolver": "jest-pnp-resolver",
    "automock": false,
    "setupFiles": [
      "react-app-polyfill/jsdom",
      "./src/setupTests.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.+(ts|tsx|js)",
      "<rootDir>/src/**/?(*.)+(spec|test).+(ts|tsx|js)"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest",
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|scss|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "ts",
      "tsx",
      "node"
    ],
    "globals": {
      "ts-jest": {
        "diagnostics": {
          "ignoreCodes": [
            7006,
            7016
          ]
        }
      }
    }
  },

I also tried with https://www.npmjs.com/package/jest-scss-transform but without success