chore: Enzyme replacement in test files- PR 1 of 6 for part 3 of 3 (#…

…7232)

#### Details
Enzyme replacement in files under src/tests/unit/tests/DetailsView/
 
<!-- Usually a sentence or two describing what the PR changes -->

##### Motivation
Existing story: [User Story
2142857](https://dev.azure.com/mseng/1ES/_workitems/edit/2142857)
Replaced the use of Enzyme in the below files:


1. src/tests/unit/tests/DetailsView/components/status-icon.test.tsx
2. src/tests/unit/tests/DetailsView/components/switcher.test.tsx
3.
src/tests/unit/tests/DetailsView/components/tab-stops-failed-instance-section.test.tsx
4.
src/tests/unit/tests/DetailsView/components/tab-stops-minimal-requirement-header.test.tsx
5.
src/tests/unit/tests/DetailsView/components/tab-stops-requirement-instances-collapsible-content.test.tsx
6.
src/tests/unit/tests/DetailsView/components/tab-stops-requirements-with-instances.test.tsx
7.
src/tests/unit/tests/DetailsView/components/target-change-dialog.test.tsx
8.
src/tests/unit/tests/DetailsView/components/target-page-changed-view.test.tsx
9.
src/tests/unit/tests/DetailsView/components/target-page-hidden-bar.test.tsx
10.
src/tests/unit/tests/DetailsView/components/test-status-choice-group.test.tsx
11.
src/tests/unit/tests/DetailsView/components/test-view-container.test.tsx
12.
src/tests/unit/tests/DetailsView/components/transfer-to-assessment-button.test.tsx
13. src/tests/unit/tests/DetailsView/details-view-body.test.tsx
14. src/tests/unit/tests/DetailsView/details-view-container.test.tsx
15. src/tests/unit/tests/DetailsView/details-view-content.test.tsx
 <!-- This can be as simple as "addresses issue #123" -->

##### Context

<!-- Are there any parts that you've intentionally left out-of-scope for
a later PR to handle? -->

<!-- Were there any alternative approaches you considered? What
tradeoffs did you consider? -->

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [x] Addresses an existing issue: [User Story
2142857](https://dev.azure.com/mseng/1ES/_workitems/edit/2142857)
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [n/a] (UI changes only) Added screenshots/GIFs to description above
- [n/a] (UI changes only) Verified usability with NVDA/JAWS

---------

Co-authored-by: Prachi Naigaonkar <[email protected]>

src/tests/unit/tests/DetailsView/__snapshots__/details-view-container.test.tsx.snap

@@ -1,97 +1,129 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DetailsViewContainer render content render once; should call details view opened 1`] = `
-<DetailsViewContentWithLocalState
-  deps={
-    {
+<DocumentFragment>
+  <mock-narrowmodedetector
+    childrenprops="[object Object]"
+    deps="[object Object]"
+    isnarrowmodeenabled="true"
+  />
+</DocumentFragment>
+`;
+
+exports[`DetailsViewContainer render content render once; should call details view opened: NarrowModeDetector props 1`] = `
+{
+  "Component": [Function],
+  "childrenProps": {
+    "deps": {
       "detailsViewActionMessageCreator": [typemoq mock object],
       "storesHub": [typemoq mock object],
-    }
-  }
-  storeState={
-    {
+    },
+    "isSideNavOpen": false,
+    "setSideNavOpen": [Function],
+    "storeState": {
       "tabStoreData": {
         "isClosed": false,
         "isOriginChanged": false,
       },
       "visualizationStoreData": {
         "selectedDetailsViewPivot": -1,
       },
-    }
-  }
-/>
+    },
+  },
+  "deps": {
+    "detailsViewActionMessageCreator": [typemoq mock object],
+    "storesHub": [typemoq mock object],
+  },
+  "isNarrowModeEnabled": true,
+}
 `;
 
 exports[`DetailsViewContainer render content show NoContentAvailable when stores are not loaded 1`] = `
-<React.Fragment>
-  <NarrowModeDetector
-    Component={[Function]}
-    childrenProps={
-      {
-        "deps": {
-          "storesHub": [typemoq mock object],
-        },
-      }
-    }
-    deps={
-      {
-        "storesHub": [typemoq mock object],
-      }
-    }
-    isNarrowModeEnabled={false}
+<DocumentFragment>
+  <mock-narrowmodedetector
+    childrenprops="[object Object]"
+    deps="[object Object]"
+    isnarrowmodeenabled="false"
   />
-  <NoContentAvailable />
-</React.Fragment>
+  <mock-nocontentavailable />
+</DocumentFragment>
+`;
+
+exports[`DetailsViewContainer render content show NoContentAvailable when stores are not loaded: NarrowModeDetector props 1`] = `
+{
+  "Component": [Function],
+  "childrenProps": {
+    "deps": {
+      "storesHub": [typemoq mock object],
+    },
+  },
+  "deps": {
+    "storesHub": [typemoq mock object],
+  },
+  "isNarrowModeEnabled": false,
+}
 `;
 
 exports[`DetailsViewContainer render content show NoContentAvailable when target tab is closed 1`] = `
-<React.Fragment>
-  <NarrowModeDetector
-    Component={[Function]}
-    childrenProps={
-      {
-        "deps": {
-          "storesHub": [typemoq mock object],
-        },
-      }
-    }
-    deps={
-      {
-        "storesHub": [typemoq mock object],
-      }
-    }
-    isNarrowModeEnabled={true}
+<DocumentFragment>
+  <mock-narrowmodedetector
+    childrenprops="[object Object]"
+    deps="[object Object]"
+    isnarrowmodeenabled="true"
   />
-  <NoContentAvailable />
-</React.Fragment>
+  <mock-nocontentavailable />
+</DocumentFragment>
+`;
+
+exports[`DetailsViewContainer render content show NoContentAvailable when target tab is closed: NarrowModeDetector props 1`] = `
+{
+  "Component": [Function],
+  "childrenProps": {
+    "deps": {
+      "storesHub": [typemoq mock object],
+    },
+  },
+  "deps": {
+    "storesHub": [typemoq mock object],
+  },
+  "isNarrowModeEnabled": true,
+}
 `;
 
 exports[`DetailsViewContainer render content shows NoContentAvailable when target page is changed and no permissions granted 1`] = `
-<React.Fragment>
-  <NarrowModeDetector
-    Component={[Function]}
-    childrenProps={
-      {
-        "deps": {
-          "storesHub": [typemoq mock object],
-        },
-      }
-    }
-    deps={
-      {
-        "storesHub": [typemoq mock object],
-      }
-    }
-    isNarrowModeEnabled={true}
+<DocumentFragment>
+  <mock-narrowmodedetector
+    childrenprops="[object Object]"
+    deps="[object Object]"
+    isnarrowmodeenabled="true"
   />
-  <NoContentAvailable />
-</React.Fragment>
+  <mock-nocontentavailable />
+</DocumentFragment>
+`;
+
+exports[`DetailsViewContainer render content shows NoContentAvailable when target page is changed and no permissions granted: NarrowModeDetector props 1`] = `
+{
+  "Component": [Function],
+  "childrenProps": {
+    "deps": {
+      "storesHub": [typemoq mock object],
+    },
+  },
+  "deps": {
+    "storesHub": [typemoq mock object],
+  },
+  "isNarrowModeEnabled": true,
+}
 `;
 
 exports[`DetailsViewContainer render renders spinner when stores not ready 1`] = `
-<StyledSpinnerBase
-  className="details-view-spinner"
-  label="Loading..."
-  size={3}
-/>
+<DocumentFragment>
+  <mock-styledspinnerbase
+    classname="details-view-spinner"
+    label="Loading..."
+    size="3"
+  />
+</DocumentFragment>
 `;
+
+exports[`DetailsViewContainer render renders spinner when stores not ready: NarrowModeDetector props 1`] = `undefined`;