test: add failing test cases for prod React apps

When testing a production React application Puppeteer is unable to
serialise the elements due to circular references from React Fiber.

The tests include a basic `getByText` test and another for checking
refetching after a key change. The later is important as key changes are
common in React.

Skip the tests until they pass with Puppeteer as well.

Author: olivierwilkinson

test-app/index.html

@@ -21,6 +21,14 @@
         content: 'Named by pseudo element';
       }
     </style>
+    <script
+      crossorigin
+      src="https://unpkg.com/react@17/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
+    ></script>
     <script>
       define = function (){}
       define.amd = {}
@@ -139,12 +147,17 @@ <h2>Simmer</h2>
         </div>
       </div>
     </section>
+
+    <div id="react-root"></div>
+
     <!-- Prettier unindents the script tag below -->
     <script>
       document
         .querySelector('[data-testid="image-with-random-alt-tag"]')
         .setAttribute('alt', 'Image Random Alt Text ' + Math.random())
     </script>
+
+    <!-- utils -->
     <script>
       function createButton(text) {
         const button = document.createElement('button')
@@ -162,5 +175,25 @@ <h2>Simmer</h2>
         createButton('Long Delayed Button Text')
       }, 2000)
     </script>
+
+    <!-- React app -->
+    <script>
+      const Root = () => {
+        const [titleKey, setTitleKey] = React.useState('initial')
+        return React.createElement(
+          React.StrictMode,
+          undefined,
+          React.createElement('section', undefined, [
+            React.createElement('h2', {key: titleKey, id: 'react-title'}, 'React'),
+            React.createElement('button', { onClick: () => setTitleKey('updated') }, 'Recreate React Title'),
+          ]),
+        )
+      }
+
+      ReactDOM.render(
+        React.createElement(Root),
+        document.getElementById('react-root'),
+      )
+    </script>
   </body>
 </html>

test/async/queries.e2e.ts

@@ -183,4 +183,24 @@ describe('queries', () => {
 
     expect(await getByText('High depth non-specific div one')).not.toBeNull()
   })
+
+  // This tests fails when using Puppeteer, but passes when using other services
+  it.skip('findByText works for elements in production React app', async () => {
+    const {findByText} = setupBrowser(browser)
+
+    expect(await findByText('React')).not.toBeNull()
+  })
+
+  // This tests fails when using Puppeteer, but passes when using other services
+  it.skip('refetching works when React key changes and element recreated', async () => {
+    const {findByText} = setupBrowser(browser)
+
+    const title = await findByText('React')
+    const recreateTitleButton = await findByText('Recreate React Title')
+    await recreateTitleButton.click()
+
+    const refetchedTitle = await refetchElement(title, '')
+    expect(refetchedTitle).not.toBeNull()
+    expect(await refetchedTitle.getAttribute('id')).toEqual('react-title')
+  })
 })