chore: Removes dependencies on React <19 in test utils

cloudscape-design · Feb 21, 2025 · 8b361da · 8b361da
1 parent 20e6a83
commit 8b361da
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git a/src/autosuggest/__tests__/autosuggest.test.tsx b/src/autosuggest/__tests__/autosuggest.test.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import * as React from 'react';
+import React, { useState } from 'react';
 import { render } from '@testing-library/react';
 
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
@@ -28,6 +28,20 @@ const defaultProps: AutosuggestProps = {
   options: defaultOptions,
 };
 
+function StatefulAutosuggest(props: AutosuggestProps) {
+  const [value, setValue] = useState(props.value);
+  return (
+    <Autosuggest
+      {...props}
+      value={value}
+      onChange={event => {
+        props.onChange?.(event);
+        setValue(event.detail.value);
+      }}
+    />
+  );
+}
+
 function renderAutosuggest(jsx: React.ReactElement) {
   const { container, rerender } = render(jsx);
   const wrapper = createWrapper(container).findAutosuggest()!;
@@ -114,7 +128,7 @@ test('option with special characters can be selected by value', () => {
 test('should display entered text option/label', () => {
   const enteredTextLabel = jest.fn(value => `Custom function with ${value} placeholder`);
   const { wrapper } = renderAutosuggest(
-    <Autosuggest enteredTextLabel={enteredTextLabel} value="1" options={defaultOptions} />
+    <StatefulAutosuggest enteredTextLabel={enteredTextLabel} value="" options={defaultOptions} />
   );
   wrapper.setInputValue('1');
   expect(enteredTextLabel).toHaveBeenCalledWith('1');

diff --git a/src/property-filter/__tests__/property-filter-extended-operators.test.tsx b/src/property-filter/__tests__/property-filter-extended-operators.test.tsx
@@ -163,7 +163,7 @@ describe('extended operators', () => {
     expect(wrapper.findDropdown()?.findOpenDropdown()).toBeFalsy();
 
     // Reopen dropdown
-    wrapper.setInputValue('index >');
+    wrapper.setInputValue('index > ');
     expect(wrapper.find('[data-testid="change+"]')!.getElement()).toHaveTextContent('0');
   });
 

diff --git a/src/test-utils/dom/input/base-input.ts b/src/test-utils/dom/input/base-input.ts
@@ -1,9 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { Simulate } from 'react-dom/test-utils';
 
 import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom';
-import { act } from '@cloudscape-design/test-utils-core/utils-dom';
+import { act, setNativeValue } from '@cloudscape-design/test-utils-core/utils-dom';
 
 import inputSelectors from '../../../input/styles.selectors.js';
 
@@ -45,7 +44,9 @@ export default abstract class BaseInputWrapper extends ComponentWrapper {
   @usesDom setInputValue(value: string): void {
     const element = this.findNativeInput().getElement();
     act(() => {
-      Simulate.change(element, { target: { value } as unknown as EventTarget });
+      const event = new Event('change', { bubbles: true, cancelable: false });
+      setNativeValue(element, value);
+      element.dispatchEvent(event);
     });
   }
 

diff --git a/src/test-utils/dom/prompt-input/index.ts b/src/test-utils/dom/prompt-input/index.ts
@@ -1,9 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { Simulate } from 'react-dom/test-utils';
 
 import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom';
-import { act } from '@cloudscape-design/test-utils-core/utils-dom';
+import { act, setNativeValue } from '@cloudscape-design/test-utils-core/utils-dom';
 
 import testutilStyles from '../../../prompt-input/test-classes/styles.selectors.js';
 
@@ -41,9 +40,11 @@ export default class PromptInputWrapper extends ComponentWrapper {
    * @param value value to set the textarea to.
    */
   @usesDom setTextareaValue(value: string): void {
-    const element: HTMLTextAreaElement = this.findNativeTextarea().getElement();
+    const element = this.findNativeTextarea().getElement();
     act(() => {
-      Simulate.change(element, { target: { value } as unknown as EventTarget });
+      const event = new Event('change', { bubbles: true, cancelable: false });
+      setNativeValue(element, value);
+      element.dispatchEvent(event);
     });
   }
 }
diff --git a/src/test-utils/dom/textarea/index.ts b/src/test-utils/dom/textarea/index.ts
@@ -1,9 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { Simulate } from 'react-dom/test-utils';
 
 import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom';
-import { act } from '@cloudscape-design/test-utils-core/utils-dom';
+import { act, setNativeValue } from '@cloudscape-design/test-utils-core/utils-dom';
 
 import selectors from '../../../textarea/styles.selectors.js';
 
@@ -29,9 +28,11 @@ export default class TextareaWrapper extends ComponentWrapper<HTMLTextAreaElemen
    * @param value value to set the textarea to.
    */
   @usesDom setTextareaValue(value: string): void {
-    const element: HTMLTextAreaElement = this.findNativeTextarea().getElement();
+    const element = this.findNativeTextarea().getElement();
     act(() => {
-      Simulate.change(element, { target: { value } as unknown as EventTarget });
+      const event = new Event('change', { bubbles: true, cancelable: false });
+      setNativeValue(element, value);
+      element.dispatchEvent(event);
     });
   }
 }