;
interface LinksPrimitives {
@@ -152,7 +152,7 @@ interface LinksPrimitives
{
ButtonGroup: React.ComponentType;
}
-export type LinksControlType = (() => JSX.Element) &
+export type LinksControlType = (() => React.JSX.Element) &
LinksPrimitives &
NonPrimitiveControls['Links'];
@@ -162,9 +162,10 @@ interface FederatedProvidersPrimitives {
Divider: React.ComponentType;
}
-export type FederatedProvidersControlType = (() => JSX.Element) &
- FederatedProvidersPrimitives &
- NonPrimitiveControls['FederatedProviders'];
+export type FederatedProvidersControlType =
+ (() => React.JSX.Element) &
+ FederatedProvidersPrimitives &
+ NonPrimitiveControls['FederatedProviders'];
export interface SetupTotpPrimitives {
Container: React.ComponentType;
@@ -176,15 +177,15 @@ export interface SetupTotpPrimitives {
Loader: React.ComponentType;
}
-export type SetupTotpControlType = (() => JSX.Element) &
+export type SetupTotpControlType = (() => React.JSX.Element) &
SetupTotpPrimitives;
interface VerifyContactMethodPrimitives {
RadioGroup: React.ComponentType>;
}
-export type VerifyContactMethodControlType = (() => JSX.Element) &
- VerifyContactMethodPrimitives;
+export type VerifyContactMethodControlType =
+ (() => React.JSX.Element) & VerifyContactMethodPrimitives;
/**
* Compound Control values contain primitives
diff --git a/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts b/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts
index 7ebbfed56dc..36c58eb1c2f 100644
--- a/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts
+++ b/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts
@@ -27,4 +27,4 @@ export interface ProviderProps {
export type ProviderComponent = (
params: ProviderProps
-) => JSX.Element;
+) => React.JSX.Element;
diff --git a/packages/react-core-notifications/package.json b/packages/react-core-notifications/package.json
index e6ad2d8dd16..c182a8d9041 100644
--- a/packages/react-core-notifications/package.json
+++ b/packages/react-core-notifications/package.json
@@ -40,7 +40,7 @@
},
"peerDependencies": {
"aws-amplify": "^6.9.0",
- "react": "^16.14.0 || ^17.0 || ^18.0"
+ "react": "^16.14 || ^17 || ^18 || ^19"
},
"sideEffects": false
}
diff --git a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/InAppMessagingContext.ts b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/InAppMessagingContext.ts
deleted file mode 100644
index 5fd4203421b..00000000000
--- a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/InAppMessagingContext.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext } from 'react';
-import { InAppMessage } from '../../types';
-
-export interface InAppMessagingContextType {
- clearMessage: () => void;
- displayMessage: (message: InAppMessage) => void;
- message: InAppMessage | null;
-}
-
-const InAppMessagingContext = createContext(
- null
-);
-
-export default InAppMessagingContext;
diff --git a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/InAppMessagingContext.tsx b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/InAppMessagingContext.tsx
new file mode 100644
index 00000000000..423c3224939
--- /dev/null
+++ b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/InAppMessagingContext.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { InAppMessage } from '../../types';
+import { useInAppMessagingState } from './useInAppMessagingState';
+
+export interface InAppMessagingContextType {
+ clearMessage: () => void;
+ displayMessage: (message: InAppMessage) => void;
+ message: InAppMessage | null;
+}
+
+const InAppMessagingContext =
+ React.createContext(null);
+
+export default InAppMessagingContext;
+
+export interface InAppMessagingProviderProps {
+ children: React.ReactNode;
+}
+
+export interface UseInAppMessaging extends InAppMessagingContextType {}
+
+export const ERROR_MESSAGE =
+ '`useInAppMessaging` must be called from within `InAppMessagingProvider`';
+
+/**
+ * Utility hook used to access the InAppMessagingContext values
+ *
+ * @returns {InAppMessagingContextType} InAppMessaging context values
+ */
+export function useInAppMessaging(): UseInAppMessaging {
+ const context = React.useContext(InAppMessagingContext);
+
+ if (!context) {
+ throw new Error(ERROR_MESSAGE);
+ }
+ return context;
+}
+
+export function InAppMessagingProvider({
+ children,
+}: InAppMessagingProviderProps): React.JSX.Element {
+ const value = useInAppMessagingState();
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/__tests__/InAppMessagingContext.spec.tsx b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/__tests__/InAppMessagingContext.spec.tsx
new file mode 100644
index 00000000000..b0dd56f0dec
--- /dev/null
+++ b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/__tests__/InAppMessagingContext.spec.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react';
+
+import { InAppMessagingContextType } from '..';
+
+import {
+ ERROR_MESSAGE,
+ InAppMessagingProvider,
+ useInAppMessaging,
+} from '../InAppMessagingContext';
+
+const clearMessage = jest.fn();
+const displayMessage = jest.fn();
+const message = null;
+
+jest.mock('../useInAppMessagingState', () => ({
+ useInAppMessagingState: (): InAppMessagingContextType => ({
+ clearMessage,
+ displayMessage,
+ message,
+ }),
+}));
+
+jest.mock('aws-amplify/in-app-messaging');
+
+describe('useInAppMessaging', () => {
+ it('provides the values of InAppMessagingContext to consumers wrapped in InAppMessagingProvider', () => {
+ const { result } = renderHook(() => useInAppMessaging(), {
+ wrapper: ({ children }) => (
+ {children}
+ ),
+ });
+
+ expect(result.current).toStrictEqual({
+ clearMessage,
+ displayMessage,
+ message,
+ });
+ });
+
+ it('throws an error when called outside an InAppMessagingProvider', () => {
+ /* eslint-disable no-console */
+ // monkeypatch console.error into a no-op temporarily to supress React printed error regarding lack of
+ // ErrorBoundary component
+ const original = console.error;
+ console.error = () => {};
+
+ expect(() => renderHook(() => useInAppMessaging())).toThrow(ERROR_MESSAGE);
+
+ console.error = original;
+ /* eslint-enable no-console */
+ });
+});
diff --git a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingProvider/__tests__/InAppMessagingProvider.spec.tsx b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/__tests__/useInAppMessagingState.ts
similarity index 51%
rename from packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingProvider/__tests__/InAppMessagingProvider.spec.tsx
rename to packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/__tests__/useInAppMessagingState.ts
index 0d32d3f7771..61cf426b5b5 100644
--- a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingProvider/__tests__/InAppMessagingProvider.spec.tsx
+++ b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/__tests__/useInAppMessagingState.ts
@@ -1,11 +1,9 @@
-import React from 'react';
-import TestRenderer, { ReactTestRenderer } from 'react-test-renderer';
+import { renderHook, act } from '@testing-library/react';
+
import * as InAppModule from 'aws-amplify/in-app-messaging';
-import { RenderNothing } from '@aws-amplify/ui-react-core';
-import { useInAppMessaging } from '../../../hooks/useInAppMessaging';
-import { InAppMessagingContextType } from '../..';
-import { InAppMessagingProvider } from '..';
+import { InAppMessagingContextType } from '../InAppMessagingContext';
+import { useInAppMessagingState } from '../useInAppMessagingState';
const onMessageReceivedSpy = jest.spyOn(InAppModule, 'onMessageReceived');
@@ -24,32 +22,17 @@ const mockOnMessageReceived = (
return { remove: mockRemove };
};
-const TestComponent = () => {
- const props = useInAppMessaging();
- return ;
-};
-
const message = { layout: 'TOP_BANNER' as const, id: '0', content: [] };
-describe('InAppMessagingProvider', () => {
- let renderer: ReactTestRenderer;
-
+describe('useInAppMessagingState', () => {
beforeEach(() => {
- jest.resetAllMocks();
+ jest.clearAllMocks();
onMessageReceivedSpy.mockImplementation(mockOnMessageReceived);
-
- TestRenderer.act(() => {
- renderer = TestRenderer.create(
-
-
-
- );
- });
});
it('vends the expected initial context values', () => {
- const expectedProps = {
+ const expected = {
clearMessage: expect.any(
Function
) as InAppMessagingContextType['clearMessage'],
@@ -60,12 +43,14 @@ describe('InAppMessagingProvider', () => {
style: undefined,
};
- expect(renderer.root.findByType(RenderNothing).props).toEqual(
- expectedProps
- );
+ const { result } = renderHook(() => useInAppMessagingState());
+
+ expect(result.current).toEqual(expected);
});
it('registers a listener to InAppMessaging.onMessageReceived as expected', () => {
+ renderHook(() => useInAppMessagingState());
+
expect(onMessageReceivedSpy).toHaveBeenCalledTimes(1);
expect(onMessageReceivedSpy).toHaveBeenCalledWith(
expect.any(Function) as InAppMessagingContextType['displayMessage']
@@ -73,53 +58,52 @@ describe('InAppMessagingProvider', () => {
});
it('updates the value of message when the listener registered to InAppMessaging.onMessageReceived is called', () => {
- TestRenderer.act(() => {
+ const { result } = renderHook(() => useInAppMessagingState());
+
+ expect(result.current.message).toBeNull();
+
+ act(() => {
onMessageReceivedCallback(message);
});
- const consumer = renderer.root.findByType(RenderNothing);
-
- expect((consumer.props as InAppMessagingContextType).message).toStrictEqual(
- message
- );
+ expect(result.current.message).toStrictEqual(message);
});
it('removes the listener registered to InAppMessaging.onMessageReceived as expected', () => {
- TestRenderer.act(() => {
- renderer.unmount();
+ const { unmount } = renderHook(() => useInAppMessagingState());
+
+ act(() => {
+ unmount();
});
expect(mockRemove).toHaveBeenCalledTimes(1);
});
it('updates the value of message when displayMessage is called', () => {
- const consumer = renderer.root.findByType(RenderNothing);
+ const { result } = renderHook(() => useInAppMessagingState());
- TestRenderer.act(() => {
- (
- consumer.props
- .displayMessage as InAppMessagingContextType['displayMessage']
- )(message);
+ act(() => {
+ result.current.displayMessage(message);
});
- expect((consumer.props as InAppMessagingContextType).message).toStrictEqual(
- message
- );
+ expect(result.current.message).toStrictEqual(message);
});
it('updates the value of message when clearMessage is called', () => {
- const consumer = renderer.root.findByType(RenderNothing);
+ const { result } = renderHook(() => useInAppMessagingState());
+
+ expect(result.current.message).toBeNull();
- TestRenderer.act(() => {
- (consumer.props as InAppMessagingContextType).displayMessage(message);
+ act(() => {
+ result.current.displayMessage(message);
});
- expect(consumer.props.message).not.toBeNull();
+ expect(result.current.message).toStrictEqual(message);
- TestRenderer.act(() => {
- (consumer.props as InAppMessagingContextType).clearMessage();
+ act(() => {
+ result.current.clearMessage();
});
- expect(consumer.props.message).toBeNull();
+ expect(result.current.message).toBeNull();
});
});
diff --git a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/index.ts b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/index.ts
index 77a9fc71854..68619b49135 100644
--- a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/index.ts
+++ b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/index.ts
@@ -1,4 +1,8 @@
export {
default as InAppMessagingContext,
InAppMessagingContextType,
+ InAppMessagingProviderProps,
+ InAppMessagingProvider,
+ useInAppMessaging,
+ UseInAppMessaging,
} from './InAppMessagingContext';
diff --git a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/useInAppMessagingState.ts b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/useInAppMessagingState.ts
new file mode 100644
index 00000000000..c8ba44d245a
--- /dev/null
+++ b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/useInAppMessagingState.ts
@@ -0,0 +1,24 @@
+import { useEffect, useMemo, useState } from 'react';
+import { onMessageReceived } from 'aws-amplify/in-app-messaging';
+import { InAppMessagingContextType } from '../InAppMessagingContext';
+
+export function useInAppMessagingState(): InAppMessagingContextType {
+ const [message, setMessage] =
+ useState(null);
+
+ useEffect(() => {
+ const listener = onMessageReceived(setMessage);
+ return listener.remove;
+ }, []);
+
+ return useMemo(
+ () => ({
+ clearMessage: () => {
+ setMessage(null);
+ },
+ displayMessage: setMessage,
+ message,
+ }),
+ [message]
+ );
+}
diff --git a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingProvider/InAppMessagingProvider.tsx b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingProvider/InAppMessagingProvider.tsx
deleted file mode 100644
index 4ce621341f3..00000000000
--- a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingProvider/InAppMessagingProvider.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, {
- ReactNode,
- useCallback,
- useEffect,
- useMemo,
- useState,
-} from 'react';
-import { onMessageReceived } from 'aws-amplify/in-app-messaging';
-import {
- InAppMessagingContext,
- InAppMessagingContextType,
-} from '../InAppMessagingContext';
-
-export interface InAppMessagingProviderProps {
- children: ReactNode;
-}
-
-export default function InAppMessagingProvider({
- children,
-}: InAppMessagingProviderProps): JSX.Element {
- const [message, setMessage] =
- useState(null);
-
- useEffect(() => {
- const listener = onMessageReceived(setMessage);
- return listener.remove;
- }, []);
-
- const clearMessage = useCallback(() => {
- setMessage(null);
- }, []);
-
- const value = useMemo(
- () => ({
- clearMessage,
- displayMessage: setMessage,
- message,
- }),
- [clearMessage, message]
- );
-
- return (
-
- {children}
-
- );
-}
diff --git a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingProvider/index.ts b/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingProvider/index.ts
deleted file mode 100644
index daa7c8b894b..00000000000
--- a/packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingProvider/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export {
- InAppMessagingProviderProps,
- default as InAppMessagingProvider,
-} from './InAppMessagingProvider';
diff --git a/packages/react-core-notifications/src/InAppMessaging/context/index.ts b/packages/react-core-notifications/src/InAppMessaging/context/index.ts
index 768ae70225e..3637954bda2 100644
--- a/packages/react-core-notifications/src/InAppMessaging/context/index.ts
+++ b/packages/react-core-notifications/src/InAppMessaging/context/index.ts
@@ -1,2 +1 @@
export * from './InAppMessagingContext';
-export * from './InAppMessagingProvider';
diff --git a/packages/react-core-notifications/src/InAppMessaging/hooks/index.ts b/packages/react-core-notifications/src/InAppMessaging/hooks/index.ts
index 70a74838495..107ba71afce 100644
--- a/packages/react-core-notifications/src/InAppMessaging/hooks/index.ts
+++ b/packages/react-core-notifications/src/InAppMessaging/hooks/index.ts
@@ -1,2 +1 @@
-export * from './useInAppMessaging';
export * from './useMessage';
diff --git a/packages/react-core-notifications/src/InAppMessaging/hooks/useInAppMessaging/__tests__/useInAppMessaging.spec.tsx b/packages/react-core-notifications/src/InAppMessaging/hooks/useInAppMessaging/__tests__/useInAppMessaging.spec.tsx
deleted file mode 100644
index 8b7875b674e..00000000000
--- a/packages/react-core-notifications/src/InAppMessaging/hooks/useInAppMessaging/__tests__/useInAppMessaging.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import TestRenderer from 'react-test-renderer';
-import { RenderNothing } from '@aws-amplify/ui-react-core';
-
-import { useInAppMessaging } from '..';
-
-const TestComponent = () => {
- const props = useInAppMessaging();
- return ;
-};
-
-describe('useInAppMessaging', () => {
- /* eslint-disable no-console */
- it('throws an error when called outside an InAppMessagingProvider', () => {
- // monkeypatch console.error into a no-op temporarily to supress React printed error regarding lack of
- // ErrorBoundary component
- const original = console.error;
- console.error = () => {};
-
- expect(() => TestRenderer.create()).toThrow();
-
- console.error = original;
- });
- /* eslint-enable no-console */
-});
diff --git a/packages/react-core-notifications/src/InAppMessaging/hooks/useInAppMessaging/index.ts b/packages/react-core-notifications/src/InAppMessaging/hooks/useInAppMessaging/index.ts
deleted file mode 100644
index 0fec701dc06..00000000000
--- a/packages/react-core-notifications/src/InAppMessaging/hooks/useInAppMessaging/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export {
- UseInAppMessaging,
- default as useInAppMessaging,
-} from './useInAppMessaging';
diff --git a/packages/react-core-notifications/src/InAppMessaging/hooks/useInAppMessaging/useInAppMessaging.ts b/packages/react-core-notifications/src/InAppMessaging/hooks/useInAppMessaging/useInAppMessaging.ts
deleted file mode 100644
index 88ed29e37cf..00000000000
--- a/packages/react-core-notifications/src/InAppMessaging/hooks/useInAppMessaging/useInAppMessaging.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useContext } from 'react';
-import {
- InAppMessagingContext,
- InAppMessagingContextType,
-} from '../../context';
-
-export type UseInAppMessaging = InAppMessagingContextType;
-
-/**
- * Utility hook used to access the InAppMessagingContext values
- *
- * @returns {InAppMessagingContextType} InAppMessaging context values
- */
-
-export default function useInAppMessaging(): UseInAppMessaging {
- const inAppMessagingContext = useContext(InAppMessagingContext);
- if (!inAppMessagingContext) {
- throw new Error(
- 'InAppMessagingContext is empty, did you forget the InAppMessagingProvider?'
- );
- }
- return inAppMessagingContext;
-}
diff --git a/packages/react-core-notifications/src/InAppMessaging/hooks/useMessage/__tests__/useMessage.spec.ts b/packages/react-core-notifications/src/InAppMessaging/hooks/useMessage/__tests__/useMessage.spec.ts
index bea60ed2450..df311e174b9 100644
--- a/packages/react-core-notifications/src/InAppMessaging/hooks/useMessage/__tests__/useMessage.spec.ts
+++ b/packages/react-core-notifications/src/InAppMessaging/hooks/useMessage/__tests__/useMessage.spec.ts
@@ -1,7 +1,8 @@
import * as InAppModule from 'aws-amplify/in-app-messaging';
import { ConsoleLogger as Logger } from 'aws-amplify/utils';
import { RenderNothing } from '@aws-amplify/ui-react-core';
-import { useInAppMessaging } from '../../useInAppMessaging';
+
+import { useInAppMessaging } from '../../../context';
import {
BannerMessageCommonProps,
InAppMessage,
@@ -11,7 +12,7 @@ import { UseMessageParams } from '../types';
import { EMPTY_PROPS } from '../useMessage';
import { useMessage } from '..';
-jest.mock('../../useInAppMessaging');
+jest.mock('../../../context');
jest.useFakeTimers();
type TestStyle = { backgroundColor: string };
diff --git a/packages/react-core-notifications/src/InAppMessaging/hooks/useMessage/useMessage.ts b/packages/react-core-notifications/src/InAppMessaging/hooks/useMessage/useMessage.ts
index 1999d681336..5cea529376a 100644
--- a/packages/react-core-notifications/src/InAppMessaging/hooks/useMessage/useMessage.ts
+++ b/packages/react-core-notifications/src/InAppMessaging/hooks/useMessage/useMessage.ts
@@ -1,11 +1,11 @@
import { ConsoleLogger as Logger } from 'aws-amplify/utils';
+import { notifyMessageInteraction } from 'aws-amplify/in-app-messaging';
import { isNil } from '@aws-amplify/ui';
-
import { RenderNothing } from '@aws-amplify/ui-react-core';
-import { useInAppMessaging } from '../useInAppMessaging';
+
+import { useInAppMessaging } from '../../context';
import { UseMessage, UseMessageParams } from './types';
import { getContentProps, getPositionProp } from './utils';
-import { notifyMessageInteraction } from 'aws-amplify/in-app-messaging';
export const EMPTY_PROPS = Object.freeze({});
diff --git a/packages/react-core/jest.config.ts b/packages/react-core/jest.config.ts
index 51924732fea..4e332128ae1 100644
--- a/packages/react-core/jest.config.ts
+++ b/packages/react-core/jest.config.ts
@@ -23,6 +23,7 @@ const config: Config = {
moduleNameMapper: { '^uuid$': '/../../node_modules/uuid' },
modulePathIgnorePatterns: ['/dist/'],
preset: 'ts-jest',
+ setupFilesAfterEnv: ['./jest.setup.ts'],
testEnvironment: 'jsdom',
};
diff --git a/packages/react-core/jest.setup.ts b/packages/react-core/jest.setup.ts
new file mode 100644
index 00000000000..7b0828bfa80
--- /dev/null
+++ b/packages/react-core/jest.setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index c855d18f240..c3976a49fec 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -43,12 +43,12 @@
"@aws-amplify/ui": "6.7.2",
"@xstate/react": "^3.2.2",
"lodash": "4.17.21",
- "react-hook-form": "^7.43.5",
+ "react-hook-form": "^7.53.2",
"xstate": "^4.33.6"
},
"peerDependencies": {
"aws-amplify": "^6.9.0",
- "react": "^16.14.0 || ^17.0 || ^18.0"
+ "react": "^16.14 || ^17 || ^18 || ^19"
},
"sideEffects": false
}
diff --git a/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx b/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx
index 011bc9979c3..4ea300de9bf 100644
--- a/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx
+++ b/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx
@@ -24,7 +24,7 @@ export default function AuthenticatorProvider({
children,
}: {
children: ReactNode;
-}): JSX.Element {
+}): React.JSX.Element {
// `authStatus` is exposed by `useAuthenticator` but should not be derived directly from the
// state machine as the machine only updates on `Authenticator` initiated events, which
// leads to scenarios where the state machine `authStatus` gets "stuck". For exmample,
diff --git a/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx b/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx
index 1736a916100..a4d8fdf650d 100644
--- a/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx
+++ b/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx
@@ -16,7 +16,7 @@ const getCurrentUserSpy = jest
.spyOn(Auth, 'getCurrentUser')
.mockResolvedValue({ userId: '1234', username: 'test' });
-function TestComponent(): JSX.Element | null {
+function TestComponent(): React.JSX.Element | null {
const { authStatus } = useAuthenticator();
return <>{authStatus};
}
diff --git a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap
index ebd5557b34f..092aa722ee5 100644
--- a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap
+++ b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap
@@ -7,6 +7,7 @@ exports[`useField returns the expected values in the happy path 1`] = `
"invalid": false,
"isDirty": false,
"isTouched": false,
+ "isValidating": false,
"name": "test-field",
"onBlur": [Function],
"onChange": [Function],
diff --git a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap
index 250bcc448ba..1cc48bf0bf3 100644
--- a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap
+++ b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap
@@ -7,6 +7,7 @@ exports[`useForm returns the expected values from getFieldState in the happy pat
"invalid": false,
"isDirty": false,
"isTouched": false,
+ "isValidating": false,
}
`;
diff --git a/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts b/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts
index 45542354156..01052370714 100644
--- a/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts
+++ b/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts
@@ -1,5 +1,5 @@
import { renderHook } from '@testing-library/react-hooks';
-import * as ReactHookForm from 'react-hook-form';
+import ReactHookForm from 'react-hook-form';
import { useForm } from '..';
import FormProvider from '../FormProvider';
@@ -9,6 +9,7 @@ import { DEFAULT_ERROR_MESSAGE } from '../useForm';
// mock 'react-hook-form` context
const mockFormContext: ReactHookForm.UseFormReturn = {
formState: {
+ disabled: false,
isDirty: false,
isLoading: false,
isSubmitSuccessful: false,
@@ -20,6 +21,7 @@ const mockFormContext: ReactHookForm.UseFormReturn = {
dirtyFields: [],
touchedFields: [],
errors: {},
+ validatingFields: {},
},
getFieldState: jest.fn(),
getValues: jest.fn(),
diff --git a/packages/react-core/src/components/FormCore/withFormProvider.tsx b/packages/react-core/src/components/FormCore/withFormProvider.tsx
index 71f159d957d..dd814261bcd 100644
--- a/packages/react-core/src/components/FormCore/withFormProvider.tsx
+++ b/packages/react-core/src/components/FormCore/withFormProvider.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { AnyComponent, MergeProps } from '../../types';
+import { AnyComponent } from '../../types';
import FormProvider from './FormProvider';
import { FormHandle, FormProviderProps } from './types';
@@ -12,7 +12,7 @@ import { FormHandle, FormProviderProps } from './types';
export default function withFormProvider<
ChildComp extends AnyComponent,
ChildProps extends React.ComponentPropsWithRef,
- Props extends MergeProps
+ Props extends ChildProps & FormProviderProps,
>(
Child: ChildComp
): React.ForwardRefExoticComponent<
@@ -23,7 +23,11 @@ export default function withFormProvider<
ref
) {
return (
-
+
);
diff --git a/packages/react-core/src/components/RenderNothing/RenderNothing.tsx b/packages/react-core/src/components/RenderNothing/RenderNothing.tsx
index b8b35a490c8..bddff9c0092 100644
--- a/packages/react-core/src/components/RenderNothing/RenderNothing.tsx
+++ b/packages/react-core/src/components/RenderNothing/RenderNothing.tsx
@@ -1,6 +1,8 @@
/**
* Utility component for rendering nothing.
*/
-export default function RenderNothing(_: Props): JSX.Element | null {
+export default function RenderNothing(
+ _: Props
+): React.JSX.Element | null {
return null;
}
diff --git a/packages/react-core/src/components/RenderNothing/__tests__/RenderNothing.spec.tsx b/packages/react-core/src/components/RenderNothing/__tests__/RenderNothing.spec.tsx
index 11aeb580b2b..250a86714f8 100644
--- a/packages/react-core/src/components/RenderNothing/__tests__/RenderNothing.spec.tsx
+++ b/packages/react-core/src/components/RenderNothing/__tests__/RenderNothing.spec.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
import RenderNothing from '../RenderNothing';
describe('RenderNothing', () => {
it('renders nothing', () => {
- const renderer = TestRenderer.create();
+ const { container } = render();
- expect(renderer.toJSON()).toBeNull();
+ expect(container).toBeEmptyDOMElement();
});
});
diff --git a/packages/react-core/src/hooks/usePreviousValue.ts b/packages/react-core/src/hooks/usePreviousValue.ts
index 7824e2fdd6c..2623db6040f 100644
--- a/packages/react-core/src/hooks/usePreviousValue.ts
+++ b/packages/react-core/src/hooks/usePreviousValue.ts
@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
export default function usePreviousValue(
value: Value
): Value | undefined {
- const previous = useRef();
+ const previous = useRef(undefined);
// update ref post render
useEffect(() => {
diff --git a/packages/react-geo/package.json b/packages/react-geo/package.json
index 0fb8514fd1c..b8f70fb8b54 100644
--- a/packages/react-geo/package.json
+++ b/packages/react-geo/package.json
@@ -49,8 +49,8 @@
"peerDependencies": {
"@aws-amplify/geo": "^3.0.59",
"aws-amplify": "^6.9.0",
- "react": "^16.14.0 || ^17.0 || ^18.0",
- "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+ "react": "^16.14 || ^17 || ^18 || ^19",
+ "react-dom": "^16.14 || ^17 || ^18 || ^19"
},
"devDependencies": {
"@aws-amplify/geo": "^3.0.59",
diff --git a/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx b/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx
index 6eff1540666..fae42c6b49e 100644
--- a/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx
+++ b/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx
@@ -74,7 +74,9 @@ const LocationSearchStandalone = (props: LocationSearchProps) => {
* return ;
* }
*/
-export const LocationSearch = (props: LocationSearchProps): JSX.Element => {
+export const LocationSearch = (
+ props: LocationSearchProps
+): React.JSX.Element => {
const { current: map } = useMap();
useSetUserAgent({
diff --git a/packages/react-liveness/package.json b/packages/react-liveness/package.json
index 34d9d9c3014..fb781a50bd7 100644
--- a/packages/react-liveness/package.json
+++ b/packages/react-liveness/package.json
@@ -44,8 +44,8 @@
"peerDependencies": {
"@aws-amplify/core": "*",
"aws-amplify": "^6.9.0",
- "react": "^16.14.0 || ^17.0 || ^18.0",
- "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+ "react": "^16.14 || ^17 || ^18 || ^19",
+ "react-dom": "^16.14 || ^17 || ^18 || ^19"
},
"dependencies": {
"@aws-amplify/ui": "6.7.2",
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx
index 397747fe2b9..5665341706a 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx
@@ -21,7 +21,7 @@ const credentialProvider = async () => {
export default function FaceLivenessDetector(
props: FaceLivenessDetectorProps
-): JSX.Element {
+): React.JSX.Element {
const { config, ...rest } = props;
return (
(null);
const {
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
index d3be78737bd..d9be3d3f811 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
@@ -95,7 +95,7 @@ const MemoizedMatchIndicator = React.memo(MatchIndicator);
export const LivenessCameraModule = (
props: LivenessCameraModuleProps
-): JSX.Element => {
+): React.JSX.Element => {
const {
isMobileScreen,
isRecordingStopped,
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx
index 2fc51349784..9dc5fc4fca1 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx
@@ -11,7 +11,7 @@ type RenderWithLivenessLivenessProviderResult = RenderResult & {
};
export function renderWithLivenessProvider(
- ui: JSX.Element
+ ui: React.JSX.Element
): RenderWithLivenessLivenessProviderResult {
const mockComponentProps: FaceLivenessDetectorProps = {
region: 'us-east-1',
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx
index 8a97d8a3c6b..dba293d6c13 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx
@@ -16,7 +16,7 @@ export interface FaceLivenessDetectorProviderProps
export function FaceLivenessDetectorProvider({
children,
...props
-}: FaceLivenessDetectorProviderProps): JSX.Element {
+}: FaceLivenessDetectorProviderProps): React.JSX.Element {
return (
{children}
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx
index 55c91b1e12e..554bc13d73e 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx
@@ -26,7 +26,7 @@ export const DefaultPhotosensitiveWarning = ({
headingText,
infoText,
labelText,
-}: DefaultPhotosensitiveWarningProps): JSX.Element => {
+}: DefaultPhotosensitiveWarningProps): React.JSX.Element => {
return (
{
+}: DefaultRecordingIconProps): React.JSX.Element => {
return (
{recordingIndicatorText}
@@ -63,7 +63,7 @@ interface CancelButtonProps {
export const DefaultCancelButton = ({
cancelLivenessCheckText,
-}: CancelButtonProps): JSX.Element => {
+}: CancelButtonProps): React.JSX.Element => {
return (
{
+}): React.JSX.Element | null => {
const displayText: Required = {
...defaultErrorDisplayText,
...overrideErrorDisplayText,
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/LivenessIconWithPopover.test.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/LivenessIconWithPopover.test.tsx
index ed8d7fcde12..1838bfbcf61 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/LivenessIconWithPopover.test.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/LivenessIconWithPopover.test.tsx
@@ -1,8 +1,7 @@
import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
import { LivenessIconWithPopover } from '../LivenessIconWithPopover';
-import { act } from 'react-test-renderer';
describe('LivenessIconWithPopover', () => {
it('should render the component content appropriately', () => {
diff --git a/packages/react-native-auth/package.json b/packages/react-native-auth/package.json
index a42df86c76b..ca7ca1a6cb4 100644
--- a/packages/react-native-auth/package.json
+++ b/packages/react-native-auth/package.json
@@ -24,7 +24,7 @@
"@babel/cli": "^7.23.0",
"@babel/core": "^7.23.2",
"@babel/preset-env": "^7.23.2",
- "@testing-library/react-native": "^12.3.0",
+ "@testing-library/react-native": "^12.9.0",
"metro-react-native-babel-preset": "^0.77.0"
},
"dependencies": {
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
index ef5b35720e6..81353ab35e7 100644
--- a/packages/react-native/package.json
+++ b/packages/react-native/package.json
@@ -25,7 +25,7 @@
"@babel/preset-env": "^7.23.2",
"@babel/preset-typescript": "^7.23.2",
"@react-native-async-storage/async-storage": "*",
- "@testing-library/react-native": "^12.3.0",
+ "@testing-library/react-native": "^12.9.0",
"metro-react-native-babel-preset": "^0.77.0",
"react-native-safe-area-context": "^4.7.3"
},
diff --git a/packages/react-native/src/Authenticator/Authenticator.tsx b/packages/react-native/src/Authenticator/Authenticator.tsx
index 4b5a443d568..bd074852337 100644
--- a/packages/react-native/src/Authenticator/Authenticator.tsx
+++ b/packages/react-native/src/Authenticator/Authenticator.tsx
@@ -56,7 +56,7 @@ function Authenticator({
Footer,
Header,
...options
-}: AuthenticatorProps): JSX.Element | null {
+}: AuthenticatorProps): React.JSX.Element | null {
useDeprecationWarning({
message:
'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
index 3b4d1b2b5bb..73c6be323ca 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
@@ -30,7 +30,7 @@ const ConfirmResetPassword = ({
resendCode,
validationErrors,
...rest
-}: DefaultConfirmResetPasswordProps): JSX.Element => {
+}: DefaultConfirmResetPasswordProps): React.JSX.Element => {
const {
disableFormSubmit,
fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx
index 3f686a74808..32e86838085 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx
@@ -53,7 +53,7 @@ describe('ConfirmResetPassword', () => {
expect(getAllByRole('header')).toBeDefined();
expect(getByText(getSubmitText())).toBeDefined();
expect(getByText(getResendCodeText())).toBeDefined();
- expect(getAllByRole('text')).toHaveLength(fields.length);
+ expect(getAllByRole('text')).toHaveLength(5);
});
it('renders an error message', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx
index c63a4e8b0fe..9a5e578c220 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx
@@ -30,7 +30,7 @@ const ConfirmSignIn = ({
toSignIn,
validationErrors,
...rest
-}: DefaultConfirmSignInProps): JSX.Element => {
+}: DefaultConfirmSignInProps): React.JSX.Element => {
const {
disableFormSubmit: disabled,
fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
index 393adc6845d..ead0e3dbf1e 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
@@ -44,7 +44,7 @@ describe('ConfirmSignIn', () => {
expect(getAllByRole('header')).toBeDefined();
expect(getByText(getChallengeText('SMS_MFA'))).toBeDefined();
expect(getByText(getConfirmText())).toBeDefined();
- expect(getAllByRole('text')).toHaveLength(fields.length);
+ expect(getAllByRole('text')).toHaveLength(3);
});
it('renders an error message', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx
index 150a8adbf2d..f18d36c3514 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx
@@ -31,7 +31,7 @@ const ConfirmSignUp = ({
resendCode,
validationErrors,
...rest
-}: DefaultConfirmSignUpProps): JSX.Element => {
+}: DefaultConfirmSignUpProps): React.JSX.Element => {
const {
disableFormSubmit: disabled,
fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx
index a3b100d7d96..e3cc30693a0 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx
@@ -29,7 +29,7 @@ const ConfirmVerifyUser = ({
skipVerification,
validationErrors,
...rest
-}: DefaultConfirmVerifyUserProps): JSX.Element => {
+}: DefaultConfirmVerifyUserProps): React.JSX.Element => {
const {
disableFormSubmit: disabled,
fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
index 4943d3137b6..d90e692a776 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
@@ -26,7 +26,7 @@ const ForceNewPassword = ({
toSignIn,
validationErrors,
...rest
-}: DefaultForceNewPasswordProps): JSX.Element => {
+}: DefaultForceNewPasswordProps): React.JSX.Element => {
const {
disableFormSubmit,
fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx
index 77dd70ea4d6..c734a21ee64 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx
@@ -28,7 +28,7 @@ const ForgotPassword = ({
toSignIn,
validationErrors,
...rest
-}: DefaultForgotPasswordProps): JSX.Element => {
+}: DefaultForgotPasswordProps): React.JSX.Element => {
const {
disableFormSubmit: disabled,
fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx
index e1a58c75888..316d827ce7e 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx
@@ -44,7 +44,7 @@ describe('ForgotPassword', () => {
expect(getAllByRole('header')).toBeDefined();
expect(getByText(getResetYourPasswordText())).toBeDefined();
expect(getByText(getSendCodeText())).toBeDefined();
- expect(getAllByRole('text')).toHaveLength(fields.length);
+ expect(getAllByRole('text')).toHaveLength(3);
});
it('renders an error message', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx b/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx
index 4712876dacf..ee27c1a0abd 100644
--- a/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx
@@ -35,7 +35,7 @@ const SetupTotp = ({
totpSecretCode,
validationErrors,
...rest
-}: DefaultSetupTotpProps): JSX.Element => {
+}: DefaultSetupTotpProps): React.JSX.Element => {
const {
disableFormSubmit: disabled,
fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
index 4a22619e651..08cf3a3d73b 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
@@ -26,7 +26,7 @@ const SignIn = ({
toSignUp,
validationErrors,
...rest
-}: DefaultSignInProps): JSX.Element => {
+}: DefaultSignInProps): React.JSX.Element => {
const {
getSignInTabText,
getSignInText,
diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
index e370099b6e6..e4685bedb1e 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
@@ -49,7 +49,7 @@ describe('SignIn', () => {
const { toJSON, getAllByRole, getByText } = render();
expect(toJSON()).toMatchSnapshot();
- expect(getAllByRole('text')).toHaveLength(fields.length);
+ expect(getAllByRole('text')).toHaveLength(5);
expect(getByText(getSignInText())).toBeDefined();
expect(getByText(getForgotPasswordText(true))).toBeDefined();
});
diff --git a/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx b/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx
index b94e01de114..631c63549f5 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx
@@ -34,7 +34,7 @@ const SignUp = ({
toSignIn,
validationErrors,
...rest
-}: DefaultSignUpProps): JSX.Element => {
+}: DefaultSignUpProps): React.JSX.Element => {
const {
disableFormSubmit,
fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx b/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx
index f7ad231d87c..08dd5cd7aaa 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx
@@ -59,7 +59,7 @@ describe('SignUp', () => {
expect(toJSON()).toMatchSnapshot();
expect(queryByText(getCreatingAccountText())).toBe(null);
- expect(getAllByRole('text')).toHaveLength(fields.length);
+ expect(getAllByRole('text')).toHaveLength(6);
});
it('renders as expected with errors', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx b/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx
index 0047d5f85b9..9a6cb18afbe 100644
--- a/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx
@@ -27,7 +27,7 @@ const VerifyUser = ({
skipVerification,
validationErrors,
...rest
-}: DefaultVerifyUserProps): JSX.Element => {
+}: DefaultVerifyUserProps): React.JSX.Element => {
const {
disableFormSubmit: disabled,
fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx b/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx
index e826b25c024..01f4fc7fa52 100644
--- a/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx
@@ -26,7 +26,7 @@ export default function DefaultContainer({
scrollViewContentContainerStyle,
style,
...rest
-}: ContainerProps): JSX.Element | null {
+}: ContainerProps): React.JSX.Element | null {
const theme = useTheme();
const insets = useSafeAreaInsets();
diff --git a/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx b/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx
index 0ca446c9942..35d42b85609 100644
--- a/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx
@@ -8,7 +8,7 @@ import { ContainerProps } from './types';
export default function InnerContainer({
children,
...rest
-}: ContainerProps): JSX.Element | null {
+}: ContainerProps): React.JSX.Element | null {
const theme = useTheme();
const themedStyle = getInnerContainerStyles(theme);
diff --git a/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx b/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx
index 6ed12ad08d9..dac1cd48788 100644
--- a/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx
@@ -26,7 +26,7 @@ export default function DefaultContent<
Header,
headerText,
validationErrors,
-}: DefaultContentProps): JSX.Element {
+}: DefaultContentProps): React.JSX.Element {
const themedStyles = useThemedStyles(getDefaultStyle);
const linkButtons = useMemo(
diff --git a/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx b/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx
index 057a8cef95b..fc73223bd8b 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx
@@ -6,6 +6,6 @@ import { DefaultFooterProps } from './types';
export default function DefaultFooter({
children,
...rest
-}: DefaultFooterProps): JSX.Element | null {
+}: DefaultFooterProps): React.JSX.Element | null {
return children ? {children} : null;
}
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx
index aaf246d1d55..c0473ef9c4a 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx
@@ -20,7 +20,7 @@ const DefaultRadioFormFields = ({
fieldLabelStyle,
isPending,
style,
-}: DefaultRadioFormFieldsProps): JSX.Element => {
+}: DefaultRadioFormFieldsProps): React.JSX.Element => {
return (
{(fields ?? []).map(({ name, value, ...props }) => {
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx
index 98a1638eb59..ba86fe8a828 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx
@@ -19,7 +19,7 @@ const DefaultTextFormFields = ({
isPending = false,
style,
validationErrors,
-}: DefaultTextFormFieldsProps): JSX.Element => {
+}: DefaultTextFormFieldsProps): React.JSX.Element => {
const formFields = (fields ?? []).map(({ name, type, ...field }) => {
const errors = validationErrors ? getErrors(validationErrors?.[name]) : [];
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx
index b879b6e1ffe..a60c3647da6 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx
@@ -28,7 +28,7 @@ const HIDDEN_INPUT_PROPS: TextInputProps = {
const HiddenInput = () => ;
-const Field = ({ type, ...rest }: FieldProps): JSX.Element => {
+const Field = ({ type, ...rest }: FieldProps): React.JSX.Element => {
const isPassword = type === 'password';
const Field = isPassword
? PasswordField
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx
index 206a2bd3d37..73fdd560312 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx
@@ -7,7 +7,7 @@ export const FieldErrors = ({
errors,
errorStyle,
style,
-}: FieldErrorsProps): JSX.Element | null => {
+}: FieldErrorsProps): React.JSX.Element | null => {
if (!errors || !errors.length) {
return null;
}
diff --git a/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx b/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx
index fb58da67941..014781e871d 100644
--- a/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx
@@ -7,7 +7,7 @@ export default function DefaultHeader({
children,
level = 3,
...rest
-}: DefaultHeaderProps): JSX.Element | null {
+}: DefaultHeaderProps): React.JSX.Element | null {
return children ? (
{children}
diff --git a/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx b/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx
index 15ade7884e7..66f848b80fc 100644
--- a/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx
+++ b/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx
@@ -11,7 +11,7 @@ export default function FederatedProviderButton({
style,
textStyle,
...rest
-}: FederatedProviderButtonProps): JSX.Element {
+}: FederatedProviderButtonProps): React.JSX.Element {
const pressableStyle = usePressableContainerStyles({
overrideStyle: style,
});
diff --git a/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx b/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx
index 3c6b9e6b66d..484b5540997 100644
--- a/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx
+++ b/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx
@@ -23,7 +23,7 @@ export default function FederatedProviderButtons({
socialProviders,
style,
toFederatedSignIn,
-}: FederatedProviderButtonsProps): JSX.Element | null {
+}: FederatedProviderButtonsProps): React.JSX.Element | null {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/Authenticator/withAuthenticator.tsx b/packages/react-native/src/Authenticator/withAuthenticator.tsx
index 79331b5f5be..6d0f0b7c322 100644
--- a/packages/react-native/src/Authenticator/withAuthenticator.tsx
+++ b/packages/react-native/src/Authenticator/withAuthenticator.tsx
@@ -5,12 +5,12 @@ import { WithAuthenticatorOptions } from './types';
export default function withAuthenticator(
Component: React.ComponentType,
options: WithAuthenticatorOptions = {}
-): (props: Props) => JSX.Element {
+): (props: Props) => React.JSX.Element {
return function WrappedWithAuthenticator(props: Props) {
return (
-
+
);
diff --git a/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx b/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx
index ca537203094..f8ee7266ca6 100644
--- a/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx
+++ b/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx
@@ -10,7 +10,7 @@ import { BannerMessageProps } from './types';
export default function BannerMessage({
position = 'top',
...props
-}: BannerMessageProps): JSX.Element | null {
+}: BannerMessageProps): React.JSX.Element | null {
const messageProps = useMessageProps(
props,
(imageDimensions: ImageDimensions) =>
diff --git a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx
index 47ee927c033..b54289d1395 100644
--- a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx
+++ b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx
@@ -11,7 +11,7 @@ import { CarouselMessageProps } from './types';
export default function CarouselMessage(
props: CarouselMessageProps
-): JSX.Element {
+): React.JSX.Element {
const { data, ...rest } = props;
const { style } = rest;
diff --git a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx
index 07d21a1accd..d47ade24290 100644
--- a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx
+++ b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx
@@ -10,7 +10,7 @@ import { CarouselMessageItemProps } from './types';
export default function CarouselMessageItem(
props: CarouselMessageItemProps
-): JSX.Element | null {
+): React.JSX.Element | null {
const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
const messageProps = useMessageProps(
props,
diff --git a/packages/react-native/src/InAppMessaging/components/CarouselMessage/__tests__/CarouselMessage.spec.tsx b/packages/react-native/src/InAppMessaging/components/CarouselMessage/__tests__/CarouselMessage.spec.tsx
index 2c11cbc4f05..0692d92a9e7 100644
--- a/packages/react-native/src/InAppMessaging/components/CarouselMessage/__tests__/CarouselMessage.spec.tsx
+++ b/packages/react-native/src/InAppMessaging/components/CarouselMessage/__tests__/CarouselMessage.spec.tsx
@@ -4,7 +4,6 @@ import { render } from '@testing-library/react-native';
import { IN_APP_MESSAGING_TEST_ID } from '../../../constants';
import CarouselMessage from '../CarouselMessage';
import { defaultStyle } from '../styles';
-import { ReactTestRendererJSON } from 'react-test-renderer';
jest.mock('../../../../primitives', () => ({ Carousel: 'Carousel' }));
jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
@@ -85,7 +84,9 @@ describe('CarouselMessage', () => {
const carouselMessageItem = toJSON();
expect(carouselMessageItem).toMatchSnapshot();
- const { props } = toJSON() as ReactTestRendererJSON;
+ const { props } = toJSON() as unknown as {
+ props: { layout: string; image: { src: string } };
+ };
expect(props.layout).toEqual(baseProps.layout);
expect(props.image).toEqual({ src: 'image-src' });
});
diff --git a/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx b/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx
index 9d6da819885..7c38ccb3b98 100644
--- a/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx
+++ b/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx
@@ -11,7 +11,7 @@ import { FullScreenMessageProps } from './types';
export default function FullScreenMessage(
props: FullScreenMessageProps
-): JSX.Element | null {
+): React.JSX.Element | null {
const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
const messageProps = useMessageProps(
props,
diff --git a/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx b/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx
index fb5e77f6454..da669ea257f 100644
--- a/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx
+++ b/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx
@@ -27,7 +27,7 @@ const onMessageAction: OnMessageAction = ({ action, url }) => {
function InAppMessageDisplay({
components: overrideComponents,
-}: InAppMessageDisplayProps): JSX.Element | null {
+}: InAppMessageDisplayProps): React.JSX.Element | null {
const components = React.useMemo(
() => ({ ...platformComponents, ...overrideComponents }),
[overrideComponents]
diff --git a/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx b/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx
index c2d37b7c102..72baab59c97 100644
--- a/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx
+++ b/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx
@@ -16,7 +16,7 @@ import { LayoutProps } from './types';
export default function MessageLayout({
orientation,
...props
-}: LayoutProps): JSX.Element {
+}: LayoutProps): React.JSX.Element {
const {
body,
hasButtons,
diff --git a/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx b/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx
index b37bb4d8f61..55c3a7658e5 100644
--- a/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx
+++ b/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx
@@ -17,7 +17,7 @@ export default function MessageWrapper({
children,
disableSafeAreaView,
style,
-}: MessageWrapperProps): JSX.Element {
+}: MessageWrapperProps): React.JSX.Element {
return (
diff --git a/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx b/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx
index 2267e1de9e2..3aa01096118 100644
--- a/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx
+++ b/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx
@@ -10,7 +10,7 @@ import { ModalMessageProps } from './types';
export default function ModalMessage(
props: ModalMessageProps
-): JSX.Element | null {
+): React.JSX.Element | null {
const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
const messageProps = useMessageProps(
props,
diff --git a/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx b/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx
index 9501989fb10..693c3aedc5b 100644
--- a/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx
+++ b/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx
@@ -6,12 +6,12 @@ import { InAppMessageDisplay, MessageComponents } from '../InAppMessageDisplay';
export default function withInAppMessaging(
Component: React.ComponentType,
options?: { components?: MessageComponents }
-): (props: Props) => JSX.Element {
+): (props: Props) => React.JSX.Element {
return function WrappedWithInAppMessaging(props: Props) {
return (
-
+
);
};
diff --git a/packages/react-native/src/primitives/Button/Button.tsx b/packages/react-native/src/primitives/Button/Button.tsx
index b14770fa319..8dbfe6ebb22 100644
--- a/packages/react-native/src/primitives/Button/Button.tsx
+++ b/packages/react-native/src/primitives/Button/Button.tsx
@@ -15,7 +15,7 @@ export default function Button({
textStyle,
variant = 'default',
...rest
-}: ButtonProps): JSX.Element {
+}: ButtonProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/primitives/Carousel/Carousel.tsx b/packages/react-native/src/primitives/Carousel/Carousel.tsx
index 9ae45204ff2..495012b7d2e 100644
--- a/packages/react-native/src/primitives/Carousel/Carousel.tsx
+++ b/packages/react-native/src/primitives/Carousel/Carousel.tsx
@@ -15,7 +15,7 @@ import { CarouselProps } from './types';
export default function Carousel(
props: CarouselProps
-): JSX.Element | null {
+): React.JSX.Element | null {
const {
data,
indicatorActiveStyle,
diff --git a/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx b/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx
index 542761b7f40..563b6353f10 100644
--- a/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx
+++ b/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx
@@ -12,9 +12,10 @@ export default function CarouselPageIndicator({
activeStyle,
currentIndex,
inactiveStyle,
+ indicatorTestId,
numberOfItems,
style,
-}: CarouselPageIndicatorProps): JSX.Element {
+}: CarouselPageIndicatorProps): React.JSX.Element {
const items = useMemo(
() =>
new Array(numberOfItems ?? 0)
@@ -24,15 +25,17 @@ export default function CarouselPageIndicator({
) : (
)
),
- [activeStyle, currentIndex, inactiveStyle, numberOfItems]
+ [activeStyle, currentIndex, inactiveStyle, indicatorTestId, numberOfItems]
);
return {items};
diff --git a/packages/react-native/src/primitives/Carousel/__tests__/Carousel.spec.tsx b/packages/react-native/src/primitives/Carousel/__tests__/Carousel.spec.tsx
index 90f903acb0a..c13e80cde75 100644
--- a/packages/react-native/src/primitives/Carousel/__tests__/Carousel.spec.tsx
+++ b/packages/react-native/src/primitives/Carousel/__tests__/Carousel.spec.tsx
@@ -10,10 +10,11 @@ import {
import { act, render } from '@testing-library/react-native';
import Carousel from '../Carousel';
-import { ReactTestInstance } from 'react-test-renderer';
jest.mock('../CarouselPageIndicator', () => 'CarouselPageIndicator');
+type ReactTestInstance = ReturnType['UNSAFE_root'];
+
type ItemProps = { str?: string };
const Item = ({ str }: ItemProps) => {str};
diff --git a/packages/react-native/src/primitives/Carousel/__tests__/CarouselPageIndicator.spec.tsx b/packages/react-native/src/primitives/Carousel/__tests__/CarouselPageIndicator.spec.tsx
index 2c6e144d5f9..4102840a781 100644
--- a/packages/react-native/src/primitives/Carousel/__tests__/CarouselPageIndicator.spec.tsx
+++ b/packages/react-native/src/primitives/Carousel/__tests__/CarouselPageIndicator.spec.tsx
@@ -1,62 +1,78 @@
import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, screen } from '@testing-library/react-native';
import CarouselPageIndicator from '../CarouselPageIndicator';
-import { ReactTestRendererJSON } from 'react-test-renderer';
+
import {
DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE,
DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE,
} from '../constants';
+const INDICATOR_TEST_ID = 'indicator-test-id';
+
describe('CarouselPageIndicator', () => {
it('renders with multiple items', () => {
- const { toJSON } = render(
-
+ render(
+
);
- expect(toJSON()).toMatchSnapshot();
+ const items = screen.queryAllByTestId(INDICATOR_TEST_ID);
- const { children } = toJSON() as ReactTestRendererJSON;
- expect(children).toHaveLength(3);
+ expect(items).toHaveLength(3);
});
it('renders with just one item', () => {
- const { toJSON } = render(
-
+ render(
+
);
- expect(toJSON()).toMatchSnapshot();
- const { children } = toJSON() as ReactTestRendererJSON;
- expect(children).toHaveLength(1);
+ const items = screen.queryAllByTestId(INDICATOR_TEST_ID);
+ expect(items).toHaveLength(1);
});
it('handles null numberOfItems value', () => {
// Ideally, this should not happen but, if it does, we should be able to handle gracefully
- const { toJSON } = render(
-
+ render(
+
);
- expect(toJSON()).toMatchSnapshot();
+ const items = screen.queryByTestId(INDICATOR_TEST_ID);
+
+ expect(items).toBeNull();
});
it('renders indicator styles based on current index', () => {
- const { toJSON } = render(
-
+ render(
+
);
- const { children } = toJSON() as ReactTestRendererJSON;
-
- expect(toJSON()).toMatchSnapshot();
+ const items = screen.queryAllByTestId(INDICATOR_TEST_ID);
- expect((children?.[0] as ReactTestRendererJSON).props.style).toStrictEqual([
+ expect(items[0].props.style).toStrictEqual([
DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE,
undefined,
]);
- expect((children?.[1] as ReactTestRendererJSON).props.style).toStrictEqual([
+ expect(items[1].props.style).toStrictEqual([
DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE,
undefined,
]);
- expect((children?.[2] as ReactTestRendererJSON).props.style).toStrictEqual([
+ expect(items[2].props.style).toStrictEqual([
DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE,
undefined,
]);
diff --git a/packages/react-native/src/primitives/Carousel/__tests__/__snapshots__/CarouselPageIndicator.spec.tsx.snap b/packages/react-native/src/primitives/Carousel/__tests__/__snapshots__/CarouselPageIndicator.spec.tsx.snap
index 35c6a022213..5b8c43e3f46 100644
--- a/packages/react-native/src/primitives/Carousel/__tests__/__snapshots__/CarouselPageIndicator.spec.tsx.snap
+++ b/packages/react-native/src/primitives/Carousel/__tests__/__snapshots__/CarouselPageIndicator.spec.tsx.snap
@@ -74,118 +74,3 @@ exports[`CarouselPageIndicator handles null index value 1`] = `
/>
`;
-
-exports[`CarouselPageIndicator handles null numberOfItems value 1`] = ``;
-
-exports[`CarouselPageIndicator renders indicator styles based on current index 1`] = `
-
-
-
-
-
-`;
-
-exports[`CarouselPageIndicator renders with just one item 1`] = `
-
-
-
-`;
-
-exports[`CarouselPageIndicator renders with multiple items 1`] = `
-
-
-
-
-
-`;
diff --git a/packages/react-native/src/primitives/Carousel/types.ts b/packages/react-native/src/primitives/Carousel/types.ts
index a6f098095b3..a0ef743cf20 100644
--- a/packages/react-native/src/primitives/Carousel/types.ts
+++ b/packages/react-native/src/primitives/Carousel/types.ts
@@ -16,6 +16,7 @@ export interface CarouselPageIndicatorProps {
inactiveStyle?: StyleProp;
numberOfItems: number;
style?: StyleProp;
+ indicatorTestId?: string;
}
export interface CarouselStyles {
diff --git a/packages/react-native/src/primitives/Checkbox/Checkbox.tsx b/packages/react-native/src/primitives/Checkbox/Checkbox.tsx
index 689003a651a..854f4a750c7 100644
--- a/packages/react-native/src/primitives/Checkbox/Checkbox.tsx
+++ b/packages/react-native/src/primitives/Checkbox/Checkbox.tsx
@@ -21,7 +21,7 @@ export default function Checkbox({
style,
value,
...rest
-}: CheckboxProps): JSX.Element {
+}: CheckboxProps): React.JSX.Element {
const [checked, setChecked] = useState(selected ?? false);
const theme = useTheme();
const themedStyle = getThemedStyles(theme, labelPosition);
diff --git a/packages/react-native/src/primitives/Divider/Divider.tsx b/packages/react-native/src/primitives/Divider/Divider.tsx
index 125845295bd..ca3ecf7b5ac 100644
--- a/packages/react-native/src/primitives/Divider/Divider.tsx
+++ b/packages/react-native/src/primitives/Divider/Divider.tsx
@@ -13,7 +13,7 @@ export default function Divider({
labelStyle,
lineStyle,
style,
-}: DividerProps): JSX.Element {
+}: DividerProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx b/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx
index 1f6cb1d84dc..de7a9c4560a 100644
--- a/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx
+++ b/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx
@@ -21,7 +21,7 @@ export default function ErrorMessage({
onDismiss,
style,
...rest
-}: ErrorMessageProps): JSX.Element {
+}: ErrorMessageProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/primitives/Heading/Heading.tsx b/packages/react-native/src/primitives/Heading/Heading.tsx
index 4ca0ac419e0..5f9f7688433 100644
--- a/packages/react-native/src/primitives/Heading/Heading.tsx
+++ b/packages/react-native/src/primitives/Heading/Heading.tsx
@@ -11,7 +11,7 @@ export default function Heading({
level = 6,
style,
...rest
-}: HeadingProps): JSX.Element {
+}: HeadingProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/primitives/Icon/Icon.tsx b/packages/react-native/src/primitives/Icon/Icon.tsx
index f3d49d18e21..59a690fdd4d 100644
--- a/packages/react-native/src/primitives/Icon/Icon.tsx
+++ b/packages/react-native/src/primitives/Icon/Icon.tsx
@@ -13,7 +13,7 @@ export default function Icon({
size,
style,
...rest
-}: IconProps): JSX.Element {
+}: IconProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = useMemo(
() => getThemedStyles(theme, color, size),
diff --git a/packages/react-native/src/primitives/IconButton/IconButton.tsx b/packages/react-native/src/primitives/IconButton/IconButton.tsx
index 94f776a94b7..21a099c207a 100644
--- a/packages/react-native/src/primitives/IconButton/IconButton.tsx
+++ b/packages/react-native/src/primitives/IconButton/IconButton.tsx
@@ -17,7 +17,7 @@ export default function IconButton({
source,
style,
...rest
-}: IconButtonProps): JSX.Element {
+}: IconButtonProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/primitives/Label/Label.tsx b/packages/react-native/src/primitives/Label/Label.tsx
index 6d1e65900bd..05a54fe4fd9 100644
--- a/packages/react-native/src/primitives/Label/Label.tsx
+++ b/packages/react-native/src/primitives/Label/Label.tsx
@@ -11,7 +11,7 @@ export default function Label({
style,
variant = 'primary',
...rest
-}: LabelProps): JSX.Element {
+}: LabelProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
const textStyle = [themedStyle.text, themedStyle[variant], style];
diff --git a/packages/react-native/src/primitives/PasswordField/PasswordField.tsx b/packages/react-native/src/primitives/PasswordField/PasswordField.tsx
index 2af94288d7a..29c2537a431 100644
--- a/packages/react-native/src/primitives/PasswordField/PasswordField.tsx
+++ b/packages/react-native/src/primitives/PasswordField/PasswordField.tsx
@@ -19,7 +19,7 @@ export default function PasswordField({
showPasswordButton = true,
style,
...rest
-}: PasswordFieldProps): JSX.Element {
+}: PasswordFieldProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx b/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx
index 08bc85f271b..d406f9e4db9 100644
--- a/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx
+++ b/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx
@@ -11,7 +11,7 @@ export default function PhoneNumberField({
labelStyle,
style,
...rest
-}: PhoneNumberFieldProps): JSX.Element {
+}: PhoneNumberFieldProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/primitives/Radio/Radio.tsx b/packages/react-native/src/primitives/Radio/Radio.tsx
index 5d2dfa79d06..e6c25e7f165 100644
--- a/packages/react-native/src/primitives/Radio/Radio.tsx
+++ b/packages/react-native/src/primitives/Radio/Radio.tsx
@@ -33,7 +33,7 @@ export default function Radio({
style,
value,
...rest
-}: RadioProps): JSX.Element {
+}: RadioProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx b/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx
index 157ace888c0..6ca9c9065de 100644
--- a/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx
+++ b/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx
@@ -34,7 +34,7 @@ export default function RadioGroup({
size,
style,
...rest
-}: RadioGroupProps): JSX.Element {
+}: RadioGroupProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme);
diff --git a/packages/react-native/src/primitives/Tabs/Tab.tsx b/packages/react-native/src/primitives/Tabs/Tab.tsx
index 232ebbf8b5a..17778b54b14 100644
--- a/packages/react-native/src/primitives/Tabs/Tab.tsx
+++ b/packages/react-native/src/primitives/Tabs/Tab.tsx
@@ -14,7 +14,7 @@ export default function Tab({
textStyle,
indicatorPosition,
...rest
-}: TabProps): JSX.Element {
+}: TabProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme, indicatorPosition);
diff --git a/packages/react-native/src/primitives/Tabs/Tabs.tsx b/packages/react-native/src/primitives/Tabs/Tabs.tsx
index 72af1b2cc73..52e11619fe5 100644
--- a/packages/react-native/src/primitives/Tabs/Tabs.tsx
+++ b/packages/react-native/src/primitives/Tabs/Tabs.tsx
@@ -14,7 +14,7 @@ export default function Tabs({
selectedIndex = 0,
style,
...rest
-}: TabsProps): JSX.Element {
+}: TabsProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = getThemedStyles(theme, indicatorPosition);
diff --git a/packages/react-native/src/primitives/TextField/TextField.tsx b/packages/react-native/src/primitives/TextField/TextField.tsx
index 09b7a6ff83b..d7f5157a886 100644
--- a/packages/react-native/src/primitives/TextField/TextField.tsx
+++ b/packages/react-native/src/primitives/TextField/TextField.tsx
@@ -25,7 +25,7 @@ export default function TextField({
labelStyle,
style,
...rest
-}: TextFieldProps): JSX.Element {
+}: TextFieldProps): React.JSX.Element {
const theme = useTheme();
const themedStyle = useMemo(() => getThemedStyles(theme), [theme]);
diff --git a/packages/react-native/src/theme/ThemeProvider.tsx b/packages/react-native/src/theme/ThemeProvider.tsx
index 258447c5d4c..4c020fa9586 100644
--- a/packages/react-native/src/theme/ThemeProvider.tsx
+++ b/packages/react-native/src/theme/ThemeProvider.tsx
@@ -14,7 +14,7 @@ export const ThemeProvider = ({
children,
theme,
colorMode,
-}: ThemeProviderProps): JSX.Element => {
+}: ThemeProviderProps): React.JSX.Element => {
const value = React.useMemo(
() => ({ theme: createTheme(theme, colorMode) }),
[theme, colorMode]
diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json
index 3ffe003f64c..2784a463fbd 100644
--- a/packages/react-notifications/package.json
+++ b/packages/react-notifications/package.json
@@ -47,8 +47,8 @@
},
"peerDependencies": {
"aws-amplify": "^6.9.0",
- "react": "^16.14.0 || ^17.0 || ^18.0",
- "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+ "react": "^16.14 || ^17 || ^18 || ^19",
+ "react-dom": "^16.14 || ^17 || ^18 || ^19"
},
"devDependencies": {
"@types/tinycolor2": "^1.4.3"
diff --git a/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx b/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx
index 8bdbdff1671..4e40c05bc3d 100644
--- a/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx
@@ -6,7 +6,10 @@ import { BackdropProps } from './types';
export const BACKDROP_TEST_ID = 'inappmessaging-backdrop';
-export function Backdrop({ onClick, ...rest }: BackdropProps): JSX.Element {
+export function Backdrop({
+ onClick,
+ ...rest
+}: BackdropProps): React.JSX.Element {
return (
(
- Content: (props: Props) => JSX.Element,
+ Content: (props: Props) => React.JSX.Element,
options: BackdropProps = {}
-): (props: Props) => JSX.Element {
+): (props: Props) => React.JSX.Element {
return function ContentWithBackdrop(props: Props) {
return (
<>
-
+
diff --git a/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx b/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx
index 5a0b8d1d348..b5d94855a62 100644
--- a/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx
@@ -9,7 +9,9 @@ import { MessageLayout } from '../MessageLayout';
import { BLOCK_CLASS } from './constants';
import { BannerMessageProps } from './types';
-export function BannerMessage(props: BannerMessageProps): JSX.Element | null {
+export function BannerMessage(
+ props: BannerMessageProps
+): React.JSX.Element | null {
const messageProps = useMessageProps(props);
const shouldBeFullWidth = useBreakpointValue([true, true, false]);
const { shouldRenderMessage, styles } = messageProps;
diff --git a/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx b/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx
index 96da2266ed7..5eae1c5ac47 100644
--- a/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx
@@ -11,7 +11,7 @@ export function CloseIconButton({
onClick,
style,
...rest
-}: CloseIconButtonProps): JSX.Element {
+}: CloseIconButtonProps): React.JSX.Element {
return (