From 571d7a86ce5fc3e406566c03ed9c5b44bdd0195d Mon Sep 17 00:00:00 2001
From: Kevin Weber <kevin.weber@airbnb.com>
Date: Fri, 18 Feb 2022 17:42:56 +0100
Subject: [PATCH 1/7] Support getWrappingComponentRenderer &
 wrapWithWrappingComponent

---
 index.d.ts                       |  2 +-
 src/Adapter.ts                   | 38 +++++++++++++++++++++++++++-----
 src/MountRenderer.ts             | 37 ++++++++++++++++++++++++++-----
 src/RootFinder.ts                | 12 ++++++++++
 src/wrapWithWrappingComponent.ts | 38 ++++++++++++++++++++++++++++++++
 5 files changed, 115 insertions(+), 12 deletions(-)
 create mode 100644 src/RootFinder.ts
 create mode 100644 src/wrapWithWrappingComponent.ts

diff --git a/index.d.ts b/index.d.ts
index 36756e1..3d23ffe 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -119,7 +119,7 @@ declare module 'enzyme' {
     // Required methods.
     createElement(
       type: string | Function,
-      props: Object,
+      props: Object | null,
       ...children: ReactElement[]
     ): ReactElement;
     createRenderer(options: AdapterOptions): Renderer;
diff --git a/src/Adapter.ts b/src/Adapter.ts
index 4db3544..5f67582 100644
--- a/src/Adapter.ts
+++ b/src/Adapter.ts
@@ -1,12 +1,20 @@
-import type { AdapterOptions, RSTNode } from 'enzyme';
+import type {
+  AdapterOptions,
+  MountRendererProps,
+  RSTNode,
+  ShallowRendererProps,
+} from 'enzyme';
 import enzyme from 'enzyme';
 import type { ReactElement } from 'react';
-import { VNode, h } from 'preact';
+import type { VNode } from 'preact';
+import { h } from 'preact';
 
 import MountRenderer from './MountRenderer.js';
 import ShallowRenderer from './ShallowRenderer.js';
 import StringRenderer from './StringRenderer.js';
 import { rstNodeFromElement } from './preact10-rst.js';
+import wrapWithWrappingComponent from './wrapWithWrappingComponent.js';
+import RootFinder from './RootFinder.js';
 
 export const { EnzymeAdapter } = enzyme;
 
@@ -31,13 +39,13 @@ export default class Adapter extends EnzymeAdapter {
     this.nodeToElement = this.nodeToElement.bind(this);
   }
 
-  createRenderer(options: AdapterOptions) {
+  createRenderer(options: AdapterOptions & MountRendererProps) {
     switch (options.mode) {
       case 'mount':
         // The `attachTo` option is only supported for DOM rendering, for
         // consistency with React, even though the Preact adapter could easily
         // support it for shallow rendering.
-        return new MountRenderer({ container: options.attachTo });
+        return new MountRenderer({ ...options, container: options.attachTo });
       case 'shallow':
         return new ShallowRenderer();
       case 'string':
@@ -91,7 +99,7 @@ export default class Adapter extends EnzymeAdapter {
 
   createElement(
     type: string | Function,
-    props: Object,
+    props: Object | null,
     ...children: ReactElement[]
   ) {
     return h(type as any, props, ...children);
@@ -100,4 +108,24 @@ export default class Adapter extends EnzymeAdapter {
   elementToNode(el: ReactElement): RSTNode {
     return rstNodeFromElement(el as VNode) as RSTNode;
   }
+
+  // This function is only called during shallow rendering
+  wrapWithWrappingComponent = (
+    node: ReactElement,
+    /**
+     * Tip:
+     * The use of `wrappingComponent` and `wrappingComponentProps` is discouraged!
+     * Using those props complicates a potential future migration to a different testing library.
+     * Instead, wrap a component like this:
+     * ```
+     * shallow(<Wrapper><Component/></Wrapper>)
+     * ```
+     */
+    options?: ShallowRendererProps
+  ) => {
+    return {
+      RootFinder: RootFinder,
+      node: wrapWithWrappingComponent(this.createElement, node, options),
+    };
+  };
 }
diff --git a/src/MountRenderer.ts b/src/MountRenderer.ts
index 90c9cce..404b6d9 100644
--- a/src/MountRenderer.ts
+++ b/src/MountRenderer.ts
@@ -1,5 +1,10 @@
-import type { MountRenderer as AbstractMountRenderer, RSTNode } from 'enzyme';
-import { VNode, h } from 'preact';
+import type {
+  MountRenderer as AbstractMountRenderer,
+  MountRendererProps,
+  RSTNode,
+} from 'enzyme';
+import { VNode, h, createElement } from 'preact';
+import type { ReactElement } from 'react';
 import { act } from 'preact/test-utils';
 
 import { render } from './compat.js';
@@ -14,7 +19,7 @@ import { getDisplayName, withReplacedMethod } from './util.js';
 
 type EventDetails = { [prop: string]: any };
 
-export interface Options {
+export interface Options extends MountRendererProps {
   /**
    * The container element to render into.
    * If not specified, a detached element (not connected to the body) is used.
@@ -34,17 +39,32 @@ function constructEvent(type: string, init: EventInit) {
 export default class MountRenderer implements AbstractMountRenderer {
   private _container: HTMLElement;
   private _getNode: typeof getNode;
+  private _options: Options;
 
-  constructor({ container }: Options = {}) {
+  constructor(options: Options = {}) {
     installDebounceHook();
 
-    this._container = container || document.createElement('div');
+    this._container = options.container || document.createElement('div');
     this._getNode = getNode;
+    this._options = options;
   }
 
   render(el: VNode, context?: any, callback?: () => any) {
     act(() => {
-      render(el, this._container);
+      if (!this._options.wrappingComponent) {
+        render(el, this._container);
+        return;
+      }
+
+      // `this._options.wrappingComponent` is only available during mount-rendering,
+      // even though ShallowRenderer uses an instance of MountRenderer under the hood.
+      // For shallow-rendered components, we need to utilize `wrapWithWrappingComponent`.
+      const wrappedComponent: ReactElement = createElement(
+        this._options.wrappingComponent,
+        this._options.wrappingComponentProps || null,
+        el
+      );
+      render(wrappedComponent, this._container);
     });
 
     if (callback) {
@@ -70,6 +90,7 @@ export default class MountRenderer implements AbstractMountRenderer {
     ) {
       return null;
     }
+
     return this._getNode(this._container);
   }
 
@@ -135,4 +156,8 @@ export default class MountRenderer implements AbstractMountRenderer {
     });
     return result;
   }
+
+  getWrappingComponentRenderer() {
+    return this;
+  }
 }
diff --git a/src/RootFinder.ts b/src/RootFinder.ts
new file mode 100644
index 0000000..da2dbae
--- /dev/null
+++ b/src/RootFinder.ts
@@ -0,0 +1,12 @@
+import { Component } from 'preact';
+
+export default class RootFinder extends Component<{ context: any }> {
+  // I'm not sure if this is needed… It might help with legacy context 🤷
+  getChildContext() {
+    return this.props.context;
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
diff --git a/src/wrapWithWrappingComponent.ts b/src/wrapWithWrappingComponent.ts
new file mode 100644
index 0000000..e854250
--- /dev/null
+++ b/src/wrapWithWrappingComponent.ts
@@ -0,0 +1,38 @@
+import type { ReactElement } from 'react';
+import type { EnzymeAdapter, ShallowRendererProps } from 'enzyme';
+import RootFinder from './RootFinder.js';
+import { childElements } from './compat.js';
+
+/** Based on the equivalent function in `enzyme-adapter-utils` */
+export default function wrapWithWrappingComponent(
+  createElement: EnzymeAdapter['createElement'],
+  node: ReactElement,
+  options: ShallowRendererProps = {}
+) {
+  const { wrappingComponent, wrappingComponentProps = {}, context } = options;
+
+  if (!wrappingComponent) {
+    return node;
+  }
+
+  let nodeWithValidChildren = node;
+
+  if (typeof nodeWithValidChildren.props.children === 'string') {
+    // This prevents an error when `.dive()` is used:
+    // `TypeError: ShallowWrapper::dive() can only be called on components`
+    nodeWithValidChildren = Object.assign({}, nodeWithValidChildren);
+    nodeWithValidChildren.props.children = childElements(nodeWithValidChildren);
+  }
+
+  const rootFinderContext =
+    (wrappingComponentProps as { context: any })?.context || context;
+  const rootFinderProps = rootFinderContext
+    ? { context: rootFinderContext }
+    : null;
+
+  return createElement(
+    wrappingComponent,
+    wrappingComponentProps,
+    createElement(RootFinder, rootFinderProps, nodeWithValidChildren)
+  );
+}

From 829fae46557b13d3fc1efe7fbcf4dbb9d9c53348 Mon Sep 17 00:00:00 2001
From: Kevin Weber <kevin.weber@airbnb.com>
Date: Fri, 18 Feb 2022 17:43:18 +0100
Subject: [PATCH 2/7] Add tests

---
 test/Adapter_test.tsx       |  50 ++++++++++++++++++
 test/MountRenderer_test.tsx |  37 +++++++++++++
 test/integration_test.tsx   | 102 ++++++++++++++++++++++++++++++++----
 3 files changed, 180 insertions(+), 9 deletions(-)

diff --git a/test/Adapter_test.tsx b/test/Adapter_test.tsx
index d54e103..f3d6ba0 100644
--- a/test/Adapter_test.tsx
+++ b/test/Adapter_test.tsx
@@ -215,4 +215,54 @@ describe('Adapter', () => {
       });
     });
   });
+
+  describe('#wrapWithWrappingComponent', () => {
+    function Button() {
+      return <button>Click me</button>;
+    }
+
+    function WrappingComponent({
+      children,
+      ...wrappingComponentProps
+    }: {
+      children: preact.ComponentChildren;
+    }) {
+      return <div {...wrappingComponentProps}>{children}</div>;
+    }
+
+    it('returns original component when not wrapped', () => {
+      const button = <Button />;
+      const adapter = new Adapter();
+      const hostNode = adapter.wrapWithWrappingComponent(button);
+
+      assert.ok(hostNode);
+      assert.typeOf(hostNode.RootFinder, 'function');
+      assert.deepEqual(hostNode.node, button);
+    });
+
+    it('returns wrapped component', () => {
+      const button = <Button />;
+      const wrappingComponentProps = { foo: 'bar' };
+      const wrappedComponent = (
+        <WrappingComponent {...wrappingComponentProps}>
+          {button}
+        </WrappingComponent>
+      );
+
+      const adapter = new Adapter();
+      const hostNode = adapter.wrapWithWrappingComponent(button, {
+        wrappingComponent: WrappingComponent,
+        wrappingComponentProps,
+      });
+
+      assert.ok(hostNode);
+
+      const rootFinderInHostNode = hostNode.node.props.children.type;
+      assert.equal(hostNode.RootFinder, rootFinderInHostNode);
+
+      const buttonInWrappedComponent = wrappedComponent.props.children;
+      const buttonInHostNode = hostNode.node.props.children.props.children;
+      assert.equal(buttonInHostNode, buttonInWrappedComponent);
+    });
+  });
 });
diff --git a/test/MountRenderer_test.tsx b/test/MountRenderer_test.tsx
index 3cc5109..bce753a 100644
--- a/test/MountRenderer_test.tsx
+++ b/test/MountRenderer_test.tsx
@@ -262,4 +262,41 @@ describe('MountRenderer', () => {
       assert.equal(result, 'test');
     });
   });
+
+  describe('getNode', () => {
+    it('can get the node', () => {
+      const renderedTree = [
+        {
+          nodeType: 'host',
+          type: 'div',
+          props: {},
+          key: null,
+          ref: null,
+          instance: document.createElement('span'),
+          rendered: [],
+        },
+      ];
+
+      const Widget = () => <span />;
+      const renderer = new MountRenderer();
+      renderer.render(<Widget />);
+
+      const result = renderer.getWrappingComponentRenderer();
+
+      assert.equal(result.getNode()?.rendered.length, 1);
+
+      const resultInstance = (result.getNode()?.rendered[0] as RSTNode)
+        .instance;
+      const expectedInstance = renderedTree[0].instance;
+
+      assert.equal(resultInstance.toString(), expectedInstance.toString());
+      assert.equal(resultInstance.nodeType, expectedInstance.nodeType);
+      assert.equal(resultInstance.nodeName, expectedInstance.nodeName);
+      assert.equal(resultInstance.nodeValue, expectedInstance.nodeValue);
+      assert.equal(
+        resultInstance.childNodes.length,
+        expectedInstance.childNodes.length
+      );
+    });
+  });
 });
diff --git a/test/integration_test.tsx b/test/integration_test.tsx
index 7259db3..6301cb3 100644
--- a/test/integration_test.tsx
+++ b/test/integration_test.tsx
@@ -12,6 +12,23 @@ import Adapter from '../src/Adapter.js';
 
 const { configure, shallow, mount, render: renderToString } = enzyme;
 
+function normalizeDebugMessage(message: string) {
+  return message.replace(/\s{2,}/g, '').replace(/>\s/g, '>');
+}
+
+function debugWrappedComponent(wrapper: enzyme.ShallowWrapper) {
+  return normalizeDebugMessage(wrapper.getWrappingComponent().debug());
+}
+
+function WrappingComponent({
+  children,
+  ...wrappingComponentProps
+}: {
+  children: preact.ComponentChildren;
+}) {
+  return <div {...wrappingComponentProps}>{children}</div>;
+}
+
 interface Wrapper extends CommonWrapper {
   find(query: any): CommonWrapper;
 }
@@ -421,6 +438,23 @@ describe('integration tests', () => {
       assert.equal(wrapper.text(), '1');
       assert.equal(effectCount, 1);
     });
+
+    it('renders wrapped component with wrapper and props', () => {
+      function Component() {
+        return <span>test</span>;
+      }
+
+      const wrapper = mount(<Component />, {
+        wrappingComponent: WrappingComponent,
+        wrappingComponentProps: { foo: 'bar' },
+      });
+
+      const output = normalizeDebugMessage(wrapper.debug());
+      assert.equal(
+        output,
+        '<WrappingComponent foo="bar"><div foo="bar"><Component><span>test</span></Component></div></WrappingComponent>'
+      );
+    });
   });
 
   describe('"shallow" rendering', () => {
@@ -469,8 +503,58 @@ describe('integration tests', () => {
           <Component />
         </div>
       );
-      const output = wrapper.debug().replace(/\s+/g, '');
-      assert.equal(output, '<div><Component/></div>');
+      const output = normalizeDebugMessage(wrapper.debug());
+      assert.equal(output, '<div><Component /></div>');
+    });
+
+    it('renders wrapped component with wrapper and props', () => {
+      function Component() {
+        return <span>test</span>;
+      }
+      const wrapper = shallow(<Component />, {
+        wrappingComponent: WrappingComponent,
+        wrappingComponentProps: { foo: 'bar' },
+      });
+
+      const output = debugWrappedComponent(wrapper);
+      assert.equal(
+        output,
+        '<div foo="bar"><RootFinder><Component /></RootFinder></div>'
+      );
+    });
+
+    it('passes context option to RootFinder', () => {
+      function Component() {
+        return <span>test</span>;
+      }
+      const wrapper = shallow(<Component />, {
+        wrappingComponent: WrappingComponent,
+        context: { test: 'abc' },
+      });
+
+      const output = debugWrappedComponent(wrapper);
+      assert.equal(
+        output,
+        '<div><RootFinder context={{...}}><Component /></RootFinder></div>'
+      );
+    });
+
+    it('passes wrappingComponentProps.context option to wrappingComponent and RootFinder', () => {
+      function Component() {
+        return <span>test</span>;
+      }
+      const wrapper = shallow(<Component />, {
+        wrappingComponent: WrappingComponent,
+        wrappingComponentProps: {
+          context: { test: 'abc' },
+        },
+      });
+
+      const output = debugWrappedComponent(wrapper);
+      assert.equal(
+        output,
+        '<div context={{...}}><RootFinder context={{...}}><Component /></RootFinder></div>'
+      );
     });
 
     describe('rendering children of non-rendered components', () => {
@@ -487,7 +571,7 @@ describe('integration tests', () => {
           </div>
         );
 
-        const output = wrapperWithHTMLElement.debug().replace(/\s+/g, '');
+        const output = normalizeDebugMessage(wrapperWithHTMLElement.debug());
         assert.equal(output, '<div><Component><p>foo</p></Component></div>');
       });
 
@@ -501,9 +585,9 @@ describe('integration tests', () => {
           </div>
         );
 
-        const output = wrapperWithMultipleHTMLElements
-          .debug()
-          .replace(/\s+/g, '');
+        const output = normalizeDebugMessage(
+          wrapperWithMultipleHTMLElements.debug()
+        );
         assert.equal(
           output,
           '<div><Component><p>foo</p><span>bar</span></Component></div>'
@@ -517,7 +601,7 @@ describe('integration tests', () => {
           </div>
         );
 
-        const output = wrapperWithString.debug().replace(/\s+/g, '');
+        const output = normalizeDebugMessage(wrapperWithString.debug());
         assert.equal(output, '<div><Component>Foobar</Component></div>');
       });
 
@@ -529,7 +613,7 @@ describe('integration tests', () => {
           </div>
         );
 
-        const output = wrapperWithNumber.debug().replace(/\s+/g, '');
+        const output = normalizeDebugMessage(wrapperWithNumber.debug());
         assert.equal(output, '<div><Component>1234</Component></div>');
       });
     });
@@ -549,7 +633,7 @@ describe('integration tests', () => {
           )}
         </div>
       );
-      const output = wrapper.debug().replace(/\s+/g, '');
+      const output = normalizeDebugMessage(wrapper.debug());
       assert.equal(
         output,
         '<div><Component><p>foo</p><p>bar</p></Component></div>'

From 7d7790d37e70226db59cae1c00c46d80307cf655 Mon Sep 17 00:00:00 2001
From: Kevin Weber <kevin.weber@airbnb.com>
Date: Fri, 18 Feb 2022 18:10:45 +0100
Subject: [PATCH 3/7] Remove context logic

---
 src/RootFinder.ts                |  7 +------
 src/wrapWithWrappingComponent.ts | 10 ++--------
 test/integration_test.tsx        | 21 +++------------------
 3 files changed, 6 insertions(+), 32 deletions(-)

diff --git a/src/RootFinder.ts b/src/RootFinder.ts
index da2dbae..aad6abc 100644
--- a/src/RootFinder.ts
+++ b/src/RootFinder.ts
@@ -1,11 +1,6 @@
 import { Component } from 'preact';
 
-export default class RootFinder extends Component<{ context: any }> {
-  // I'm not sure if this is needed… It might help with legacy context 🤷
-  getChildContext() {
-    return this.props.context;
-  }
-
+export default class RootFinder extends Component {
   render() {
     return this.props.children;
   }
diff --git a/src/wrapWithWrappingComponent.ts b/src/wrapWithWrappingComponent.ts
index e854250..837a0fa 100644
--- a/src/wrapWithWrappingComponent.ts
+++ b/src/wrapWithWrappingComponent.ts
@@ -9,7 +9,7 @@ export default function wrapWithWrappingComponent(
   node: ReactElement,
   options: ShallowRendererProps = {}
 ) {
-  const { wrappingComponent, wrappingComponentProps = {}, context } = options;
+  const { wrappingComponent, wrappingComponentProps = {} } = options;
 
   if (!wrappingComponent) {
     return node;
@@ -24,15 +24,9 @@ export default function wrapWithWrappingComponent(
     nodeWithValidChildren.props.children = childElements(nodeWithValidChildren);
   }
 
-  const rootFinderContext =
-    (wrappingComponentProps as { context: any })?.context || context;
-  const rootFinderProps = rootFinderContext
-    ? { context: rootFinderContext }
-    : null;
-
   return createElement(
     wrappingComponent,
     wrappingComponentProps,
-    createElement(RootFinder, rootFinderProps, nodeWithValidChildren)
+    createElement(RootFinder, null, nodeWithValidChildren)
   );
 }
diff --git a/test/integration_test.tsx b/test/integration_test.tsx
index 6301cb3..a31a076 100644
--- a/test/integration_test.tsx
+++ b/test/integration_test.tsx
@@ -523,29 +523,14 @@ describe('integration tests', () => {
       );
     });
 
-    it('passes context option to RootFinder', () => {
-      function Component() {
-        return <span>test</span>;
-      }
-      const wrapper = shallow(<Component />, {
-        wrappingComponent: WrappingComponent,
-        context: { test: 'abc' },
-      });
-
-      const output = debugWrappedComponent(wrapper);
-      assert.equal(
-        output,
-        '<div><RootFinder context={{...}}><Component /></RootFinder></div>'
-      );
-    });
-
-    it('passes wrappingComponentProps.context option to wrappingComponent and RootFinder', () => {
+    it('passes wrappingComponentProps to wrappingComponent', () => {
       function Component() {
         return <span>test</span>;
       }
       const wrapper = shallow(<Component />, {
         wrappingComponent: WrappingComponent,
         wrappingComponentProps: {
+          foo: 'bar',
           context: { test: 'abc' },
         },
       });
@@ -553,7 +538,7 @@ describe('integration tests', () => {
       const output = debugWrappedComponent(wrapper);
       assert.equal(
         output,
-        '<div context={{...}}><RootFinder context={{...}}><Component /></RootFinder></div>'
+        '<div foo="bar" context={{...}}><RootFinder><Component /></RootFinder></div>'
       );
     });
 

From 720c15cab296422f1e542afd5efecfc00d126881 Mon Sep 17 00:00:00 2001
From: Kevin Weber <kevin.weber@airbnb.com>
Date: Tue, 22 Feb 2022 13:55:41 +0100
Subject: [PATCH 4/7] PR feedback

---
 src/Adapter.ts                   |  4 ++--
 src/wrapWithWrappingComponent.ts | 13 ++++++++++---
 test/MountRenderer_test.tsx      |  9 +--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/Adapter.ts b/src/Adapter.ts
index 5f67582..320b579 100644
--- a/src/Adapter.ts
+++ b/src/Adapter.ts
@@ -114,11 +114,11 @@ export default class Adapter extends EnzymeAdapter {
     node: ReactElement,
     /**
      * Tip:
-     * The use of `wrappingComponent` and `wrappingComponentProps` is discouraged!
+     * The use of `wrappingComponent` and `wrappingComponentProps` is discouraged.
      * Using those props complicates a potential future migration to a different testing library.
      * Instead, wrap a component like this:
      * ```
-     * shallow(<Wrapper><Component/></Wrapper>)
+     * shallow(<Wrapper><Component/></Wrapper>).dive()
      * ```
      */
     options?: ShallowRendererProps
diff --git a/src/wrapWithWrappingComponent.ts b/src/wrapWithWrappingComponent.ts
index 837a0fa..80e522f 100644
--- a/src/wrapWithWrappingComponent.ts
+++ b/src/wrapWithWrappingComponent.ts
@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
 import type { EnzymeAdapter, ShallowRendererProps } from 'enzyme';
 import RootFinder from './RootFinder.js';
 import { childElements } from './compat.js';
+import { cloneElement } from 'preact';
 
 /** Based on the equivalent function in `enzyme-adapter-utils` */
 export default function wrapWithWrappingComponent(
@@ -19,9 +20,15 @@ export default function wrapWithWrappingComponent(
 
   if (typeof nodeWithValidChildren.props.children === 'string') {
     // This prevents an error when `.dive()` is used:
-    // `TypeError: ShallowWrapper::dive() can only be called on components`
-    nodeWithValidChildren = Object.assign({}, nodeWithValidChildren);
-    nodeWithValidChildren.props.children = childElements(nodeWithValidChildren);
+    // `TypeError: ShallowWrapper::dive() can only be called on components`.
+    // ---------------------------------------------------------------------
+    // VNode before: `{ type: Widget, props: { children: 'test' }, ... }`
+    // VNode after:  `{ type: Widget, props: { children: ['test'] }, ... }`
+    nodeWithValidChildren = cloneElement(
+      nodeWithValidChildren,
+      nodeWithValidChildren.props,
+      childElements(nodeWithValidChildren)
+    );
   }
 
   return createElement(
diff --git a/test/MountRenderer_test.tsx b/test/MountRenderer_test.tsx
index bce753a..9b25bc3 100644
--- a/test/MountRenderer_test.tsx
+++ b/test/MountRenderer_test.tsx
@@ -289,14 +289,7 @@ describe('MountRenderer', () => {
         .instance;
       const expectedInstance = renderedTree[0].instance;
 
-      assert.equal(resultInstance.toString(), expectedInstance.toString());
-      assert.equal(resultInstance.nodeType, expectedInstance.nodeType);
-      assert.equal(resultInstance.nodeName, expectedInstance.nodeName);
-      assert.equal(resultInstance.nodeValue, expectedInstance.nodeValue);
-      assert.equal(
-        resultInstance.childNodes.length,
-        expectedInstance.childNodes.length
-      );
+      assert.equal(resultInstance.outerHTML, expectedInstance.outerHTML);
     });
   });
 });

From f5ee93afb517ca5269b7aa0b05864534abd5f0e5 Mon Sep 17 00:00:00 2001
From: Kevin Weber <kevin.weber@airbnb.com>
Date: Tue, 22 Feb 2022 13:55:53 +0100
Subject: [PATCH 5/7] Add mount context test

---
 test/integration_test.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/test/integration_test.tsx b/test/integration_test.tsx
index a31a076..95f6798 100644
--- a/test/integration_test.tsx
+++ b/test/integration_test.tsx
@@ -2,7 +2,7 @@ import type { CommonWrapper } from 'enzyme';
 import enzyme from 'enzyme';
 import { Component, Fragment, options } from 'preact';
 import * as preact from 'preact';
-import { useEffect, useState } from 'preact/hooks';
+import { useContext, useEffect, useState } from 'preact/hooks';
 import type { ReactElement } from 'react';
 
 import { assert } from 'chai';
@@ -10,6 +10,10 @@ import sinon from 'sinon';
 
 import Adapter from '../src/Adapter.js';
 
+const TestContext = preact.createContext<{ myTestString: string }>({
+  myTestString: 'default',
+});
+
 const { configure, shallow, mount, render: renderToString } = enzyme;
 
 function normalizeDebugMessage(message: string) {
@@ -455,6 +459,24 @@ describe('integration tests', () => {
         '<WrappingComponent foo="bar"><div foo="bar"><Component><span>test</span></Component></div></WrappingComponent>'
       );
     });
+
+    it('passes context to mounted component wrapped with provider', () => {
+      function Component() {
+        const { myTestString } = useContext(TestContext);
+        return <span>{myTestString}</span>;
+      }
+
+      const wrapper = mount(<Component />, {
+        wrappingComponent: TestContext.Provider,
+        wrappingComponentProps: { value: { myTestString: 'override' } },
+      });
+
+      const output = normalizeDebugMessage(wrapper.debug());
+      assert.equal(
+        output,
+        '<Provider value={{...}}><Component><span>override</span></Component></Provider>'
+      );
+    });
   });
 
   describe('"shallow" rendering', () => {

From 2cdb301024bc08852a4a76bc22cc4186038c0c3d Mon Sep 17 00:00:00 2001
From: Kevin Weber <kevin.weber@airbnb.com>
Date: Tue, 22 Feb 2022 14:03:07 +0100
Subject: [PATCH 6/7] Update Enzyme dependency

---
 package.json | 4 ++--
 yarn.lock    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 7c0da13..102f111 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@types/mocha": "^9.0.0",
     "@types/sinon": "^10.0.6",
     "chai": "^4.3.4",
-    "enzyme": "^3.8.0",
+    "enzyme": "^3.11.0",
     "jsdom": "^16.0.1",
     "minimist": "^1.2.0",
     "mocha": "^9.1.3",
@@ -29,7 +29,7 @@
     "yalc": "^1.0.0-pre.34"
   },
   "peerDependencies": {
-    "enzyme": "^3.8.0",
+    "enzyme": "^3.11.0",
     "preact": "^10.0.0"
   },
   "scripts": {
diff --git a/yarn.lock b/yarn.lock
index 119ad4f..35fe84a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -970,7 +970,7 @@ enzyme-shallow-equal@^1.0.1:
     has "^1.0.3"
     object-is "^1.0.2"
 
-enzyme@^3.8.0:
+enzyme@^3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
   integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==

From 9fc65e21f0f4d044e7e48642e2ad35828dd9e262 Mon Sep 17 00:00:00 2001
From: Kevin Weber <kevin.weber@airbnb.com>
Date: Tue, 22 Feb 2022 16:17:53 +0100
Subject: [PATCH 7/7] Add shallow context tests

---
 test/integration_test.tsx | 65 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 61 insertions(+), 4 deletions(-)

diff --git a/test/integration_test.tsx b/test/integration_test.tsx
index 95f6798..d1ff583 100644
--- a/test/integration_test.tsx
+++ b/test/integration_test.tsx
@@ -10,7 +10,9 @@ import sinon from 'sinon';
 
 import Adapter from '../src/Adapter.js';
 
-const TestContext = preact.createContext<{ myTestString: string }>({
+type TestContextValue = { myTestString: string };
+
+const TestContext = preact.createContext<TestContextValue>({
   myTestString: 'default',
 });
 
@@ -20,7 +22,7 @@ function normalizeDebugMessage(message: string) {
   return message.replace(/\s{2,}/g, '').replace(/>\s/g, '>');
 }
 
-function debugWrappedComponent(wrapper: enzyme.ShallowWrapper) {
+function debugWrappedShallowComponent(wrapper: enzyme.ShallowWrapper) {
   return normalizeDebugMessage(wrapper.getWrappingComponent().debug());
 }
 
@@ -538,7 +540,7 @@ describe('integration tests', () => {
         wrappingComponentProps: { foo: 'bar' },
       });
 
-      const output = debugWrappedComponent(wrapper);
+      const output = debugWrappedShallowComponent(wrapper);
       assert.equal(
         output,
         '<div foo="bar"><RootFinder><Component /></RootFinder></div>'
@@ -557,13 +559,68 @@ describe('integration tests', () => {
         },
       });
 
-      const output = debugWrappedComponent(wrapper);
+      const output = debugWrappedShallowComponent(wrapper);
       assert.equal(
         output,
         '<div foo="bar" context={{...}}><RootFinder><Component /></RootFinder></div>'
       );
     });
 
+    it('passes context to shallow component with function returning TestContext.Provider', () => {
+      function WrappingComponentWithContextProvider({
+        children,
+        value,
+      }: {
+        children: preact.ComponentChildren;
+        value: TestContextValue;
+      }) {
+        return (
+          <TestContext.Provider value={value}>{children}</TestContext.Provider>
+        );
+      }
+
+      function Component() {
+        const { myTestString } = useContext(TestContext);
+        return <span>{myTestString}</span>;
+      }
+
+      const wrapper = shallow(<Component />, {
+        wrappingComponent: WrappingComponentWithContextProvider,
+        wrappingComponentProps: { value: { myTestString: 'override' } },
+      });
+
+      const output = debugWrappedShallowComponent(wrapper);
+      assert.equal(
+        output,
+        '<Provider value={{...}}><RootFinder><Component /></RootFinder></Provider>'
+      );
+
+      const outputHtml = wrapper.getWrappingComponent().html();
+      assert.equal(outputHtml, '<span>override</span>');
+    });
+
+    it('passes context to shallow component with TestContext.Provider as wrappingComponent', () => {
+      function Component() {
+        const { myTestString } = useContext(TestContext);
+        return <span>{myTestString}</span>;
+      }
+
+      const wrapper = shallow(<Component />, {
+        wrappingComponent: TestContext.Provider,
+        wrappingComponentProps: { value: { myTestString: 'override' } },
+      });
+
+      const output = debugWrappedShallowComponent(wrapper);
+      assert.equal(output, '<RootFinder><Component /></RootFinder>');
+
+      const outputHtml = wrapper.getWrappingComponent().html();
+      // NOTE:
+      // Ideally the value of `outputHtml` would be `<span>override</span>` but Enzyme and this library
+      // currently don't forwarding context values set via wrappingComponentProps, see also:
+      // https://github.com/enzymejs/enzyme/issues/2176
+      assert.equal(outputHtml, '<span>default</span>');
+    });
+
     describe('rendering children of non-rendered components', () => {
       const Component: any = () => {
         return null;