feat(test): add mocking CSS modules JEST

pableco · Sep 16, 2020 · b0716d6 · b0716d6
1 parent dc3c8cc
commit b0716d6
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 93 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 module.exports = {
     setupFilesAfterEnv: ['<rootDir>test/setup.js'],
     collectCoverage: true,
@@ -17,8 +18,9 @@ module.exports = {
         '^.+\\.(js|jsx)$': 'babel-jest',
     },
     verbose: true,
-    transformIgnorePatterns: ['/node_modules/(?!roi-.*)'],
+    transformIgnorePatterns: ['/node_modules/(?!@cdg.*)'],
     moduleNameMapper: {
-        '.svg': '<rootDir>/test/__mocks__/fileMock.js',
+        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+        '\\.(css|less|scss)$': 'identity-obj-proxy',
     },
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
     "enzyme-to-json": "^3.5.0",
-    "eslint": "^7.8.1",
+    "eslint": "^7.9.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-react": "^7.20.6",
@@ -66,9 +66,9 @@
     "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
     "jest": "^26.4.2",
-    "mini-css-extract-plugin": "^0.11.1",
+    "mini-css-extract-plugin": "^0.11.2",
     "node-sass": "^4.14.1",
-    "postcss-loader": "^4.0.1",
+    "postcss-loader": "^4.0.2",
     "postcss-preset-env": "^6.7.0",
     "postcss-smart-import": "^0.7.6",
     "react": "^16.13.1",

diff --git a/test/__snapshots__/example.test.js.snap b/test/__snapshots__/example.test.js.snap
@@ -2,27 +2,27 @@
 
 exports[`component snapshoot render with all props 1`] = `
 <li
-  className="list-item js--hover"
+  className="listItem js--hover"
 >
   <figure
-    className="list-figure"
+    className="listItem__figure"
   >
     <figcaption
-      className="list-figcaption"
+      className="listItem__figcaption"
     >
       <h3
-        className="list-item__title"
+        className="listItem__title"
       >
         Test title
       </h3>
       <h4
-        className="list-item__sub-title"
+        className="listItem__subTitle"
       >
         Subtitle test
       </h4>
     </figcaption>
     <div
-      className="list-item__img-fix"
+      className="listItem__imgFix"
       style={
         Object {
           "backgroundImage": "url(https://source.unsplash.com/random)",
@@ -31,54 +31,54 @@ exports[`component snapshoot render with all props 1`] = `
     />
     <img
       alt="Test title image"
-      className="list-item__img"
+      className="listItem__img"
       src="https://source.unsplash.com/random"
     />
     <div
-      className="list-item__content"
+      className="listItem__content"
     >
       <p
-        className="list-item__description"
+        className="listItem__description"
       >
         Aenean vitae neque ultricies, egestas eros non, bibendum purus.
     Suspendisse sodales quam non lectus imperdiet dignissim.
       </p>
       <button
-        className="list-item__action"
+        className="listItem__action"
       >
         Call now
       </button>
     </div>
     <span
-      className="list-item__extra"
+      className="listItem__extra"
     />
   </figure>
 </li>
 `;
 
 exports[`component snapshoot render without props 1`] = `
 <li
-  className="list-item js--hover"
+  className="listItem js--hover"
 >
   <figure
-    className="list-figure"
+    className="listItem__figure"
   >
     <figcaption
-      className="list-figcaption"
+      className="listItem__figcaption"
     >
       <h3
-        className="list-item__title"
+        className="listItem__title"
       >
         Test title
       </h3>
       <h4
-        className="list-item__sub-title"
+        className="listItem__subTitle"
       >
         Subtitle test
       </h4>
     </figcaption>
     <div
-      className="list-item__img-fix"
+      className="listItem__imgFix"
       style={
         Object {
           "backgroundImage": "url(https://source.unsplash.com/random)",
@@ -87,26 +87,26 @@ exports[`component snapshoot render without props 1`] = `
     />
     <img
       alt="Test title image"
-      className="list-item__img"
+      className="listItem__img"
       src="https://source.unsplash.com/random"
     />
     <div
-      className="list-item__content"
+      className="listItem__content"
     >
       <p
-        className="list-item__description"
+        className="listItem__description"
       >
         Aenean vitae neque ultricies, egestas eros non, bibendum purus.
     Suspendisse sodales quam non lectus imperdiet dignissim.
       </p>
       <button
-        className="list-item__action"
+        className="listItem__action"
       >
         Call now
       </button>
     </div>
     <span
-      className="list-item__extra"
+      className="listItem__extra"
     />
   </figure>
 </li>