Support React 18 in @uppy/react (#3680)

* Support React 18
* Remove unit tests
* Create e2e tests

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

e2e/clients/index.html

@@ -9,7 +9,7 @@ <h1>Test apps</h1>
     <nav>
       <ul>
 				<li><a href="dashboard-compressor/index.html">dashboard-compressor</a></li>
-				<li><a href="dashboard-react/index.html">dashboard-react</a></li>
+				<li><a href="react/index.html">react</a></li>
         <li><a href="dashboard-transloadit/index.html">dashboard-transloadit</a></li>
         <li><a href="dashboard-tus/index.html">dashboard-tus</a></li>
 				<li><a href="dashboard-ui/index.html">dashboard-ui</a></li>

e2e/clients/react/App.jsx

@@ -0,0 +1,32 @@
+/* eslint-disable react/react-in-jsx-scope */
+import Uppy from '@uppy/core'
+/* eslint-disable-next-line no-unused-vars */
+import React, { useState } from 'react'
+import { Dashboard, DashboardModal, DragDrop } from '@uppy/react'
+import ThumbnailGenerator from '@uppy/thumbnail-generator'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+import '@uppy/drag-drop/dist/style.css'
+
+export default function App () {
+  const uppyDashboard = new Uppy({ id: 'dashboard' })
+  const uppyModal = new Uppy({ id: 'modal' })
+  const uppyDragDrop = new Uppy({ id: 'drag-drop' }).use(ThumbnailGenerator)
+  const [open, setOpen] = useState(false)
+
+  // drag-drop has no visual output so we test it via the uppy instance
+  window.uppy = uppyDragDrop
+
+  return (
+    <div style={{ maxWidth: '30em', margin: '5em 0', display: 'grid', gridGap: '2em' }}>
+      <button type="button" id="open" onClick={() => setOpen(!open)}>
+        Open Modal
+      </button>
+
+      <Dashboard id="dashboard" uppy={uppyDashboard} />
+      <DashboardModal id="modal" open={open} uppy={uppyModal} />
+      <DragDrop id="drag-drop" uppy={uppyDragDrop} />
+    </div>
+  )
+}

e2e/clients/react/index.jsx

@@ -0,0 +1,8 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+
+const container = document.getElementById('app')
+const root = createRoot(container)
+
+root.render(<App />)

e2e/cypress/integration/react.spec.ts

@@ -0,0 +1,33 @@
+describe('@uppy/react', () => {
+  beforeEach(() => {
+    cy.visit('/react')
+    cy.get('#dashboard .uppy-Dashboard-input').as('dashboard-input')
+    cy.get('#modal .uppy-Dashboard-input').as('modal-input')
+    cy.get('#drag-drop .uppy-DragDrop-input').as('dragdrop-input')
+  })
+
+  it('should render Dashboard in React and show thumbnails', () => {
+    cy.get('@dashboard-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    cy.get('#dashboard .uppy-Dashboard-Item-previewImg')
+      .should('have.length', 2)
+      .each((element) => expect(element).attr('src').to.include('blob:'))
+  })
+
+  it('should render Modal in React and show thumbnails', () => {
+    cy.get('#open').click()
+    cy.get('@modal-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    cy.get('#modal .uppy-Dashboard-Item-previewImg')
+      .should('have.length', 2)
+      .each((element) => expect(element).attr('src').to.include('blob:'))
+  })
+
+  it('should render Drag & Drop in React and create a thumbail with @uppy/thumbnail-generator', () => {
+    const spy = cy.spy()
+
+    cy.window().then(({ uppy }) => uppy.on('thumbnail:generated', spy))
+    cy.get('@dragdrop-input').attachFile(['images/cat.jpg', 'images/traffic.jpg'])
+    // not sure how I can accurately wait for the thumbnail
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1000).then(() => expect(spy).to.be.called)
+  })
+})

e2e/package.json

@@ -50,8 +50,8 @@
     "deep-freeze": "^0.0.1",
     "parcel": "^2.0.1",
     "prompts": "^2.4.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "typescript": "^4.5.4",
     "vue": "next"
   }

packages/@uppy/react-native/package.json

@@ -29,7 +29,7 @@
     "expo-document-picker": ">=6.0.0",
     "expo-image-picker": ">=6.0.0",
     "expo-permissions": ">=6.0.0",
-    "react": "^16.0.0 || ^17.0.0",
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-native": "*"
   }
 }

packages/@uppy/react/package.json

@@ -31,14 +31,11 @@
     "prop-types": "^15.6.1"
   },
   "devDependencies": {
-    "@types/react": "^17.0.13",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "@types/react": "^18.0.8",
+    "react": "^18.1.0"
   },
   "peerDependencies": {
     "@uppy/core": "workspace:^",
-    "react": "^16.0.0 || ^17.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   }
 }