tests: nested markup containers

Author: willtonkin

packages/react-from-markup/src/__tests__/__snapshots__/tests.ts.snap

@@ -13,3 +13,14 @@ exports[`reactFromMarkupContainer E2E tests Should rehydrate valid HTML markup 1
       <p>paragraph</p>
     </div>"
 `;
+
+exports[`reactFromMarkupContainer E2E tests Should work for nested markup containers 1`] = `
+"
+      <div data-react-from-markup-container=\\"\\">
+        <span>rehydrated component</span>
+          <div data-react-from-markup-container=\\"\\">
+            <span>rehydrated component</span>
+            <span>rehydrated component</span>
+          </div>
+      </div>"
+`;

packages/react-from-markup/src/__tests__/tests.ts

@@ -37,4 +37,39 @@ describe("reactFromMarkupContainer E2E tests", async () => {
 
     expect(documentElement.innerHTML).toMatchSnapshot();
   });
+
+  it("Should work for nested markup containers", async () => {
+    const componentName: string = "mycomponentName";
+
+    const mockCall = jest.fn();
+    const rehydrators = {
+      [componentName]: async () => {
+        mockCall();
+
+        return React.createElement("span", {}, "rehydrated component");
+      }
+    };
+
+    const documentElement = document.createElement("div");
+
+    documentElement.innerHTML = `
+      <div data-react-from-markup-container>
+        <div data-rehydratable="${componentName}"></div>
+          <div data-react-from-markup-container>
+            <div data-rehydratable="${componentName}">
+              <div data-react-from-markup-container>
+                <div data-rehydratable="${componentName}"></div>
+              </div>
+            </div>
+            <div data-rehydratable="${componentName}"></div>
+          </div>
+      </div>`;
+
+    await reactFromMarkupContainer(documentElement, rehydrators, {
+      extra: {}
+    });
+
+    expect(documentElement.innerHTML).toMatchSnapshot();
+    expect(mockCall).toBeCalledTimes(3);
+  });
 });