Use outerHTML for html() on DOM nodes

packages/react-hydrate/src/test/e2e.test.tsx

@@ -85,7 +85,7 @@ describe('react-hydrate', () => {
     );
 
     expect(clientHydrator.find('div')).toHaveReactProps({
-      dangerouslySetInnerHTML: {__html: serverHydrator.find('div')!.html()},
+      dangerouslySetInnerHTML: {__html: content},
     });
   });
 });

packages/react-testing/CHANGELOG.md

@@ -7,6 +7,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## [Unreleased] -->
 
+- Fixed `html()` to properly return the outermost wrapping DOM tags ([#1042](https://github.com/Shopify/quilt/pull/1042))
+
 ## [1.7.9] - 2019-09-27
 
 ### Changed

packages/react-testing/src/element.ts

@@ -128,7 +128,7 @@ export class Element<Props> implements Node<Props> {
     }
 
     if (instance instanceof HTMLElement) {
-      return instance.innerHTML;
+      return instance.outerHTML;
     }
 
     return allChildren.reduce<string>(

packages/react-testing/src/tests/element.test.tsx

@@ -290,7 +290,7 @@ describe('Element', () => {
   });
 
   describe('#html()', () => {
-    it('returns the innerHTML of the element if it is a DOM node', () => {
+    it('returns the outerHTML of the element if it is a DOM node', () => {
       const html = 'foobar';
 
       const div = document.createElement('div');
@@ -303,7 +303,7 @@ describe('Element', () => {
         defaultRoot,
       );
 
-      expect(element.html()).toBe(html);
+      expect(element.html()).toBe(`<div>${html}</div>`);
     });
 
     it('concatenates the HTML contents of all child elements and child text', () => {