Problems with create-react-app + typescript + CSS Modules + SASS

I am using a React app using create-react-app, CSS Modules with SASS, and Typescript. For files that do not need styles, the automated tests work great. However, when I test some file that has styles I get this error:

Some relevant files related with this:

• package.json:

{
  "name": "aime-portal",
  "version": "5.4.1",
  "private": true,
  "scripts": {
    "start": "node scripts/start.js",
    "build-sw": "node ./src/sw-build.js",
    "clean-cra-sw": "rm -f build/precache-manifest.*.js && rm -f build/service-worker.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "lint-staged": "lint-staged",
    "lint": "eslint --ext .js src",
    "fix-lint": "eslint --fix --ext .js",
    "fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' ",
    "fix-styles": "prettier-stylelint --write 'src/**/*.{css,scss}' "
  },
  "dependencies": {
    "@babel/core": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@bugsnag/js": "^6.2.0",
    "@bugsnag/plugin-react": "^6.2.0",
    "@mars/heroku-js-runtime-env": "^3.0.2",
    "@types/jest": "^25.2.1",
    "@types/node": "^12.7.12",
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4",
    "@types/react-redux": "^7.1.7",
    "@uppy/aws-s3": "^1.2.0",
    "@uppy/core": "^1.2.0",
    "@uppy/dashboard": "^1.2.0",
    "@uppy/react": "^1.2.0",
    "@uppy/webcam": "^1.3.0",
    "aime-blueprint": "2.2.11",
    "airtable": "^0.6.0",
    "auth0-js": "^9.13.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-named-asset-import": "^0.3.4",
    "bfj": "^6.1.1",
    "camel-to-kebab": "^1.1.0",
    "case-sensitive-paths-webpack-plugin": "^2.2.0",
    "chalk": "^2.4.2",
    "classnames": "^2.2.6",
    "core-js": "^3.6.4",
    "country-list": "^2.1.0",
    "cross-fetch": "^3.0.2",
    "css-loader": "^2.1.1",
    "dotenv-expand": "^5.1.0",
    "dotenv-safe": "^8.2.0",
    "file-loader": "^3.0.1",
    "flatfile-csv-importer": "^0.1.16",
    "fs-extra": "^8.0.1",
    "html-webpack-plugin": "^4.0.0-beta.5",
    "jest-css-modules": "^2.1.0",
    "jest-fetch-mock": "^3.0.3",
    "js-search": "^1.4.2",
    "mini-css-extract-plugin": "^0.6.0",
    "moment": "^2.24.0",
    "node-noop": "^1.0.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "pnp-webpack-plugin": "^1.6.4",
    "prettier": "^1.19.1",
    "promise-polyfill": "8.1.3",
    "prop-types": "^15.7.2",
    "qs": "^6.9.3",
    "raf": "^3.4.1",
    "rc-select": "^9.2.1",
    "rc-table": "^6.5.0",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.5",
    "react-day-picker": "^7.4.0",
    "react-dev-utils": "^9.0.1",
    "react-dom": "^16.8.6",
    "react-ga": "^2.5.7",
    "react-helmet": "^5.2.1",
    "react-intl-tel-input": "^7.0.1",
    "react-modal": "^3.10.1",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.0.0",
    "react-test-renderer": "^16.13.1",
    "react-toastify": "^5.3.2",
    "redux": "^4.0.1",
    "redux-mock-store": "^1.5.4",
    "redux-thunk": "^2.3.0",
    "resolve": "^1.10.1",
    "terser-webpack-plugin": "^2.2.1",
    "ts-jest": "^25.5.0",
    "typescript": "^3.8.3",
    "url-loader": "^3.0.0",
    "url-search-params-polyfill": "^7.0.0",
    "webpack": "^4.31.0",
    "webpack-dev-server": "^3.10.2",
    "webpack-manifest-plugin": "^2.0.4",
    "workbox-build": "^5.1.2",
    "workbox-webpack-plugin": "^5.1.3"
  },
  "resolutions": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-transition-group": "^4.0.1"
  },
  "devDependencies": {
    "@svgr/webpack": "^4.2.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^26.0.1",
    "babel-preset-react-app": "^9.1.1",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-compat": "^3.1.1",
    "eslint-plugin-flowtype": "^3.13.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-markdown": "^1.0.0",
    "eslint-plugin-react": "^7.13.0",
    "husky": "^2.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "25.x",
    "jest-pnp-resolver": "^1.2.1",
    "jest-resolve": "^26.0.1",
    "lint-staged": "^10.1.2",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.6.0",
    "postcss-safe-parser": "^4.0.1",
    "prettier-eslint": "^9.0.0",
    "prettier-eslint-cli": "^5.0.0",
    "prettier-stylelint": "^0.4.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^1.1.3",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^20.0.0"
  },
  "lint-staged": {
    "**/*.{js,jsx}": "eslint --ext .js",
    "**/*.less": "stylelint --syntax scss"
  },
  "browserslist": [
    "> 5%",
    "last 1 versions",
    "not dead",
    "not ie 11",
    "not bb <=10",
    "not ExplorerMobile <=11",
    "not Android < 4.4",
    "not ie <= 8",
    "not op_mini all",
    "not baidu <= 8.17",
    "not and_qq >= 1.2"
  ],
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "modulePaths": [
      "<rootDir>/src"
    ],
    "moduleDirectories": [
      "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|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
          ]
        }
      }
    }
  },
  "babel": {
    "presets": [
      "react-app",
      "@babel/preset-env"
    ]
  }
}

• setupTest.js

const fetchMock = require('jest-fetch-mock');

jest.setMock('cross-fetch', fetchMock);

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn(),
};
global.localStorage = localStorageMock;

• tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "esModuleInterop": true
  },
  "include": ["./src/**/*"]
}

Expected behavior

Execute the tests using CSS Modules correctly.

[davidpaley]

Just for the record, I could fix this setting diagnostics to false:

"globals": {
      "ts-jest": {
        "diagnostics": false
      }
    }

I am also using babel-jest for the moduleNameMapper

"moduleNameMapper": {
      "^.+\\.(css|less|scss)$": "babel-jest"
    },

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.