Repository: facebook/react
Pull request: [Fizz] Make some tests more resilient to implementation details

There are some invisible extra `<template>` tags inserted into Fizz atm for the IDs. It's not great and we'll probably optimize them away somehow but it'll likely be something in the HTML there.

Also the order of value/select attributes swapped so we shouldn't test the exact HTML.

Changed files:
filename: packages/react-dom/src/__tests__/ReactDOMSelect-test.js
patch: @@ -442,10 +442,15 @@ describe('ReactDOMSelect', () => {
         <option value="gorilla">A gorilla!</option>
       </select>
     );
-    const markup = ReactDOMServer.renderToString(stub);
-    expect(markup).toContain('<option selected="" value="giraffe"');
-    expect(markup).not.toContain('<option selected="" value="monkey"');
-    expect(markup).not.toContain('<option selected="" value="gorilla"');
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(stub);
+    const options = container.firstChild.options;
+    expect(options[0].value).toBe('monkey');
+    expect(options[0].selected).toBe(false);
+    expect(options[1].value).toBe('giraffe');
+    expect(options[1].selected).toBe(true);
+    expect(options[2].value).toBe('gorilla');
+    expect(options[2].selected).toBe(false);
   });
 
   it('should support server-side rendering with defaultValue', () => {
@@ -456,10 +461,15 @@ describe('ReactDOMSelect', () => {
         <option value="gorilla">A gorilla!</option>
       </select>
     );
-    const markup = ReactDOMServer.renderToString(stub);
-    expect(markup).toContain('<option selected="" value="giraffe"');
-    expect(markup).not.toContain('<option selected="" value="monkey"');
-    expect(markup).not.toContain('<option selected="" value="gorilla"');
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(stub);
+    const options = container.firstChild.options;
+    expect(options[0].value).toBe('monkey');
+    expect(options[0].selected).toBe(false);
+    expect(options[1].value).toBe('giraffe');
+    expect(options[1].selected).toBe(true);
+    expect(options[2].value).toBe('gorilla');
+    expect(options[2].selected).toBe(false);
   });
 
   it('should support server-side rendering with dangerouslySetInnerHTML', () => {
@@ -487,10 +497,15 @@ describe('ReactDOMSelect', () => {
         />
       </select>
     );
-    const markup = ReactDOMServer.renderToString(stub);
-    expect(markup).toContain('<option selected="" value="giraffe"');
-    expect(markup).not.toContain('<option selected="" value="monkey"');
-    expect(markup).not.toContain('<option selected="" value="gorilla"');
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(stub);
+    const options = container.firstChild.options;
+    expect(options[0].value).toBe('monkey');
+    expect(options[0].selected).toBe(false);
+    expect(options[1].value).toBe('giraffe');
+    expect(options[1].selected).toBe(true);
+    expect(options[2].value).toBe('gorilla');
+    expect(options[2].selected).toBe(false);
   });
 
   it('should support server-side rendering with multiple', () => {
@@ -501,10 +516,15 @@ describe('ReactDOMSelect', () => {
         <option value="gorilla">A gorilla!</option>
       </select>
     );
-    const markup = ReactDOMServer.renderToString(stub);
-    expect(markup).toContain('<option selected="" value="giraffe"');
-    expect(markup).toContain('<option selected="" value="gorilla"');
-    expect(markup).not.toContain('<option selected="" value="monkey"');
+    const container = document.createElement('div');
+    container.innerHTML = ReactDOMServer.renderToString(stub);
+    const options = container.firstChild.options;
+    expect(options[0].value).toBe('monkey');
+    expect(options[0].selected).toBe(false);
+    expect(options[1].value).toBe('giraffe');
+    expect(options[1].selected).toBe(true);
+    expect(options[2].value).toBe('gorilla');
+    expect(options[2].selected).toBe(true);
   });
 
   it('should not control defaultValue if re-adding options', () => {

filename: packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
patch: @@ -54,6 +54,45 @@ describe('ReactDOMServerSuspense', () => {
     throw new Promise(() => {});
   }
 
+  function getVisibleChildren(element) {
+    const children = [];
+    let node = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (
+          node.tagName !== 'SCRIPT' &&
+          node.tagName !== 'TEMPLATE' &&
+          node.tagName !== 'template' &&
+          !node.hasAttribute('hidden') &&
+          !node.hasAttribute('aria-hidden')
+        ) {
+          const props = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            if (
+              attributes[i].name === 'id' &&
+              attributes[i].value.includes(':')
+            ) {
+              // We assume this is a React added ID that's a non-visual implementation detail.
+              continue;
+            }
+            props[attributes[i].name] = attributes[i].value;
+          }
+          props.children = getVisibleChildren(node);
+          children.push(React.createElement(node.tagName.toLowerCase(), props));
+        }
+      } else if (node.nodeType === 3) {
+        children.push(node.data);
+      }
+      node = node.nextSibling;
+    }
+    return children.length === 0
+      ? undefined
+      : children.length === 1
+      ? children[0]
+      : children;
+  }
+
   // @gate experimental || www
   it('should render the children when no promise is thrown', async () => {
     const c = await serverRender(
@@ -63,10 +102,7 @@ describe('ReactDOMServerSuspense', () => {
         </React.Suspense>
       </div>,
     );
-    const e = c.children[0];
-
-    expect(e.tagName).toBe('DIV');
-    expect(e.textContent).toBe('Children');
+    expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
   });
 
   // @gate experimental || www
@@ -78,10 +114,7 @@ describe('ReactDOMServerSuspense', () => {
         </React.Suspense>
       </div>,
     );
-    const e = c.children[0];
-
-    expect(e.tagName).toBe('DIV');
-    expect(e.textContent).toBe('Fallback');
+    expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
   });
 
   // @gate experimental || www
@@ -98,10 +131,12 @@ describe('ReactDOMServerSuspense', () => {
         </React.Suspense>
       </div>,
     );
-    const e = c.children[0];
 
-    expect(e.innerHTML).toBe(
-      '<div>Children</div><!--$!--><div>Fallback</div><!--/$-->',
+    expect(getVisibleChildren(c)).toEqual(
+      <div>
+        <div>Children</div>
+        <div>Fallback</div>
+      </div>,
     );
   });