@fluentui-react-native/use-slots 0.10.1 → 0.10.2

package/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@fluentui-react-native/use-slots",
   "entries": [
+    {
+      "date": "Wed, 29 Jan 2025 23:39:17 GMT",
+      "version": "0.10.2",
+      "tag": "@fluentui-react-native/use-slots_v0.10.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "sanajmi@microsoft.com",
+            "package": "@fluentui-react-native/use-slots",
+            "commit": "5ca24ac45054439768404d117213a2ae4767235d",
+            "comment": "remove enzyme tests"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 11 Apr 2024 18:08:40 GMT",
       "version": "0.10.0",

package/CHANGELOG.md

@@ -1,9 +1,17 @@
 # Change Log - @fluentui-react-native/use-slots
 
-This log was last generated on Thu, 11 Apr 2024 18:08:40 GMT and should not be manually modified.
+<!-- This log was last generated on Wed, 29 Jan 2025 23:39:17 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 0.10.2
+
+Wed, 29 Jan 2025 23:39:17 GMT
+
+### Patches
+
+- remove enzyme tests (sanajmi@microsoft.com)
+
 ## 0.10.0
 
 Thu, 11 Apr 2024 18:08:40 GMT

package/lib/useSlots.samples.test.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { mergeProps } from '@fluentui-react-native/merge-props';
 import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot';
-import { mount } from 'enzyme';
-import toJson from 'enzyme-to-json';
+import * as renderer from 'react-test-renderer';
 import { buildUseSlots } from './buildUseSlots';
 /**
  * This file contains samples and description to help explain what the useSlots hook does and why it is useful
@@ -76,19 +75,17 @@ describe('useSlots sample code test suite', function () {
         };
     });
     BoldTextStaged.displayName = 'BoldTextStaged';
-    /**
-     * The demos of the code use enzyme with JSDom to show the full tree. This has the side effect of doubling up primitive elements in the output
-     * JSON. This is an issue with rendering react-native with enzyme but in real usage the nodes only render once.
-     */
     it('renders sample 1 - the two types of basic bold text components', function () {
         var styleToMerge = { color: 'black' };
         /**
          * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
          */
-        var wrapper = mount(withSlots("div", null,
+        var wrapper = renderer
+            .create(withSlots("div", null,
             withSlots(BoldTextStaged, { style: styleToMerge }, "Staged component at one level"),
-            withSlots(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")));
-        expect(toJson(wrapper)).toMatchSnapshot();
+            withSlots(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")))
+            .toJSON();
+        expect(wrapper).toMatchSnapshot();
     });
     /**
      * Example #2 - Simple component containing another simple component -------------------------------------
@@ -151,10 +148,12 @@ describe('useSlots sample code test suite', function () {
         /**
          * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
          */
-        var wrapper = mount(withSlots("div", null,
+        var wrapper = renderer
+            .create(withSlots("div", null,
             withSlots(HeaderStaged, { style: styleToMerge }, "Staged component with two levels"),
-            withSlots(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")));
-        expect(toJson(wrapper)).toMatchSnapshot();
+            withSlots(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")))
+            .toJSON();
+        expect(wrapper).toMatchSnapshot();
     });
     /** standard props for the container */
     var containerProps = { style: { display: 'flex', flexDirection: 'column' } };
@@ -217,16 +216,14 @@ describe('useSlots sample code test suite', function () {
         };
     });
     CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged';
-    /**
-     * Render to enzyme snapshots
-     */
     it('renders sample 3 - the two types of higher order header components', function () {
         var styleToMerge = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
         /**
          * Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting
          * to add up.
          */
-        var wrapper = mount(withSlots("div", null,
+        var wrapper = renderer
+            .create(withSlots("div", null,
             withSlots("span", null, "--- SIMPLE USAGE COMPARISON ---"),
             withSlots(CaptionedHeaderStandard, { style: styleToMerge }, "Standard HOC"),
             withSlots(CaptionedHeaderStaged, { style: styleToMerge }, "Staged HOC"),
@@ -235,8 +232,9 @@ describe('useSlots sample code test suite', function () {
             withSlots(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text" }, "Staged HOC with Caption"),
             withSlots("span", null, "--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---"),
             withSlots(CaptionedHeaderStandard, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Standard HOC with caption and customizations"),
-            withSlots(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Staged HOC with caption and customizations")));
-        expect(toJson(wrapper)).toMatchSnapshot();
+            withSlots(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Staged HOC with caption and customizations")))
+            .toJSON();
+        expect(wrapper).toMatchSnapshot();
     });
 });
 //# sourceMappingURL=useSlots.samples.test.js.map

package/lib/useSlots.samples.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/useSlots.samples.test.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,14 +44,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var merge_props_1 = require("@fluentui-react-native/merge-props");
 var use_slot_1 = require("@fluentui-react-native/use-slot");
-var enzyme_1 = require("enzyme");
-var enzyme_to_json_1 = __importDefault(require("enzyme-to-json"));
+var renderer = __importStar(require("react-test-renderer"));
 var buildUseSlots_1 = require("./buildUseSlots");
 /**
  * This file contains samples and description to help explain what the useSlots hook does and why it is useful
@@ -81,19 +100,17 @@ describe('useSlots sample code test suite', function () {
         };
     });
     BoldTextStaged.displayName = 'BoldTextStaged';
-    /**
-     * The demos of the code use enzyme with JSDom to show the full tree. This has the side effect of doubling up primitive elements in the output
-     * JSON. This is an issue with rendering react-native with enzyme but in real usage the nodes only render once.
-     */
     it('renders sample 1 - the two types of basic bold text components', function () {
         var styleToMerge = { color: 'black' };
         /**
          * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
          */
-        var wrapper = (0, enzyme_1.mount)((0, use_slot_1.withSlots)("div", null,
+        var wrapper = renderer
+            .create((0, use_slot_1.withSlots)("div", null,
             (0, use_slot_1.withSlots)(BoldTextStaged, { style: styleToMerge }, "Staged component at one level"),
-            (0, use_slot_1.withSlots)(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")));
-        expect((0, enzyme_to_json_1.default)(wrapper)).toMatchSnapshot();
+            (0, use_slot_1.withSlots)(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")))
+            .toJSON();
+        expect(wrapper).toMatchSnapshot();
     });
     /**
      * Example #2 - Simple component containing another simple component -------------------------------------
@@ -156,10 +173,12 @@ describe('useSlots sample code test suite', function () {
         /**
          * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
          */
-        var wrapper = (0, enzyme_1.mount)((0, use_slot_1.withSlots)("div", null,
+        var wrapper = renderer
+            .create((0, use_slot_1.withSlots)("div", null,
             (0, use_slot_1.withSlots)(HeaderStaged, { style: styleToMerge }, "Staged component with two levels"),
-            (0, use_slot_1.withSlots)(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")));
-        expect((0, enzyme_to_json_1.default)(wrapper)).toMatchSnapshot();
+            (0, use_slot_1.withSlots)(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")))
+            .toJSON();
+        expect(wrapper).toMatchSnapshot();
     });
     /** standard props for the container */
     var containerProps = { style: { display: 'flex', flexDirection: 'column' } };
@@ -222,16 +241,14 @@ describe('useSlots sample code test suite', function () {
         };
     });
     CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged';
-    /**
-     * Render to enzyme snapshots
-     */
     it('renders sample 3 - the two types of higher order header components', function () {
         var styleToMerge = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
         /**
          * Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting
          * to add up.
          */
-        var wrapper = (0, enzyme_1.mount)((0, use_slot_1.withSlots)("div", null,
+        var wrapper = renderer
+            .create((0, use_slot_1.withSlots)("div", null,
             (0, use_slot_1.withSlots)("span", null, "--- SIMPLE USAGE COMPARISON ---"),
             (0, use_slot_1.withSlots)(CaptionedHeaderStandard, { style: styleToMerge }, "Standard HOC"),
             (0, use_slot_1.withSlots)(CaptionedHeaderStaged, { style: styleToMerge }, "Staged HOC"),
@@ -240,8 +257,9 @@ describe('useSlots sample code test suite', function () {
             (0, use_slot_1.withSlots)(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text" }, "Staged HOC with Caption"),
             (0, use_slot_1.withSlots)("span", null, "--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---"),
             (0, use_slot_1.withSlots)(CaptionedHeaderStandard, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Standard HOC with caption and customizations"),
-            (0, use_slot_1.withSlots)(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Staged HOC with caption and customizations")));
-        expect((0, enzyme_to_json_1.default)(wrapper)).toMatchSnapshot();
+            (0, use_slot_1.withSlots)(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Staged HOC with caption and customizations")))
+            .toJSON();
+        expect(wrapper).toMatchSnapshot();
     });
 });
 //# sourceMappingURL=useSlots.samples.test.js.map

package/lib-commonjs/useSlots.samples.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/use-slots",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Hook function to return styled slots",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@fluentui-react-native/use-slot": "0.6.1"
+    "@fluentui-react-native/use-slot": "0.6.2"
   },
   "devDependencies": {
     "@fluentui-react-native/merge-props": "0.9.1",

package/src/__snapshots__/useSlots.samples.test.tsx.snap

@@ -2,94 +2,53 @@
 
 exports[`useSlots sample code test suite renders sample 1 - the two types of basic bold text components 1`] = `
 <div>
-  <BoldTextStaged
+  <span
     style={
       {
         "color": "black",
+        "fontWeight": 900,
       }
     }
   >
-    <span
-      style={
-        {
-          "color": "black",
-          "fontWeight": 900,
-        }
-      }
-    >
-      Staged component at one level
-    </span>
-  </BoldTextStaged>
-  <BoldTextStandard
+    Staged component at one level
+  </span>
+  <span
     style={
       {
         "color": "black",
+        "fontWeight": 900,
       }
     }
   >
-    <span
-      style={
-        {
-          "color": "black",
-          "fontWeight": 900,
-        }
-      }
-    >
-      Standard component of a single level
-    </span>
-  </BoldTextStandard>
+    Standard component of a single level
+  </span>
 </div>
 `;
 
 exports[`useSlots sample code test suite renders sample 2 = the two types of two level header components 1`] = `
 <div>
-  <HeaderStaged
+  <span
     style={
       {
         "color": "black",
+        "fontSize": 20,
+        "fontWeight": 900,
       }
     }
   >
-    <span
-      style={
-        {
-          "color": "black",
-          "fontSize": 20,
-          "fontWeight": 900,
-        }
-      }
-    >
-      Staged component with two levels
-    </span>
-  </HeaderStaged>
-  <HeaderStandard
+    Staged component with two levels
+  </span>
+  <span
     style={
       {
         "color": "black",
+        "fontSize": 20,
+        "fontWeight": 900,
       }
     }
   >
-    <BoldTextStandard
-      style={
-        {
-          "color": "black",
-          "fontSize": 20,
-        }
-      }
-    >
-      <span
-        style={
-          {
-            "color": "black",
-            "fontSize": 20,
-            "fontWeight": 900,
-          }
-        }
-      >
-        Standard component with two levels
-      </span>
-    </BoldTextStandard>
-  </HeaderStandard>
+    Standard component with two levels
+  </span>
 </div>
 `;
 
@@ -98,298 +57,183 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig
   <span>
     --- SIMPLE USAGE COMPARISON ---
   </span>
-  <CaptionedHeaderStandard';
+  <div
     style={
       {
         "backgroundColor": "gray",
         "borderColor": "purple",
         "borderWidth": 1,
+        "display": "flex",
+        "flexDirection": "column",
       }
     }
   >
-    <div
+    <span
       style={
         {
-          "backgroundColor": "gray",
-          "borderColor": "purple",
-          "borderWidth": 1,
-          "display": "flex",
-          "flexDirection": "column",
+          "fontSize": 20,
+          "fontWeight": 900,
         }
       }
     >
-      <HeaderStandard>
-        <BoldTextStandard
-          style={
-            {
-              "fontSize": 20,
-            }
-          }
-        >
-          <span
-            style={
-              {
-                "fontSize": 20,
-                "fontWeight": 900,
-              }
-            }
-          >
-            Standard HOC
-          </span>
-        </BoldTextStandard>
-      </HeaderStandard>
-    </div>
-  </CaptionedHeaderStandard';>
-  <CaptionedHeaderStaged
+      Standard HOC
+    </span>
+  </div>
+  <div
     style={
       {
         "backgroundColor": "gray",
         "borderColor": "purple",
         "borderWidth": 1,
+        "display": "flex",
+        "flexDirection": "column",
       }
     }
   >
-    <div
+    <span
       style={
         {
-          "backgroundColor": "gray",
-          "borderColor": "purple",
-          "borderWidth": 1,
-          "display": "flex",
-          "flexDirection": "column",
+          "fontSize": 20,
+          "fontWeight": 900,
         }
       }
     >
-      <span
-        style={
-          {
-            "fontSize": 20,
-            "fontWeight": 900,
-          }
-        }
-      >
-        Staged HOC
-      </span>
-    </div>
-  </CaptionedHeaderStaged>
+      Staged HOC
+    </span>
+  </div>
   <span>
     --- COMPARISON WITH CAPTIONS ---
   </span>
-  <CaptionedHeaderStandard';
-    captionText="Caption text"
+  <div
     style={
       {
         "backgroundColor": "gray",
         "borderColor": "purple",
         "borderWidth": 1,
+        "display": "flex",
+        "flexDirection": "column",
       }
     }
   >
-    <div
+    <span
       style={
         {
-          "backgroundColor": "gray",
-          "borderColor": "purple",
-          "borderWidth": 1,
-          "display": "flex",
-          "flexDirection": "column",
+          "fontSize": 20,
+          "fontWeight": 900,
+        }
+      }
+    >
+      Standard HOC with Caption
+    </span>
+    <span
+      style={
+        {
+          "fontWeight": 900,
         }
       }
     >
-      <HeaderStandard>
-        <BoldTextStandard
-          style={
-            {
-              "fontSize": 20,
-            }
-          }
-        >
-          <span
-            style={
-              {
-                "fontSize": 20,
-                "fontWeight": 900,
-              }
-            }
-          >
-            Standard HOC with Caption
-          </span>
-        </BoldTextStandard>
-      </HeaderStandard>
-      <BoldTextStandard>
-        <span
-          style={
-            {
-              "fontWeight": 900,
-            }
-          }
-        >
-          Caption text
-        </span>
-      </BoldTextStandard>
-    </div>
-  </CaptionedHeaderStandard';>
-  <CaptionedHeaderStaged
-    captionText="Caption text"
+      Caption text
+    </span>
+  </div>
+  <div
     style={
       {
         "backgroundColor": "gray",
         "borderColor": "purple",
         "borderWidth": 1,
+        "display": "flex",
+        "flexDirection": "column",
       }
     }
   >
-    <div
+    <span
       style={
         {
-          "backgroundColor": "gray",
-          "borderColor": "purple",
-          "borderWidth": 1,
-          "display": "flex",
-          "flexDirection": "column",
+          "fontSize": 20,
+          "fontWeight": 900,
         }
       }
     >
-      <span
-        style={
-          {
-            "fontSize": 20,
-            "fontWeight": 900,
-          }
-        }
-      >
-        Staged HOC with Caption
-      </span>
-      <span
-        style={
-          {
-            "fontWeight": 900,
-          }
+      Staged HOC with Caption
+    </span>
+    <span
+      style={
+        {
+          "fontWeight": 900,
         }
-      >
-        Caption text
-      </span>
-    </div>
-  </CaptionedHeaderStaged>
+      }
+    >
+      Caption text
+    </span>
+  </div>
   <span>
     --- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---
   </span>
-  <CaptionedHeaderStandard';
-    captionColor="yellow"
-    captionText="Caption text"
-    headerColor="red"
+  <div
     style={
       {
         "backgroundColor": "gray",
         "borderColor": "purple",
         "borderWidth": 1,
+        "display": "flex",
+        "flexDirection": "column",
       }
     }
   >
-    <div
+    <span
       style={
         {
-          "backgroundColor": "gray",
-          "borderColor": "purple",
-          "borderWidth": 1,
-          "display": "flex",
-          "flexDirection": "column",
+          "color": "red",
+          "fontSize": 20,
+          "fontWeight": 900,
         }
       }
     >
-      <HeaderStandard
-        style={
-          {
-            "color": "red",
-          }
-        }
-      >
-        <BoldTextStandard
-          style={
-            {
-              "color": "red",
-              "fontSize": 20,
-            }
-          }
-        >
-          <span
-            style={
-              {
-                "color": "red",
-                "fontSize": 20,
-                "fontWeight": 900,
-              }
-            }
-          >
-            Standard HOC with caption and customizations
-          </span>
-        </BoldTextStandard>
-      </HeaderStandard>
-      <BoldTextStandard
-        style={
-          {
-            "color": "yellow",
-          }
+      Standard HOC with caption and customizations
+    </span>
+    <span
+      style={
+        {
+          "color": "yellow",
+          "fontWeight": 900,
         }
-      >
-        <span
-          style={
-            {
-              "color": "yellow",
-              "fontWeight": 900,
-            }
-          }
-        >
-          Caption text
-        </span>
-      </BoldTextStandard>
-    </div>
-  </CaptionedHeaderStandard';>
-  <CaptionedHeaderStaged
-    captionColor="yellow"
-    captionText="Caption text"
-    headerColor="red"
+      }
+    >
+      Caption text
+    </span>
+  </div>
+  <div
     style={
       {
         "backgroundColor": "gray",
         "borderColor": "purple",
         "borderWidth": 1,
+        "display": "flex",
+        "flexDirection": "column",
       }
     }
   >
-    <div
+    <span
       style={
         {
-          "backgroundColor": "gray",
-          "borderColor": "purple",
-          "borderWidth": 1,
-          "display": "flex",
-          "flexDirection": "column",
+          "color": "red",
+          "fontSize": 20,
+          "fontWeight": 900,
         }
       }
     >
-      <span
-        style={
-          {
-            "color": "red",
-            "fontSize": 20,
-            "fontWeight": 900,
-          }
-        }
-      >
-        Staged HOC with caption and customizations
-      </span>
-      <span
-        style={
-          {
-            "color": "yellow",
-            "fontWeight": 900,
-          }
+      Staged HOC with caption and customizations
+    </span>
+    <span
+      style={
+        {
+          "color": "yellow",
+          "fontWeight": 900,
         }
-      >
-        Caption text
-      </span>
-    </div>
-  </CaptionedHeaderStaged>
+      }
+    >
+      Caption text
+    </span>
+  </div>
 </div>
 `;

package/src/useSlots.samples.test.tsx

@@ -4,8 +4,7 @@ import type { CSSProperties } from 'react';
 
 import { mergeProps } from '@fluentui-react-native/merge-props';
 import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot';
-import { mount } from 'enzyme';
-import toJson from 'enzyme-to-json';
+import * as renderer from 'react-test-renderer';
 
 import { buildUseSlots } from './buildUseSlots';
 
@@ -73,23 +72,21 @@ describe('useSlots sample code test suite', () => {
   });
   BoldTextStaged.displayName = 'BoldTextStaged';
 
-  /**
-   * The demos of the code use enzyme with JSDom to show the full tree. This has the side effect of doubling up primitive elements in the output
-   * JSON. This is an issue with rendering react-native with enzyme but in real usage the nodes only render once.
-   */
   it('renders sample 1 - the two types of basic bold text components', () => {
     const styleToMerge: TextStyle = { color: 'black' };
 
     /**
      * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
      */
-    const wrapper = mount(
-      <div>
-        <BoldTextStaged style={styleToMerge}>Staged component at one level</BoldTextStaged>
-        <BoldTextStandard style={styleToMerge}>Standard component of a single level</BoldTextStandard>
-      </div>,
-    );
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const wrapper = renderer
+      .create(
+        <div>
+          <BoldTextStaged style={styleToMerge}>Staged component at one level</BoldTextStaged>
+          <BoldTextStandard style={styleToMerge}>Standard component of a single level</BoldTextStandard>
+        </div>,
+      )
+      .toJSON();
+    expect(wrapper).toMatchSnapshot();
   });
 
   /**
@@ -159,13 +156,15 @@ describe('useSlots sample code test suite', () => {
     /**
      * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
      */
-    const wrapper = mount(
-      <div>
-        <HeaderStaged style={styleToMerge}>Staged component with two levels</HeaderStaged>
-        <HeaderStandard style={styleToMerge}>Standard component with two levels</HeaderStandard>
-      </div>,
-    );
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const wrapper = renderer
+      .create(
+        <div>
+          <HeaderStaged style={styleToMerge}>Staged component with two levels</HeaderStaged>
+          <HeaderStandard style={styleToMerge}>Standard component with two levels</HeaderStandard>
+        </div>,
+      )
+      .toJSON();
+    expect(wrapper).toMatchSnapshot();
   });
 
   /**
@@ -250,9 +249,6 @@ describe('useSlots sample code test suite', () => {
   });
   CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged';
 
-  /**
-   * Render to enzyme snapshots
-   */
   it('renders sample 3 - the two types of higher order header components', () => {
     const styleToMerge: ViewStyle = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
 
@@ -260,27 +256,29 @@ describe('useSlots sample code test suite', () => {
      * Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting
      * to add up.
      */
-    const wrapper = mount(
-      <div>
-        <span>--- SIMPLE USAGE COMPARISON ---</span>
-        <CaptionedHeaderStandard style={styleToMerge}>Standard HOC</CaptionedHeaderStandard>
-        <CaptionedHeaderStaged style={styleToMerge}>Staged HOC</CaptionedHeaderStaged>
-        <span>--- COMPARISON WITH CAPTIONS ---</span>
-        <CaptionedHeaderStandard style={styleToMerge} captionText="Caption text">
-          Standard HOC with Caption
-        </CaptionedHeaderStandard>
-        <CaptionedHeaderStaged style={styleToMerge} captionText="Caption text">
-          Staged HOC with Caption
-        </CaptionedHeaderStaged>
-        <span>--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---</span>
-        <CaptionedHeaderStandard style={styleToMerge} captionText="Caption text" captionColor="yellow" headerColor="red">
-          Standard HOC with caption and customizations
-        </CaptionedHeaderStandard>
-        <CaptionedHeaderStaged style={styleToMerge} captionText="Caption text" captionColor="yellow" headerColor="red">
-          Staged HOC with caption and customizations
-        </CaptionedHeaderStaged>
-      </div>,
-    );
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const wrapper = renderer
+      .create(
+        <div>
+          <span>--- SIMPLE USAGE COMPARISON ---</span>
+          <CaptionedHeaderStandard style={styleToMerge}>Standard HOC</CaptionedHeaderStandard>
+          <CaptionedHeaderStaged style={styleToMerge}>Staged HOC</CaptionedHeaderStaged>
+          <span>--- COMPARISON WITH CAPTIONS ---</span>
+          <CaptionedHeaderStandard style={styleToMerge} captionText="Caption text">
+            Standard HOC with Caption
+          </CaptionedHeaderStandard>
+          <CaptionedHeaderStaged style={styleToMerge} captionText="Caption text">
+            Staged HOC with Caption
+          </CaptionedHeaderStaged>
+          <span>--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---</span>
+          <CaptionedHeaderStandard style={styleToMerge} captionText="Caption text" captionColor="yellow" headerColor="red">
+            Standard HOC with caption and customizations
+          </CaptionedHeaderStandard>
+          <CaptionedHeaderStaged style={styleToMerge} captionText="Caption text" captionColor="yellow" headerColor="red">
+            Staged HOC with caption and customizations
+          </CaptionedHeaderStaged>
+        </div>,
+      )
+      .toJSON();
+    expect(wrapper).toMatchSnapshot();
   });
 });