chore(jest): add jest-css-modules-transform

belgattitude · Jun 8, 2021 · a9c0d5e · a9c0d5e
1 parent 697842e
commit a9c0d5e
Show file tree

Hide file tree

Showing 14 changed files with 26 additions and 192 deletions.
diff --git a/.changeset/chatty-kangaroos-know.md b/.changeset/chatty-kangaroos-know.md
@@ -0,0 +1,7 @@
+---
+'blog-app': patch
+'web-app': patch
+'@your-org/core-lib': patch
+---
+
+Jest: use css transform from jest-css-modules-transform
diff --git a/apps/blog-app/config/jest/css-transform.js b/apps/blog-app/config/jest/css-transform.js
diff --git a/apps/blog-app/config/jest/file-transform.js b/apps/blog-app/config/jest/file-transform.js
diff --git a/apps/blog-app/jest.config.js b/apps/blog-app/jest.config.js
@@ -29,17 +29,13 @@ const config = {
   rootDir: './src',
   transform: {
     ...tsPreset.transform,
-    '^.+\\.css$': '<rootDir>/../config/jest/css-transform.js',
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':
-      '<rootDir>/../config/jest/file-transform.js',
   },
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
-  transformIgnorePatterns: ['^.+\\.module\\.(css|sass|scss|less)$'],
   testMatch: ['<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}'],
   moduleNameMapper: {
     // For @testing-library/react
     '^@/test-utils$': '<rootDir>/../config/jest/test-utils',
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',
     ...getTsConfigBasePaths(),
   },
   // false by default, overrides in cli, ie: yarn test:unit --collect-coverage=true

diff --git a/apps/blog-app/package.json b/apps/blog-app/package.json
@@ -47,7 +47,6 @@
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
     "autoprefixer": "^10.2.6",
-    "camelcase": "^6.2.0",
     "cross-env": "^7.0.3",
     "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
@@ -60,6 +59,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^4.6.0",
     "jest": "^27.0.4",
+    "jest-css-modules-transform": "^4.2.1",
     "next-transpile-modules": "^7.2.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.0",

diff --git a/apps/web-app/config/jest/css-transform.js b/apps/web-app/config/jest/css-transform.js
diff --git a/apps/web-app/config/jest/file-transform.js b/apps/web-app/config/jest/file-transform.js
diff --git a/apps/web-app/jest.config.js b/apps/web-app/jest.config.js
@@ -29,17 +29,13 @@ const config = {
   rootDir: './src',
   transform: {
     ...tsPreset.transform,
-    '^.+\\.css$': '<rootDir>/../config/jest/css-transform.js',
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':
-      '<rootDir>/../config/jest/file-transform.js',
   },
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
-  transformIgnorePatterns: ['^.+\\.module\\.(css|sass|scss|less)$'],
   testMatch: ['<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}'],
   moduleNameMapper: {
     // For @testing-library/react
     '^@/test-utils$': '<rootDir>/../config/jest/test-utils',
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',
     ...getTsConfigBasePaths(),
   },
   // false by default, overrides in cli, ie: yarn test:unit --collect-coverage=true

diff --git a/apps/web-app/package.json b/apps/web-app/package.json
@@ -52,7 +52,6 @@
     "@typescript-eslint/parser": "^4.26.0",
     "@welldone-software/why-did-you-render": "^6.1.4",
     "autoprefixer": "^10.2.6",
-    "camelcase": "^6.2.0",
     "cross-env": "^7.0.3",
     "dotenv-flow": "^3.2.0",
     "dotenv-flow-cli": "^1.0.0",
@@ -67,6 +66,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^4.6.0",
     "jest": "^27.0.4",
+    "jest-css-modules-transform": "^4.2.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.0",
     "prettier": "^2.3.1",

diff --git a/packages/core-lib/config/jest/css-transform.js b/packages/core-lib/config/jest/css-transform.js
diff --git a/packages/core-lib/config/jest/file-transform.js b/packages/core-lib/config/jest/file-transform.js
diff --git a/packages/core-lib/jest.config.js b/packages/core-lib/jest.config.js
@@ -29,17 +29,12 @@ const config = {
   rootDir: './src',
   transform: {
     ...tsjPreset.transform,
-    '^.+\\.css$': '<rootDir>/../config/jest/css-transform.js',
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':
-      '<rootDir>/../config/jest/file-transform.js',
   },
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
-  transformIgnorePatterns: ['^.+\\.module\\.(css|sass|scss|less)$'],
   testMatch: ['<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}'],
   moduleNameMapper: {
     // For @testing-library/react
     '^@/test-utils$': '<rootDir>/../config/jest/test-utils',
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
     ...getTsConfigBasePaths(),
   },
   // false by default, overrides in cli, ie: yarn test:unit --collect-coverage=true

diff --git a/packages/core-lib/package.json b/packages/core-lib/package.json
@@ -39,7 +39,6 @@
     "@types/react-dom": "^17.0.6",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
-    "camelcase": "^6.2.0",
     "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "2.23.4",

diff --git a/yarn.lock b/yarn.lock
@@ -3327,7 +3327,6 @@ __metadata:
     "@types/react-dom": ^17.0.6
     "@typescript-eslint/eslint-plugin": ^4.26.0
     "@typescript-eslint/parser": ^4.26.0
-    camelcase: ^6.2.0
     eslint: ^7.28.0
     eslint-config-prettier: ^8.3.0
     eslint-plugin-import: 2.23.4
@@ -4205,7 +4204,6 @@ __metadata:
     "@your-org/core-lib": "workspace:*"
     "@your-org/ui-lib": "workspace:*"
     autoprefixer: ^10.2.6
-    camelcase: ^6.2.0
     cross-env: ^7.0.3
     eslint: ^7.28.0
     eslint-config-prettier: ^8.3.0
@@ -4218,6 +4216,7 @@ __metadata:
     eslint-plugin-react-hooks: ^4.2.0
     eslint-plugin-testing-library: ^4.6.0
     jest: ^27.0.4
+    jest-css-modules-transform: ^4.2.1
     next: ^10.2.3
     next-secure-headers: ^2.2.0
     next-seo: ^4.24.0
@@ -8593,6 +8592,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-css-modules-transform@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "jest-css-modules-transform@npm:4.2.1"
+  dependencies:
+    camelcase: ^6.2.0
+    postcss: ^7.0.30 || ^8.0.0
+    postcss-nested: ^4.2.1 || ^5.0.0
+  checksum: fb07618326faa9c5d312068ec802f0c534d04369a8e325a90e7f1cb53000d038e65268e8f46e79b9427387e78306b82903a8fc0fe7983d650c5eef4ceb922a25
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:^26.0.0":
   version: 26.6.2
   resolution: "jest-diff@npm:26.6.2"
@@ -11811,7 +11821,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-nested@npm:5.0.5":
+"postcss-nested@npm:5.0.5, postcss-nested@npm:^4.2.1 || ^5.0.0":
   version: 5.0.5
   resolution: "postcss-nested@npm:5.0.5"
   dependencies:
@@ -12046,7 +12056,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.6, postcss@npm:^8.2.1, postcss@npm:^8.3.0":
+"postcss@npm:^7.0.30 || ^8.0.0, postcss@npm:^8.1.6, postcss@npm:^8.2.1, postcss@npm:^8.3.0":
   version: 8.3.0
   resolution: "postcss@npm:8.3.0"
   dependencies:
@@ -15161,7 +15171,6 @@ resolve@^2.0.0-next.3:
     "@your-org/db-main-prisma": "workspace:*"
     "@your-org/ui-lib": "workspace:*"
     autoprefixer: ^10.2.6
-    camelcase: ^6.2.0
     cors: ^2.8.5
     cross-env: ^7.0.3
     dotenv-flow: ^3.2.0
@@ -15177,6 +15186,7 @@ resolve@^2.0.0-next.3:
     eslint-plugin-react-hooks: ^4.2.0
     eslint-plugin-testing-library: ^4.6.0
     jest: ^27.0.4
+    jest-css-modules-transform: ^4.2.1
     next: ^10.2.3
     next-auth: ^3.25.0
     next-connect: ^0.10.1