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

davidpaley commented 4 years ago

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 commented 4 years ago

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"
    },

ahnpnl commented 4 years ago

For anyone who runs into this issue, I have created a repo to demonstrate how to fix this issue besides the workaround above by @davidpaley . You can find it here https://github.com/ahnpnl/react-ts-jest-babel

jayarjo commented 1 year ago

@ahnpnl your link is not available anymore. @davidpaley your approach worked, however I'm not sure why. Do you know why?

github-actions[bot] commented 1 year ago

Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

github-actions[bot] commented 1 year ago

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.

jestjs / jest

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