Build: make tests use SWC, not babel

.gitignore

@@ -3,6 +3,7 @@ node_modules
 .idea
 *.iml
 *.sw*
+!.swcrc
 dist
 *.DS_Store
 .cache

code/.gitignore

@@ -3,6 +3,7 @@ node_modules
 .idea
 *.iml
 *.sw*
+!.swcrc
 npm-shrinkwrap.json
 dist
 .tern-port

code/.swcrc

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "pragma": "React.createElement",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": false,
+        "development": false
+      }
+    },
+    "target": "es2020",
+    "loose": false,
+    "externalHelpers": false,
+    // Requires v1.2.50 or upper and requires target to be es2016 or upper.
+    "keepClassNames": false
+  },
+  "minify": false
+}

code/jest.config.base.js

@@ -24,23 +24,9 @@ module.exports = {
       path.resolve('./__mocks__/fileMock.js'),
     '\\.(css|scss|stylesheet)$': path.resolve('./__mocks__/styleMock.js'),
     '\\.(md)$': path.resolve('./__mocks__/htmlMock.js'),
-
-    // core-js v2 to v3 mapping
-    'core-js/modules/es6.(.*)': 'core-js/modules/es.$1',
-    'core-js/modules/es7.(.*)': 'core-js/modules/esnext.$1',
-    'core-js/library/fn/(.*)': `core-js/features/$1`,
-    'core-js/es5/(.*)': `core-js/es/$1`,
-    'core-js/es6/(.*)': `core-js/es/$1`,
-    'core-js/es7/reflect': `core-js/proposals/reflect-metadata`,
-    'core-js/es7/(.*)': `core-js/proposals/$1`,
-    'core-js/object$/': `core-js/es/object`,
-    'core-js/object/(.*)': `core-js/es/object/$1`,
-    'babel-runtime/core-js/(.*)': `core-js/es/$1`,
-    // 'babel-runtime/core-js/object/assign'
-    'core-js/library/fn/object/assign': 'core-js/es/object/assign',
   },
   transform: {
-    '^.+\\.[jt]sx?$': path.resolve('../scripts/utils/jest-transform-js.js'),
+    '^.+\\.(t|j)sx?$': '@swc/jest',
     '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
   },
   transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid|lit-html|@mdx-js)'],

code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from '@jest/globals';
+// import { describe, it, expect } from '@jest/globals';
 import { dedent } from 'ts-dedent';
 import _transform from '../csf-2-to-3';
 

code/lib/manager-api/src/tests/stories.test.ts

@@ -1,7 +1,4 @@
 /// <reference types="@types/jest" />;
-// Need to import jest as mockJest for annoying jest reasons. Is there a better way?
-import { jest, it, describe, expect, beforeEach } from '@jest/globals';
-
 import {
   STORY_ARGS_UPDATED,
   UPDATE_STORY_ARGS,
@@ -34,7 +31,7 @@ function mockChannel() {
   return new Channel({ transport });
 }
 
-const mockGetEntries = jest.fn<() => StoryIndex['entries']>();
+const mockGetEntries = jest.fn();
 
 jest.mock('../lib/events');
 jest.mock('@storybook/global', () => ({
@@ -90,7 +87,7 @@ beforeEach(() => {
   provider.serverChannel = mockChannel();
   mockGetEntries.mockReset().mockReturnValue(mockEntries);
 
-  (global.fetch as ReturnType<typeof jest.fn<typeof global.fetch>>).mockReset().mockReturnValue(
+  (global.fetch as jest.Mock<ReturnType<typeof global.fetch>>).mockReset().mockReturnValue(
     Promise.resolve({
       status: 200,
       ok: true,
@@ -567,7 +564,7 @@ describe('stories API', () => {
       const store = createMockStore({});
       const fullAPI = Object.assign(new EventEmitter(), {});
 
-      (global.fetch as ReturnType<typeof jest.fn<typeof global.fetch>>).mockReturnValue(
+      (global.fetch as jest.Mock<ReturnType<typeof global.fetch>>).mockReturnValue(
         Promise.resolve({
           status: 500,
           text: async () => new Error('sorting error'),
@@ -593,13 +590,11 @@ describe('stories API', () => {
       const { api, init } = initStories({ store, navigate, provider, fullAPI } as any);
       Object.assign(fullAPI, api);
 
-      (global.fetch as ReturnType<typeof jest.fn<typeof global.fetch>>).mockClear();
+      (global.fetch as jest.Mock<ReturnType<typeof global.fetch>>).mockClear();
       await init();
-      expect(global.fetch as ReturnType<typeof jest.fn<typeof global.fetch>>).toHaveBeenCalledTimes(
-        1
-      );
+      expect(global.fetch as jest.Mock<ReturnType<typeof global.fetch>>).toHaveBeenCalledTimes(1);
 
-      (global.fetch as ReturnType<typeof jest.fn<typeof global.fetch>>).mockClear();
+      (global.fetch as jest.Mock<ReturnType<typeof global.fetch>>).mockClear();
       mockGetEntries.mockReturnValueOnce({
         'component-a--story-1': {
           type: 'story',

code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts

@@ -5,7 +5,6 @@
 import React from 'react';
 import { global } from '@storybook/global';
 import type { RenderContext } from '@storybook/types';
-import { expect } from '@jest/globals';
 import { addons, mockChannel as createMockChannel } from '../addons';
 
 import { PreviewWeb } from './PreviewWeb';

code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts

@@ -2,7 +2,6 @@
  * @jest-environment jsdom
  */
 
-import { jest, jest as mockJest, it, describe, beforeEach, afterEach, expect } from '@jest/globals';
 import { global } from '@storybook/global';
 import merge from 'lodash/merge';
 import {
@@ -61,8 +60,8 @@ const mockStoryIndex = jest.fn(() => storyIndex);
 let mockFetchResult: any;
 jest.mock('@storybook/global', () => ({
   global: {
-    ...(mockJest.requireActual('@storybook/global') as any),
-    history: { replaceState: mockJest.fn() },
+    ...(jest.requireActual('@storybook/global') as any),
+    history: { replaceState: jest.fn() },
     document: {
       location: {
         pathname: 'pathname',
@@ -99,7 +98,6 @@ const createGate = (): [Promise<any | undefined>, (_?: any) => void] => {
 // a timer, so we need to first setImmediate (to get past the resolution), then run the timers
 // Probably jest modern timers do this but they aren't working for some bizarre reason.
 async function waitForSetCurrentStory() {
-  // @ts-expect-error (Argument of type '{ doNotFake: string[]; }' is not assignable to parameter of type '"modern" | "legacy" | undefined'. ts(2345)))
   jest.useFakeTimers({ doNotFake: ['setTimeout'] });
   await new Promise((r) => setTimeout(r, 0));
   jest.runAllTimers();
@@ -140,9 +138,7 @@ beforeEach(() => {
   addons.setServerChannel(createMockChannel());
   mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
 
-  // @ts-expect-error (Property 'mocked' does not exist on type 'Jest'. Did you mean 'mock'? ts(2551))
   jest.mocked(WebView.prototype).prepareForDocs.mockReturnValue('docs-element' as any);
-  // @ts-expect-error (Property 'mocked' does not exist on type 'Jest'. Did you mean 'mock'? ts(2551))
   jest.mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any);
 });
 

code/lib/preview-api/src/modules/preview-web/render/StandaloneDocsRender.test.ts

@@ -1,4 +1,3 @@
-import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
 import type { Renderer, StandaloneDocsIndexEntry } from '@storybook/types';
 import type { StoryStore } from '../../store';

code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts

@@ -1,4 +1,3 @@
-import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
 import type { Renderer, StoryIndexEntry } from '@storybook/types';
 import type { StoryStore } from '../../store';

code/lib/preview-api/src/modules/preview-web/render/TemplateDocsRender.test.ts

@@ -1,4 +1,3 @@
-import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
 import type { Renderer, TemplateDocsIndexEntry } from '@storybook/types';
 import type { StoryStore } from '../../store';

code/package.json

@@ -238,6 +238,7 @@
     "@storybook/web-components-vite": "workspace:*",
     "@storybook/web-components-webpack5": "workspace:*",
     "@swc/core": "^1.3.23",
+    "@swc/jest": "^0.2.24",
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.2",
@@ -266,7 +267,6 @@
     "@vitejs/plugin-react": "^2.1.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^29.3.1",
     "babel-loader": "^8.3.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",

code/ui/manager/src/settings/shortcuts.test.js → code/ui/manager/src/settings/shortcuts.test.tsx

@@ -14,7 +14,7 @@ const shortcutKeys = {
   search: ['/'],
   focusNav: ['1'],
   focusIframe: ['2'],
-};
+} as any;
 
 const makeActions = () => ({
   setShortcut: jest.fn(),
@@ -48,7 +48,9 @@ describe('ShortcutsScreen', () => {
       const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...makeActions()} />);
       const instance = comp.instance();
 
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onFocus('toolbar')();
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').toolbar.shortcut).toBeNull();
       expect(comp.state('activeFeature')).toBe('toolbar');
     });
@@ -59,31 +61,42 @@ describe('ShortcutsScreen', () => {
       const actions = makeActions();
       const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);
       const instance = comp.instance();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onFocus('focusIframe')();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onKeyDown({ isShift: true, key: 'Shift' });
       expect(actions.setShortcut).not.toHaveBeenCalled();
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.shortcut).toBeNull();
     });
 
     it('changes the shortcut in state if a key is pressed', () => {
       const actions = makeActions();
       const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);
       const instance = comp.instance();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onFocus('focusIframe')();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onKeyDown({ key: 'P' });
       expect(actions.setShortcut).not.toHaveBeenCalled();
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['P']);
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.error).toBe(false);
     });
 
     it('sets an error and the shortcut in state if a duplicate key is pressed', () => {
       const actions = makeActions();
       const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);
       const instance = comp.instance();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onFocus('focusIframe')();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onKeyDown({ key: 'F' });
       expect(actions.setShortcut).not.toHaveBeenCalled();
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['F']);
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.error).toBe(true);
     });
   });
@@ -93,39 +106,53 @@ describe('ShortcutsScreen', () => {
       const actions = makeActions();
       const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);
       const instance = comp.instance();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onFocus('focusIframe')();
+      // @ts-expect-error (please let's get rid of enzyme)
       await instance.onBlur();
 
       expect(actions.setShortcut).not.toHaveBeenCalled();
       expect(actions.restoreDefaultShortcut).toHaveBeenCalledWith('focusIframe');
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['2']);
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.error).toBe(false);
     });
 
     it('if the shortcut is errored, restores the respective default', async () => {
       const actions = makeActions();
       const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);
       const instance = comp.instance();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onFocus('focusIframe')();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onKeyDown({ key: 'F' });
+      // @ts-expect-error (please let's get rid of enzyme)
       await instance.onBlur();
 
       expect(actions.setShortcut).not.toHaveBeenCalled();
       expect(actions.restoreDefaultShortcut).toHaveBeenCalledWith('focusIframe');
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['2']);
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.error).toBe(false);
     });
 
     it('saves the shortcut if it is valid', () => {
       const actions = makeActions();
       const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);
       const instance = comp.instance();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onFocus('focusIframe')();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onKeyDown({ key: 'P' });
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onBlur();
 
       expect(actions.setShortcut).toHaveBeenCalledWith('focusIframe', ['P']);
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['P']);
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.error).toBe(false);
     });
   });
@@ -135,10 +162,13 @@ describe('ShortcutsScreen', () => {
       const actions = makeActions();
       const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);
       const instance = comp.instance();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onFocus('focusIframe')();
+      // @ts-expect-error (please let's get rid of enzyme)
       instance.onKeyDown({ key: 'P' });
 
       await comp.find('#restoreDefaultsHotkeys').simulate('click');
+      // @ts-expect-error (please let's get rid of enzyme)
       expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['2']);
     });
   });

code/yarn.lock

@@ -3069,6 +3069,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/create-cache-key-function@npm:^27.4.2":
+  version: 27.5.1
+  resolution: "@jest/create-cache-key-function@npm:27.5.1"
+  dependencies:
+    "@jest/types": ^27.5.1
+  checksum: 1890ac93fad852e0a98c31de1e5f2c548974aefd36e838d27b70834dda1654a153ed6a52258447ebacfd47463e9bdb83750631bee827797c7b9973c083998a96
+  languageName: node
+  linkType: hard
+
 "@jest/environment@npm:^26.6.2":
   version: 26.6.2
   resolution: "@jest/environment@npm:26.6.2"
@@ -7307,6 +7316,7 @@ __metadata:
     "@storybook/web-components-vite": "workspace:*"
     "@storybook/web-components-webpack5": "workspace:*"
     "@swc/core": ^1.3.23
+    "@swc/jest": ^0.2.24
     "@testing-library/dom": ^7.29.4
     "@testing-library/jest-dom": ^5.11.9
     "@testing-library/react": ^11.2.2
@@ -7335,7 +7345,6 @@ __metadata:
     "@vitejs/plugin-react": ^2.1.0
     babel-core: ^7.0.0-bridge.0
     babel-eslint: ^10.1.0
-    babel-jest: ^29.3.1
     babel-loader: ^8.3.0
     babel-plugin-add-react-displayname: ^0.0.5
     babel-plugin-dynamic-import-node: ^2.3.3
@@ -8038,6 +8047,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/jest@npm:^0.2.24":
+  version: 0.2.24
+  resolution: "@swc/jest@npm:0.2.24"
+  dependencies:
+    "@jest/create-cache-key-function": ^27.4.2
+    jsonc-parser: ^3.2.0
+  peerDependencies:
+    "@swc/core": "*"
+  checksum: 62d9bfe8895e003b7dc360c19106b8eca72d9e9ea4769bc7b60de76cb6e398274fdd383cec9fc9344ca8cb76b18e8063c7182997da2c1d057b8a127c542e6b8f
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^7.28.1, @testing-library/dom@npm:^7.29.4":
   version: 7.31.2
   resolution: "@testing-library/dom@npm:7.31.2"
@@ -21682,7 +21703,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonc-parser@npm:^3.0.0":
+"jsonc-parser@npm:^3.0.0, jsonc-parser@npm:^3.2.0":
   version: 3.2.0
   resolution: "jsonc-parser@npm:3.2.0"
   checksum: 5a12d4d04dad381852476872a29dcee03a57439574e4181d91dca71904fcdcc5e8e4706c0a68a2c61ad9810e1e1c5806b5100d52d3e727b78f5cdc595401045b

scripts/package.json

@@ -96,7 +96,6 @@
     "@typescript-eslint/parser": "^5.45.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^29.3.1",
     "babel-loader": "^8.3.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",