feat: Use swc instead of babel for tests + some tweak in docs

nvh95 · Jun 12, 2022 · 9633fd7 · 9633fd7
1 parent d8aca1b
commit 9633fd7
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 66 deletions.
diff --git a/examples/remix/.swcrc b/examples/remix/.swcrc
@@ -0,0 +1,31 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "transform": {
+      "react": {
+        "pragma": "React.createElement",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": false,
+        "runtime": "automatic"
+      },
+      "hidden": {
+        "jest": true
+      }
+    }
+  },
+  "module": {
+    "type": "commonjs",
+    "strict": false,
+    "strictMode": true,
+    "lazy": false,
+    "noInterop": false
+  }
+}
diff --git a/examples/remix/README.md b/examples/remix/README.md
@@ -6,6 +6,8 @@ This example demonstrates how to use `jest-preview` with [`Remix`](https://remix
 
 ## Install Jest
 
+<!-- TODO: Add Son's Setup Jest blog post here -->
+
 You have to manually install Jest in your Remix app.
 
 First, install `jest` itself. If you are using `jest` version 28 or later, you must install `jest-environment-jsdom` too ([reference](https://jestjs.io/docs/upgrading-to-jest28#jsdom)).
@@ -14,21 +16,46 @@ First, install `jest` itself. If you are using `jest` version 28 or later, you m
 npm install --save-dev jest jest-environment-jsdom
 ```
 
-Install Babel
+Install [SWC](https://swc.rs)
 
 ```bash
-npm install --save-dev @babel/preset-env @babel/preset-react babel-jest
+npm install --save-dev @swc/core @swc/jest
 ```
 
-Config Babel inside `babel.config.js`
+Config [SWC](https://swc.rs) inside `.swcrc`
 
-```bash
-module.exports = {
-  presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
-    ['@babel/preset-react', { runtime: 'automatic' }],
-  ],
-};
+```js
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "transform": {
+      "react": {
+        "pragma": "React.createElement",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": false,
+        "runtime": "automatic"
+      },
+      "hidden": {
+        "jest": true
+      }
+    }
+  },
+  "module": {
+    "type": "commonjs",
+    "strict": false,
+    "strictMode": true,
+    "lazy": false,
+    "noInterop": false
+  }
+}
 ```
 
 Next, install your favorite testing libraries. This example uses `react-testing-library`, at version 12 specifically ([version 13 wouldn't work](https://stackoverflow.com/questions/71713405/cannot-find-module-react-dom-client-from-node-modules-testing-library-react)). Optionally, you can install its companion [`jest-dom`](https://testing-library.com/docs/ecosystem-jest-dom/) package to add some useful matchers to Jest.
@@ -47,61 +74,46 @@ npm install --save-dev jest-preview
 
 Enable Jest Preview inside `jest.config.js`. The config options are largely up to you, but remember to remove/add the highlighted options as followed so Jest Preview could work properly.
 
-```diff
+```js
 module.exports = {
   collectCoverageFrom: [
     '**/*.{js,jsx,ts,tsx}',
     '!**/*.d.ts',
     '!**/node_modules/**',
   ],
   moduleNameMapper: {
--   // Handle CSS imports (with CSS modules)
--   // https://jestjs.io/docs/webpack#mocking-css-modules
--   '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
--
--   // Handle CSS imports (without CSS modules)
--   '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
--
--   // Handle image imports
--   // https://jestjs.io/docs/webpack#handling-static-assets
--   '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
-+   // Handle absolute imports in Remix
-+   '~/(.*)': '<rootDir>/app/$1',
+    // Handle absolute imports in Remix
+    '~/(.*)': '<rootDir>/app/$1',
   },
-+ setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   testPathIgnorePatterns: [
     '<rootDir>/node_modules/',
     '<rootDir>/.cache/',
     '<rootDir>/build/',
   ],
-+ testEnvironment: 'jsdom',
+  testEnvironment: 'jsdom',
   transform: {
-    // Use babel-jest to transpile tests
+    // Use @swc/jest to transpile tests
     // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
-    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
-+   '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css',
-+   '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': 'jest-preview/transforms/file',
+    '^.+\\.(js|jsx|ts|tsx)$': '@swc/jest',
+    '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css',
+    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
+      'jest-preview/transforms/file',
   },
-  transformIgnorePatterns: [
-    '/node_modules/',
--   '^.+\\.module\\.(css|sass|scss)$',
-  ],
+  transformIgnorePatterns: ['/node_modules/'],
 };
 ```
 
 Configure Jest Preview inside `jest.setup.js` (or any setup files specified in your `setupFilesAfterEnv` config), so Jest Preview knows which global CSS file to load. You can even set `autoPreview` to `true` so your failed test gets a preview automatically! 🤯
 
 ```js
 import { jestPreviewConfigure } from 'jest-preview';
+import './app/styles/global.css';
 
 jestPreviewConfigure({
-  // An array of relative paths from the root of your project
-  externalCss: [
-    'app/styles/global.css',
-  ],
-  // (Optional) Enable autoPreview so Jest Preview runs automatically
+  // Enable autoPreview so Jest Preview runs automatically
   // whenever your test fails, without you having to do anything!
-  // autoPreview: true,
+  autoPreview: true,
 });
 ```
 
@@ -110,17 +122,19 @@ jestPreviewConfigure({
 That's it! Now you can use Jest Preview in your test. Say we have `app/__tests__/index.test.tsx` as follow...
 
 ```tsx
-import { render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react';
 import { debug } from 'jest-preview';
-import Index from '../routes/index'
-import '@testing-library/jest-dom' // So we can use toBeInTheDocument assertion
+import Index from '../routes/index';
+import '@testing-library/jest-dom'; // So we can use toBeInTheDocument assertion
 
 it('should show welcome message', () => {
   render(<Index />);
 
   debug(); // Remove this line if you have enabled autoPreview in jest.setup.js
 
-  expect(screen.getByRole('heading', { name: /welcome to remix/i })).toBeInTheDocument();
+  expect(
+    screen.getByRole('heading', { name: /welcome to remix/i }),
+  ).toBeInTheDocument();
 });
 ```
 

diff --git a/examples/remix/babel.config.js b/examples/remix/babel.config.js
diff --git a/examples/remix/jest.config.js b/examples/remix/jest.config.js
@@ -16,13 +16,12 @@ module.exports = {
   ],
   testEnvironment: 'jsdom',
   transform: {
-    // Use babel-jest to transpile tests
+    // Use @swc/jest to transpile tests
     // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
-    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+    '^.+\\.(js|jsx|ts|tsx)$': '@swc/jest',
     '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css',
-    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': 'jest-preview/transforms/file',
+    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
+      'jest-preview/transforms/file',
   },
-  transformIgnorePatterns: [
-    '/node_modules/',
-  ],
+  transformIgnorePatterns: ['/node_modules/'],
 };
diff --git a/examples/remix/jest.setup.js b/examples/remix/jest.setup.js
@@ -1,11 +1,8 @@
 import { jestPreviewConfigure } from 'jest-preview';
+// Import your global CSS here
+import './app/styles/global.css';
 
 jestPreviewConfigure({
-  // An array of relative path from the root of your project
-  externalCss: [
-    'app/styles/global.css',
-  ],
-  // (Optional) Enable autoPreview so you get previewing for free,
-  // automatically without having to call debug(), whenever your test fails.
-  // autoPreview: true,
+  // Enable autoPreview to automatically preview the UI whenever your test fails.
+  autoPreview: true,
 });
diff --git a/examples/remix/package.json b/examples/remix/package.json
@@ -8,27 +8,26 @@
     "build": "remix build",
     "dev": "remix dev",
     "start": "remix-serve build",
-    "test": "jest --watch",
+    "test": "jest --watch --no-cache",
     "jest-preview": "jest-preview",
     "test:preview": "npm-run-all -p test jest-preview"
   },
   "dependencies": {
     "@remix-run/node": "^1.4.3",
     "@remix-run/react": "^1.4.3",
     "@remix-run/serve": "^1.4.3",
+    "@swc/core": "^1.2.198",
+    "@swc/jest": "^0.2.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "^7.16.7",
     "@remix-run/dev": "^1.4.3",
     "@remix-run/eslint-config": "^1.4.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
-    "babel-jest": "^27.5.1",
     "eslint": "^8.11.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",