fix: support multiple decorators with ReactTestUtils

packages/emotion/src/withStyle.tsx

@@ -246,7 +246,7 @@ const withStyle = decorator(
 
     // added so it can be tested with ReactTestUtils
     // more info: https://github.com/facebook/react/issues/13455
-    WithStyle.originalType = ComposedComponent
+    WithStyle.originalType = ComposedComponent.originalType || ComposedComponent
 
     // we have to pass these on, because sometimes users
     // access propTypes of the component in other components

packages/shared-types/src/CommonTypes.ts

@@ -84,4 +84,6 @@ interface InstUIBaseComponent {
 }
 export interface InstUIComponent
   extends ComponentClass<any, any>,
-    InstUIBaseComponent {}
+    InstUIBaseComponent {
+  originalType?: any
+}

packages/ui-i18n/src/bidirectional.tsx

@@ -126,7 +126,8 @@ const bidirectional: BidirectionalType = decorator((ComposedComponent) => {
 
   // added so it can be tested with ReactTestUtils
   // more info: https://github.com/facebook/react/issues/13455
-  BidirectionalForwardingRef.originalType = ComposedComponent
+  BidirectionalForwardingRef.originalType =
+    (ComposedComponent as any).originalType || ComposedComponent
 
   return BidirectionalForwardingRef
 }) as BidirectionalType

packages/ui-react-utils/src/DeterministicIdContext/withDeterministicId.tsx

@@ -91,7 +91,8 @@ const withDeterministicId = decorator((ComposedComponent: InstUIComponent) => {
 
   // added so it can be tested with ReactTestUtils
   // more info: https://github.com/facebook/react/issues/13455
-  WithDeterministicId.originalType = ComposedComponent
+  WithDeterministicId.originalType =
+    ComposedComponent.originalType || ComposedComponent
 
   if (process.env.NODE_ENV !== 'production') {
     WithDeterministicId.displayName = `WithDeterministicId(${ComposedComponent.displayName})`

packages/ui-text-input/package.json

@@ -27,7 +27,8 @@
     "@instructure/ui-badge": "8.47.1",
     "@instructure/ui-color-utils": "8.47.1",
     "@instructure/ui-test-utils": "8.47.1",
-    "@instructure/ui-themes": "8.47.1"
+    "@instructure/ui-themes": "8.47.1",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",

packages/ui-text-input/src/TextInput/__tests__/TextInput.test.tsx

@@ -23,6 +23,8 @@
  */
 
 import React from 'react'
+import ReactDOM from 'react-dom'
+import ReactTestUtils from 'react-dom/test-utils'
 import { expect, mount, stub, within, find } from '@instructure/ui-test-utils'
 
 import { TextInput } from '../index'
@@ -41,7 +43,29 @@ const contentAfterSVG = (
   </svg>
 )
 
+class WrapperComponent extends React.Component {
+  render() {
+    return (
+      <div>
+        <TextInput />
+      </div>
+    )
+  }
+}
+
 describe('<TextInput/>', async () => {
+  it('can be found and tested with ReactTestUtils', async () => {
+    const rootNode = document.createElement('div')
+    document.body.appendChild(rootNode)
+
+    // eslint-disable-next-line react/no-render-return-value
+    const rendered = ReactDOM.render(<WrapperComponent />, rootNode)
+    ReactTestUtils.findRenderedComponentWithType(
+      rendered as any,
+      (TextInput as any).originalType
+    )
+  })
+
   it('should include a label', async () => {
     await mount(<TextInput renderLabel="Name" />)
     const label = await find('label')