Switch from Babel to SWC in Jest (#6205)

devongovett · web-flow · commit 17751bb75cf4 · 2024-04-15T15:08:15.000-07:00
diff --git a/jest.config.js b/jest.config.js
@@ -169,7 +169,7 @@ module.exports = {
   testPathIgnorePatterns: [
     '/node_modules/',
     '\\.ssr\\.test\\.[tj]sx?$'
-  ]
+  ],
 
   // The regexp pattern or array of patterns that Jest uses to detect test files
   // testRegex: [],
@@ -187,7 +187,26 @@ module.exports = {
   // timers: "real",
 
   // A map from regular expressions to paths to transformers
-  // transform: null,
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+            importAssertions: true
+          },
+          
+          transform: {
+            react: {
+              runtime: 'automatic'
+            }
+          }
+        }
+      }
+    ]
+  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [
diff --git a/jest.ssr.config.js b/jest.ssr.config.js
@@ -47,5 +47,26 @@ module.exports = {
   // The glob patterns Jest uses to detect test files
   testMatch: [
     '**/packages/**/*.ssr.test.[tj]s?(x)'
-  ]
+  ],
+
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+            importAssertions: true
+          },
+
+          transform: {
+            react: {
+              runtime: 'automatic'
+            }
+          }
+        }
+      }
+    ]
+  },
 };
diff --git a/lib/jestResolver.js b/lib/jestResolver.js
@@ -15,15 +15,31 @@ const path = require('path');
 const crypto = require('crypto');
 const fs = require('fs');
 const {threadId} = require('worker_threads');
+const glob = require('glob');
 
-const cacheDir = path.join(__dirname, '..', 'node_modules', '.cache', 'intl');
+const intlCacheDir = path.join(__dirname, '..', 'node_modules', '.cache', 'intl');
+const globCacheDir = path.join(__dirname, '..', 'node_modules', '.cache', 'glob');
 try {
-  fs.mkdirSync(cacheDir, {recursive: true});
+  fs.mkdirSync(intlCacheDir, {recursive: true});
+  fs.mkdirSync(globCacheDir, {recursive: true});
 } catch (err) {
   // ignore
 }
 
 module.exports = (request, options) => {
+  // Handle glob imports.
+  if (request.endsWith('*.json')) {
+    let files = glob.sync(request, {cwd: options.basedir});
+    let source = '';
+    for (let file of files) {
+      source += `exports['${path.basename(file, '.json')}'] = require('${path.join(options.basedir, file)}');\n`;
+    }
+    let hash = crypto.createHash('md5');
+    hash.update(source);
+    let cacheFile = path.join(globCacheDir, hash.digest('hex'));
+    return writeCacheFile(cacheFile, source);
+  }
+
   let resolved = options.defaultResolver(request, {
     ...options,
     // https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
@@ -40,19 +56,22 @@ module.exports = (request, options) => {
 
     let hash = crypto.createHash('md5');
     hash.update(res);
-    let cacheFile = path.join(cacheDir, hash.digest('hex') + '.js');
+    let cacheFile = path.join(intlCacheDir, hash.digest('hex') + '.js');
+    return writeCacheFile(cacheFile, res);
+  }
 
-    // If cache file already exists, return it.
-    if (fs.existsSync(cacheFile)) {
-      return cacheFile;
-    }
+  return resolved;
+};
 
-    // Otherwise, write it atomically to avoid race conditions between threads/processes.
-    let tmpFile = cacheFile + '.' + process.pid + (threadId != null ? '.' + threadId : '');
-    fs.writeFileSync(tmpFile, res);
-    fs.renameSync(tmpFile, cacheFile);
+function writeCacheFile(cacheFile, res) {
+  // If cache file already exists, return it.
+  if (fs.existsSync(cacheFile)) {
     return cacheFile;
   }
 
-  return resolved;
-};
+  // Otherwise, write it atomically to avoid race conditions between threads/processes.
+  let tmpFile = cacheFile + '.' + process.pid + (threadId != null ? '.' + threadId : '');
+  fs.writeFileSync(tmpFile, res);
+  fs.renameSync(tmpFile, cacheFile);
+  return cacheFile;
+}
diff --git a/package.json b/package.json
@@ -61,17 +61,17 @@
   "devDependencies": {
     "@actions/core": "^1.1.0",
     "@actions/github": "^1.1.0",
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/node": "^7.12.10",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
-    "@babel/plugin-syntax-decorators": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@babel/register": "^7.12.10",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.3",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/node": "^7.23.9",
+    "@babel/plugin-proposal-decorators": "^7.24.1",
+    "@babel/plugin-syntax-decorators": "7.24.1",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@babel/register": "^7.23.7",
     "@octokit/rest": "*",
     "@parcel/optimizer-data-url": "^2.12.0",
     "@parcel/optimizer-terser": "^2.12.0",
@@ -95,6 +95,7 @@
     "@storybook/test-runner": "^0.9.0",
     "@storybook/testing-library": "^0.0.13",
     "@storybook/testing-react": "^1.3.0",
+    "@swc/jest": "^0.2.36",
     "@testing-library/dom": "^9.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -181,7 +182,7 @@
     "yargs": "^17.2.1"
   },
   "resolutions": {
-    "@babel/core": "7.12.10",
+    "@babel/core": "7.24.3",
     "@types/react": "18.2.28",
     "postcss": "8.4.24",
     "postcss-custom-properties": "13.2.0",
diff --git a/packages/@internationalized/number/test/NumberParser.test.js b/packages/@internationalized/number/test/NumberParser.test.js
@@ -11,11 +11,11 @@
  */
 
 import fc from 'fast-check';
-import messages from '../../../@react-aria/numberfield/intl/*';
+import messages from '../../../@react-aria/numberfield/intl/*.json';
 import {NumberParser} from '../src/NumberParser';
 
 // for some reason hu-HU isn't supported in jsdom/node
-let locales = Object.keys(messages).map(locale => locale.replace('.json', '')).filter(locale => locale !== 'hu-HU');
+let locales = Object.keys(messages).filter(locale => locale !== 'hu-HU');
 
 describe('NumberParser', function () {
   describe('parse', function () {
diff --git a/packages/@react-aria/focus/test/focusSafely.test.js b/packages/@react-aria/focus/test/focusSafely.test.js
@@ -14,14 +14,20 @@
 import {act, render} from '@react-spectrum/test-utils';
 import {focusSafely} from '../';
 import React from 'react';
-import * as ReactAriaUtils from '../../utils/index';
+import * as ReactAriaUtils from '@react-aria/utils';
 import {setInteractionModality} from '@react-aria/interactions';
 
+jest.mock('@react-aria/utils', () => {
+  let original = jest.requireActual('@react-aria/utils');
+  return {
+    ...original,
+    focusWithoutScrolling: jest.fn()
+  };
+});
+
 jest.useFakeTimers();
 
 describe('focusSafely', () => {
-  const focusWithoutScrollingSpy = jest.spyOn(ReactAriaUtils, 'focusWithoutScrolling').mockImplementation(() => {});
-
   it("should not focus on the element if it's no longer connected", async function () {
     setInteractionModality('virtual');
 
@@ -40,7 +46,7 @@ describe('focusSafely', () => {
       jest.runAllTimers();
     });
 
-    expect(focusWithoutScrollingSpy).toBeCalledTimes(0);
+    expect(ReactAriaUtils.focusWithoutScrolling).toBeCalledTimes(0);
   });
 
   it("should focus on the element if it's connected", async function () {
@@ -58,6 +64,6 @@ describe('focusSafely', () => {
       jest.runAllTimers();
     });
 
-    expect(focusWithoutScrollingSpy).toBeCalledTimes(1);
+    expect(ReactAriaUtils.focusWithoutScrolling).toBeCalledTimes(1);
   });
 });
diff --git a/packages/@react-spectrum/avatar/test/Avatar.test.js b/packages/@react-spectrum/avatar/test/Avatar.test.js
@@ -1,7 +1,6 @@
 import {Avatar} from '../';
 import React from 'react';
 import {render, screen} from '@react-spectrum/test-utils';
-import * as Utils from '@react-spectrum/utils';
 
 describe('Avatar', () => {
   it('renders an avatar image', () => {
@@ -31,26 +30,6 @@ describe('Avatar', () => {
         width: '80px'
       });
     });
-
-    // Spying on dimensionValue since we're unable to use toHaveStyle effectively with CSS vars
-    // See https://github.com/testing-library/jest-dom/issues/322
-    it('supports predefined avatar sizes', () => {
-      const dimensionValueSpy = jest.spyOn(Utils, 'dimensionValue');
-      render(<Avatar src="http://localhost/some_image.png" size="avatar-size-700" />);
-      expect(dimensionValueSpy).not.toHaveBeenCalledWith('avatar-size-100');
-    });
-
-    it('defaults to default size when size is size-XXXX', () => {
-      const dimensionValueSpy = jest.spyOn(Utils, 'dimensionValue');
-      render(<Avatar src="http://localhost/some_image.png" size="size-100" />);
-      expect(dimensionValueSpy).toHaveBeenCalledWith('avatar-size-100');
-    });
-
-    it('defaults to default size when size is a string number', () => {
-      const dimensionValueSpy = jest.spyOn(Utils, 'dimensionValue');
-      render(<Avatar src="http://localhost/some_image.png" size="100" />);
-      expect(dimensionValueSpy).toHaveBeenCalledWith('avatar-size-100');
-    });
   });
 
   it('supports custom class names', () => {
diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js
@@ -16,15 +16,15 @@ import {announce} from '@react-aria/live-announcer';
 import {Button} from '@react-spectrum/button';
 import {chain} from '@react-aria/utils';
 import {Form} from '@react-spectrum/form';
-import messages from '../../../@react-aria/numberfield/intl/*';
+import messages from '../../../@react-aria/numberfield/intl/*.json';
 import {NumberField} from '../';
 import {Provider} from '@react-spectrum/provider';
 import React, {useState} from 'react';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
 // for some reason hu-HU isn't supported in jsdom/node
-let locales = Object.keys(messages).map(locale => locale.replace('.json', '')).filter(locale => locale !== 'hu-HU');
+let locales = Object.keys(messages).filter(locale => locale !== 'hu-HU');
 
 // a note for these tests, text selection is not working in jsdom, so on focus will not select the value already
 // in the numberfield
diff --git a/patches/@babel+types+7.24.0.patch b/patches/@babel+types+7.24.0.patch
@@ -1,8 +1,8 @@
 diff --git a/node_modules/@babel/types/lib/retrievers/getBindingIdentifiers.js b/node_modules/@babel/types/lib/retrievers/getBindingIdentifiers.js
-index 4daaf8b..f22bb5a 100644
+index 86b4d1d..8dc0869 100644
 --- a/node_modules/@babel/types/lib/retrievers/getBindingIdentifiers.js
 +++ b/node_modules/@babel/types/lib/retrievers/getBindingIdentifiers.js
-@@ -72,6 +72,13 @@ getBindingIdentifiers.keys = {
+@@ -62,6 +62,13 @@ getBindingIdentifiers.keys = {
    InterfaceDeclaration: ["id"],
    TypeAlias: ["id"],
    OpaqueType: ["id"],
diff --git a/scripts/buildI18n.js b/scripts/buildI18n.js
@@ -40,7 +40,7 @@ function build(scope, dist = scope.slice(1)) {
     serialized += '};\n';
 
     fs.writeFileSync(`packages/${dist}/i18n/${lang}.js`,  minifySync(`module.exports = ${serialized}`).code);
-    fs.writeFileSync(`packages/${dist}/i18n/${lang}.mjs`,  minifySync(`export default ${serialized}`).code);
+    fs.writeFileSync(`packages/${dist}/i18n/${lang}.mjs`,  minifySync(`export default ${serialized}`, {module: true}).code);
   }
 
   fs.writeFileSync(`packages/${dist}/i18n/lang.d.ts`, `import type {LocalizedString} from '@internationalized/string';
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ function build(scope, dist = scope.slice(1)) {`
`40`	`40`	`serialized += '};\n';`
`41`	`41`
`42`	`42`	fs.writeFileSync(`packages/${dist}/i18n/${lang}.js`, minifySync(`module.exports = ${serialized}`).code);
`43`		- fs.writeFileSync(`packages/${dist}/i18n/${lang}.mjs`, minifySync(`export default ${serialized}`).code);
	`43`	+ fs.writeFileSync(`packages/${dist}/i18n/${lang}.mjs`, minifySync(`export default ${serialized}`, {module: true}).code);
`44`	`44`	`}`
`45`	`45`
`46`	`46`	fs.writeFileSync(`packages/${dist}/i18n/lang.d.ts`, `import type {LocalizedString} from '@internationalized/string';