Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TS + SCSS = Cannot find module '../mocks/index.scss'.

See original GitHub issue

🐛 Bug Report

It seems to happen on the latest jest + ts-jest.

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    shared/components/Carousel/__tests__/index.test.tsx:6:20 - error TS2307: Cannot find module '../index.scss'.

    6 import styles from '../index.scss'

To Reproduce

Steps to reproduce the behavior:

//... 

import styles from '../mocks/index.scss' // fails while test is running here

describe('Test', () => {
   //...
})

Expected behavior

Should handle .scss imports without crashing.

Link to repl or repo (highly encouraged)

./jest.config.js configuration

module.exports = {
  cacheDirectory: '<rootDir>/.tmp/jest',
  coverageDirectory: './.tmp/coverage',
  moduleNameMapper: {
    '^.+\\.(css|scss|cssmodule)$': 'identity-obj-proxy'
  },
  modulePaths: ['<rootDir>'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
  globals: {
    NODE_ENV: 'test'
  },
  verbose: false,
  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  testPathIgnorePatterns: ['/node_modules/', '/__tests__/mocks/.*'],
  coveragePathIgnorePatterns: ['typings.d.ts'],
  transformIgnorePatterns: ['.*(node_modules)(?!.*torn.*).*$'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.tsx?$': 'ts-jest'
  },
  setupFiles: [
    '<rootDir>/setupTests.js'
    // '<rootDir>/node_modules/whatwg-fetch/fetch.js' // should be removed in future due to the tests running collision
  ],
  snapshotSerializers: ['enzyme-to-json/serializer']
}

envinfo

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.16.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  npmPackages:
    jest: ^25.1.0 => 25.1.0 
    ts-jest: 25.2.1
    babel-jest: 25.1.0

Issue Analytics

State:
Created 4 years ago
Comments:7

Top GitHub Comments

1reaction

rmanguinhocommented, May 12, 2020

Actually you need to remove node_modules and package.lock, than run npm install. The config is just this line in jest.config: moduleNameMapper: { ‘\.scss$’: ‘identity-obj-proxy’ }

1reaction

rmanguinhocommented, May 9, 2020

Do you have a GitHub repo with an example? I’m trying to make this work for days. If I test a file that loads SCSS file my test always fails and says: cannot find module ‘xxx.scss’