Merge pull request #40 from nvh95/css-modules

Support CSS Modules's jest code transformation

CHANGELOG.md

@@ -1,42 +1,48 @@
-### 0.1.0
+# 0.1.1
 
-### Features
+## Features
+
+- Support CSS Modules
+
+# 0.1.0
+
+## Features
 
 - [BREAKING CHANGES] Simplify usage of the core function of jest-preview: `preview(htmlElement)` to `preview.debug()`.
 - Users do not need to pass any argument to `preview.debug()`, the default is `document.body` which is the whole page (how authors expect users to use jest-preview).
 - Add `title` and `favicon.ico` for Dashboard
 
-### Fixes
+## Fixes
 
 - [x] Fix `externalCss` get cached
 
 # 0.0.3
 
-### Features
+## Features
 
 - Rewrite transforms. Do not need to copy assets to cache folder.
 - Add `processFileCRA` for CRA file transform.
 - [BREAKING CHANGES for CRA users] CRA users need to update `fileTransform.js` to use `processFileCRA`. See more at [CRA README.md](./examples/create-react-app/README.md#installation-and-usage)
 
-### Chores
+## Chores
 
 - Simplify the usage in docs and examples: `preview(render(<App />).container)` => `preview(document.body)`.
 
 # 0.0.2
 
 [0.0.2-alpha.0](#002-alpha0)
 
-### Chores
+## Chores
 
 - Reuse opening jest-preview server tab on Chrome Mac
 
 # 0.0.2-alpha.0
 
-### Fixes
+## Fixes
 
 - [x] Fix #15
 
-### Chores
+## Chores
 
 - [x] Update publish scripts
 

README.md

@@ -14,7 +14,6 @@ Debug your Jest tests. Effortlessly. 🛠🖼
   <img align="center" src="https://user-images.githubusercontent.com/8603085/162563155-7e18c9ef-4fe3-45f2-9065-7fcea8ddb18e.gif" alt="Jest Preview Demo" />
 </p>
 
-
 <p align="center">
   <a href="https://stackblitz.com/edit/jest-preview?file=README.md" title="Try Jest Preview Now">Try Jest Preview Online</a>. No downloads needed!
 </p>
@@ -42,7 +41,7 @@ When writing tests using Jest, we usually debug by reading the HTML code. Someti
   - ✅ [Direct CSS import](#3-configure-jests-transform-to-intercept-css-and-files)
   - ✅ [Styled-components](https://styled-components.com/)
   - ✅ [External CSS](#4-optional-configure-external-css)
-  - 🚧 [CSS Modules](https://github.com/css-modules/css-modules)
+  - ✅ [CSS Modules](https://github.com/css-modules/css-modules)
   - 🚧 [Sass](https://sass-lang.com/)
 - 🌄 Support viewing images.
 
@@ -116,7 +115,21 @@ transform: {
   },
 ```
 
-### 4. (Optional) Configure external CSS
+### 4. If you use CSS Modules, make sure it doesn't get ignored
+
+In most cases, CSS Modules is ignored in Jest environment. For example, Create React App default configuration ignores CSS Modules via [transformIgnorePatterns](https://github.com/facebook/create-react-app/blob/63bba07d584a769cfaf7699e0aab92ed99c3c57e/packages/react-scripts/scripts/utils/createJestConfig.js#L53) and [moduleNameMapper](https://github.com/facebook/create-react-app/blob/63bba07d584a769cfaf7699e0aab92ed99c3c57e/packages/react-scripts/scripts/utils/createJestConfig.js#L58). To make CSS Modules works with Jest Preview, we need to make sure it isn't ignored. Remove options to ignore CSS Modules or mapping using a third party library (such as [identity-obj-proxy](https://github.com/keyz/identity-obj-proxy)).
+
+```diff
+// jest.config.js
+transformIgnorePatterns: [
+-  '^.+\\.module\\.(css|sass|scss)$',
+],
+moduleNameMapper: {
+-  '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+},
+```
+
+### 5. (Optional) Configure external CSS
 
 Sometimes, there are some CSS files imported outside your current test components (e.g: CSS imported in `src/index.js`, `src/main.tsx`). In this case, you can manually add those CSS files to `jest-preview` by `jestPreviewConfigure`. Notice that they should be path from root of your project.
 

demo/App.tsx

@@ -5,6 +5,7 @@ import logo from './logo.svg';
 import logo2 from './assets/images/logo.svg';
 import './App.css';
 import './assets/css/App.css';
+import { cssModule } from './style.module.css';
 
 function App() {
   const [count, setCount] = useState(0);
@@ -18,6 +19,7 @@ function App() {
         <p className="global-css">
           This text is styled by global css which is not imported to App.tsx
         </p>
+        <p className={cssModule}>This text is styled by CSS Modules</p>
         <p>
           <button
             data-testid="increase"

demo/main.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import './global.css';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-)
+  document.getElementById('root'),
+);

demo/style.module.css

@@ -0,0 +1,3 @@
+.cssModule {
+  color: green;
+}

examples/vite-react/jest.config.js

@@ -17,12 +17,11 @@ module.exports = {
   },
   transformIgnorePatterns: [
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
-    '^.+\\.module\\.(css|sass|scss)$',
   ],
   modulePaths: ['<rootDir>/src'],
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    // Used to dedupe `styled-component` when run `npm link` in development
     '^styled-components$': '<rootDir>/node_modules/styled-components',
   },
   moduleFileExtensions: [