Tech: 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/addons/interactions/package.json

@@ -88,8 +88,8 @@
   },
   "devDependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/testing-library": "0.0.14-next.0",
+    "@storybook/jest": "next",
+    "@storybook/testing-library": "next",
     "@types/node": "^16.0.0",
     "formik": "^2.2.9",
     "typescript": "~4.9.3"

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,6 +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,
@@ -34,7 +32,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 +88,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 +565,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 +591,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

@@ -179,7 +179,7 @@
     "@storybook/html-vite": "workspace:*",
     "@storybook/html-webpack5": "workspace:*",
     "@storybook/instrumenter": "workspace:*",
-    "@storybook/jest": "^0.0.10",
+    "@storybook/jest": "next",
     "@storybook/linter-config": "^2.5.0",
     "@storybook/manager": "workspace:*",
     "@storybook/manager-api": "workspace:*",
@@ -210,7 +210,7 @@
     "@storybook/svelte": "workspace:*",
     "@storybook/svelte-webpack5": "workspace:*",
     "@storybook/telemetry": "workspace:*",
-    "@storybook/testing-library": "0.0.14-next.0",
+    "@storybook/testing-library": "next",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "@storybook/vue": "workspace:*",
@@ -222,6 +222,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",
@@ -247,7 +248,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",
     "chromatic": "6.11.2",
     "codecov": "^3.8.1",

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']);
     });
   });