ts-jest failing for scss files

[sarahshekeran]

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.

[anshulguleria]

So If I am using ts-jest in a React based package which is using CSS or SASS modues it doesn't work out of the box with ts-jest?

If you refer some libraray which acts as transformer @ahnpnl that would help.

I am getting similar error and as suggested in some stackoverflow post I tried using identity-obj-proxy but the error doesn't go away.

I found another library jest-scss-transform, would this help?

What I am not able to understand is why the mocks in above example is not getting used.

[ahnpnl]

ts-jest only takes care of js/jsx/ts/tsx out of the box.

Here is an example of jest.config.js in a React app using ts-jest with babel-jest https://github.com/ahnpnl/react-ts-jest-babel/blob/master/jest.config.js

In this jest.config.js, the transform object has 4 things:

• Transform all ts/tsx files with ts-jest

• Transform all js/jsx files with babel-jest

• Transform all css files with cssTransform.js

• Transform anything that is not js|jsx|ts|tsx|css|json with fileTransform.js

If looking into cssTransform.js, it says very simple

This is a custom Jest transformer turning style imports into empty objects.

You can obtain the same behavior by using that cssTransform.js or write your own transformers.

In general, you need to inform jest to transform something by a transformer. Otherwise, jest won't understand and it can't process the files.

[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

[anshulguleria]

@davidpaley For me setting the diagnostics false removed the error. I haven't been able to test with transform yet. But will try to see if I can use some of those transforms.

[davidpaley]

@davidpaley For me setting the diagnostics false removed the error. I haven't been able to test with transform yet. But will try to see if I can use some of those transforms.

That worked for me too!! THANK YOU @anshulguleria!

[ahnpnl]

@davidpaley @anshulguleria I just added an example how to import scss into tsx for a React app. You can check it here https://github.com/ahnpnl/react-ts-jest-babel

Basically the approach follows this https://stackoverflow.com/questions/51038522/how-to-import-scss-file-as-variable-in-react-with-typescript

I can only make the test pass with importing scss but I don't use React so I don't know what else can be tested

[davidpaley]

@davidpaley @anshulguleria I just added an example how to import scss into tsx for a React app. You can check it here https://github.com/ahnpnl/react-ts-jest-babel

Basically the approach follows this https://stackoverflow.com/questions/51038522/how-to-import-scss-file-as-variable-in-react-with-typescript

I can only make the test pass with importing scss but I don't use React so I don't know what else can be tested

I will help you, adding some components with CSS Modules, so it is more clear the example @ahnpnl. Give me some time and I will make a PR related with that in your project.

PS: Adding some Redux staff would be great too but I don't know if it is over-complicating the example too much

[ahnpnl]

@davidpaley thank you for your PR. The repo is to demonstrate very basic example of using ts-jest in combination with babel on a React project so I would prefer to keep it as simple as possible. I don't think Redux is needed

[osequi]

ts-jest only takes care of js/jsx/ts/tsx out of the box.

Here is an example of jest.config.js in a React app using ts-jest with babel-jest https://github.com/ahnpnl/react-ts-jest-babel/blob/master/jest.config.js

In this jest.config.js, the transform object has 4 things:

* Transform all `ts/tsx` files with `ts-jest`

* Transform all `js/jsx` files with `babel-jest`

* Transform all `css` files with `cssTransform.js`

* Transform anything that is not `js|jsx|ts|tsx|css|json` with `fileTransform.js`

If looking into cssTransform.js, it says very simple

This is a custom Jest transformer turning style imports into empty objects.

You can obtain the same behavior by using that cssTransform.js or write your own transformers.

In general, you need to inform jest to transform something by a transformer. Otherwise, jest won't understand and it can't process the files.

I've followed the instructions. My jest.config.js file looks like:

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  globals: {
    /**
     * A Next.js workaround
     * See https://github.com/vercel/next.js/issues/8663
     */
    "ts-jest": {
      tsconfig: "tsconfig.jest.json",
    },
  },
  projects: [
    /**
     * Configuring different test environments.
     * For React components: 'jsdom'
     * For hooks, theme: node
     * @see https://stackoverflow.com/questions/41318115/testing-two-environments-with-jest
     */
    "<rootDir>/src/components",
    "<rootDir>/src/hooks",
    "<rootDir>/src/theme",
  ],
  transform: {
    /**
     * Skipping non-testable files.
     * @see https://jestjs.io/docs/en/webpack#handling-static-assets
     */
    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/config/jest/fileTransform.js",
  },
};

And still getting the error.