feat: bump React to 19.2.3

jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});

package.json

@@ -9,8 +9,8 @@
     "@vidstack/react": "^1.12.12",
     "core-js": "3.7.0",
     "lodash": "^4.17.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-helmet-async": "^2.0.5"
   },
   "devDependencies": {
@@ -44,18 +44,17 @@
     "@storybook/react-webpack5": "^8.6.15",
     "@storybook/theming": "^8.6.15",
     "@svgr/cli": "5.5.0",
-    "@testing-library/dom": "^8.11.1",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "15.0.6",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "2.2.10",
     "@types/invariant": "2.2.29",
     "@types/konami-code-js": "^0.8.0",
     "@types/lodash": "4.17.0",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
-    "@types/react-test-renderer": "^17.0.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-test-renderer": "^19.1.0",
     "@types/stylis": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
@@ -84,7 +83,7 @@
     "nx-cloud": "^19.1.0",
     "onchange": "^7.0.2",
     "prettier": "^2.8.7",
-    "react-test-renderer": "18.3.1",
+    "react-test-renderer": "^19.0.0",
     "storybook": "^8.6.15",
     "storybook-addon-deep-controls": "^0.9.5",
     "style-loader": "^4.0.0",

packages/gamut-icons/package.json

@@ -16,8 +16,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
     "lodash": "^4.17.5",
-    "react": "^17.0.2 || ^18.2.0"
+    "react": "^17.0.2 || ^18.2.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-icons/src/props.ts

@@ -1,6 +1,6 @@
 import { styledOptions, system } from '@codecademy/gamut-styles';
 import { StyleProps, variance } from '@codecademy/variance';
-import styled from '@emotion/styled';
+import styled, { StyledComponent } from '@emotion/styled';
 
 export interface IconStyleProps extends StyleProps<typeof iconProps> {
   /**
@@ -46,4 +46,7 @@ export const iconProps = variance.compose(
   system.border
 );
 
-export const Svg = styled('svg', styledOptions<'svg'>())(iconProps);
+export const Svg = styled(
+  'svg',
+  styledOptions<'svg'>()
+)(iconProps) as StyledComponent<GamutBaseIconProps, {}, {}>;

packages/gamut-illustrations/package.json

@@ -18,8 +18,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": "^17.0.2 || ^18.2.0",
-    "react-dom": "^17.0.2 || ^18.2.0"
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^17.0.2 || ^18.2.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.2.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-patterns/package.json

@@ -19,8 +19,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": "^17.0.2 || ^18.2.0",
-    "react-dom": "^17.0.2 || ^18.2.0"
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^17.0.2 || ^18.2.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.2.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-patterns/src/props.tsx

@@ -1,7 +1,7 @@
 import { styledOptions, system } from '@codecademy/gamut-styles';
 import { StyleProps, variance } from '@codecademy/variance';
-import styled from '@emotion/styled';
-import { ComponentProps, forwardRef } from 'react';
+import styled, { StyledComponent } from '@emotion/styled';
+import { forwardRef } from 'react';
 
 const patternStyles = variance.compose(
   system.layout,
@@ -24,9 +24,9 @@ export interface PatternProps
 const StyledSvg = styled(
   'svg',
   styledOptions<'svg'>()
-)<PatternProps>(patternStyles);
+)(patternStyles) as StyledComponent<PatternProps, {}, {}>;
 
-export const Svg = forwardRef<SVGSVGElement, ComponentProps<typeof StyledSvg>>(
+export const Svg = forwardRef<SVGSVGElement, PatternProps>(
   ({ height = '100%', width = '100%', ...rest }, ref) => (
     <StyledSvg height={height} ref={ref} width={width} {...rest} />
   )

packages/gamut-styles/package.json

@@ -23,8 +23,9 @@
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
     "lodash": "^4.17.5",
-    "react": "^17.0.2 || ^18.2.0",
+    "react": "^17.0.2 || ^18.2.0 || ^19.0.0",
     "stylis": "^4.0.7"
   },
   "publishConfig": {

packages/gamut-styles/src/__tests__/AssetProvider.test.tsx

@@ -5,6 +5,7 @@ import { render } from '@testing-library/react';
 
 import { AssetProvider, createFontLinks } from '../AssetProvider';
 import { coreTheme, percipioTheme } from '../themes';
+import { cleanupPreloadLinks, getPreloadLinks, mockGetFonts } from './helpers';
 
 const renderView = setupRtl(AssetProvider, {});
 
@@ -43,11 +44,10 @@ jest.mock('../remoteAssets/fonts', () => ({
   },
 }));
 
-const mockGetFonts = require('../utils/fontUtils').getFonts;
-
 describe('AssetProvider', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    cleanupPreloadLinks();
   });
 
   describe('createFontLinks', () => {
@@ -66,7 +66,7 @@ describe('AssetProvider', () => {
       ];
 
       const { container } = render(<>{createFontLinks(fonts)}</>);
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
 
       expect(links).toHaveLength(1);
       expect(links[0]).toHaveAttribute(
@@ -80,13 +80,13 @@ describe('AssetProvider', () => {
 
     it('should handle empty fonts array', () => {
       const { container } = render(<>{createFontLinks([])}</>);
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(0);
     });
 
     it('should handle undefined fonts parameter', () => {
       const { container } = render(<>{createFontLinks(undefined)}</>);
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(2);
     });
 
@@ -110,7 +110,7 @@ describe('AssetProvider', () => {
       ];
 
       const { container } = render(<>{createFontLinks(fonts)}</>);
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(1);
       expect(links[0]).toHaveAttribute(
         'href',
@@ -139,7 +139,7 @@ describe('AssetProvider', () => {
       ];
 
       const { container } = render(<>{createFontLinks(fonts)}</>);
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(2);
     });
   });
@@ -155,7 +155,7 @@ describe('AssetProvider', () => {
       ]);
 
       const { view } = renderView();
-      const links = view.container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(view.container);
 
       expect(links).toHaveLength(1);
       expect(links[0]).toHaveAttribute(
@@ -175,7 +175,7 @@ describe('AssetProvider', () => {
       ]);
 
       const { view } = renderView({ theme: percipioTheme as any });
-      const links = view.container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(view.container);
 
       expect(links).toHaveLength(1);
       expect(links[0]).toHaveAttribute(
@@ -186,7 +186,7 @@ describe('AssetProvider', () => {
     });
 
     it('should handle theme without name property', () => {
-      const themeWithoutName = { ...coreTheme, name: undefined };
+      const themeWithoutName = { ...coreTheme, name: undefined } as any;
       mockGetFonts.mockReturnValue([]);
 
       renderView({ theme: themeWithoutName });
@@ -207,31 +207,31 @@ describe('AssetProvider', () => {
       });
 
       const { view } = renderView();
-      const links = view.container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(view.container);
       expect(links).toHaveLength(0);
     });
 
     it('should fallback to core fonts when getFonts returns undefined', () => {
-      mockGetFonts.mockReturnValue(undefined);
+      mockGetFonts.mockReturnValue(undefined as any);
 
       const { view } = renderView();
-      const links = view.container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(view.container);
       expect(links).toHaveLength(2);
     });
 
     it('should fallback to core fonts when getFonts returns null', () => {
-      mockGetFonts.mockReturnValue(null);
+      mockGetFonts.mockReturnValue(null as any);
 
       const { view } = renderView();
-      const links = view.container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(view.container);
       expect(links).toHaveLength(2);
     });
 
     it('should fallback to core fonts when getFonts returns non-array', () => {
-      mockGetFonts.mockReturnValue('not-an-array');
+      mockGetFonts.mockReturnValue('not-an-array' as any);
 
       const { view } = renderView();
-      const links = view.container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(view.container);
       expect(links).toHaveLength(0);
     });
 
@@ -255,7 +255,7 @@ describe('AssetProvider', () => {
       ]);
 
       const { view } = renderView();
-      const links = view.container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(view.container);
 
       expect(links).toHaveLength(3);
       expect(links[0]).toHaveAttribute(
@@ -292,7 +292,7 @@ describe('AssetProvider', () => {
       ]);
 
       const { view } = renderView();
-      const links = view.container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(view.container);
 
       expect(links).toHaveLength(1);
       expect(links[0]).toHaveAttribute(
@@ -321,7 +321,7 @@ describe('AssetProvider', () => {
       ]);
 
       const { view } = renderView();
-      const links = view.container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(view.container);
 
       expect(links).toHaveLength(1);
       expect(links[0]).toHaveAttribute(

packages/gamut-styles/src/__tests__/fontLoading.test.tsx

@@ -2,6 +2,7 @@ import { render } from '@testing-library/react';
 
 import { AssetProvider } from '../AssetProvider';
 import { coreTheme, percipioTheme } from '../themes';
+import { cleanupPreloadLinks, getPreloadLinks, mockGetFonts } from './helpers';
 
 // Type assertion to satisfy Theme interface in GamutProvider from theme.d.ts - this lib is typed to the CoreTheme interface
 const typedPercipioTheme = percipioTheme as any;
@@ -29,8 +30,6 @@ jest.mock('../remoteAssets/fonts', () => ({
   },
 }));
 
-const mockGetFonts = require('../utils/fontUtils').getFonts;
-
 const mockDocumentFonts = {
   load: jest.fn(),
   ready: Promise.resolve(),
@@ -53,6 +52,7 @@ describe('Font Loading and Error Handling', () => {
     mockDocumentFonts.load.mockClear();
     mockDocumentFonts.check.mockClear();
     mockFetch.mockClear();
+    cleanupPreloadLinks();
   });
 
   describe('Font Preloading', () => {
@@ -67,7 +67,7 @@ describe('Font Loading and Error Handling', () => {
 
       const { container } = render(<AssetProvider theme={coreTheme} />);
 
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(1);
       expect(links[0]).toHaveAttribute(
         'href',
@@ -93,7 +93,7 @@ describe('Font Loading and Error Handling', () => {
 
       const { container } = render(<AssetProvider theme={coreTheme} />);
 
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(2);
       expect(links[0]).toHaveAttribute(
         'href',
@@ -115,7 +115,7 @@ describe('Font Loading and Error Handling', () => {
       const { container } = render(<AssetProvider theme={coreTheme} />);
 
       // Should not render any links when getFonts fails
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(0);
     });
 
@@ -141,7 +141,7 @@ describe('Font Loading and Error Handling', () => {
 
       const { container } = render(<AssetProvider theme={coreTheme} />);
 
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(2);
     });
   });
@@ -164,7 +164,7 @@ describe('Font Loading and Error Handling', () => {
       const { container } = render(<AssetProvider theme={coreTheme} />);
 
       // Should render preload links for all fonts
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(2);
       expect(links[0]).toHaveAttribute(
         'href',
@@ -195,7 +195,7 @@ describe('Font Loading and Error Handling', () => {
 
       const { container } = render(<AssetProvider theme={coreTheme} />);
 
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(1);
 
       Object.defineProperty(document, 'fonts', {
@@ -218,7 +218,7 @@ describe('Font Loading and Error Handling', () => {
 
       const { container } = render(<AssetProvider theme={coreTheme} />);
 
-      const links = container.querySelectorAll('link[rel="preload"]');
+      const links = getPreloadLinks(container);
       expect(links).toHaveLength(1);
 
       global.fetch = originalFetch;