Upgrade typescript to 4.9.5 and jest to 29.7.0 (and related packages) (#1884)

* Upgrade typescript to 4.9.5

* Fix compile issue and put back files in tsconfig.strict.json

* Update test snapshots

* Fix jest tests by upgrading jest and other related packages.

* Attempt to fix playwright test

* Revert "Attempt to fix playwright test"

This reverts commit 8293f34c9c.

* 2nd attempt to fix example test

* fix waitFor in playwright

* Remove unused describe section

* Attempt to fix e2e test

* Revert "Attempt to fix e2e test"

This reverts commit 9745bcd2ef.

* Upgrade playwright to latest

* Revert "Upgrade playwright to latest"

This reverts commit e2ea1d0189.

* Error test on e2e

* Revert "Error test on e2e"

This reverts commit 124e3764f7.

* Try to select dropdown item by xpath selector

* Revert "Try to select dropdown item by xpath selector"

This reverts commit 8eb42a64e2.

* Attempt to wait until page is fully loaded

* Revert "Attempt to wait until page is fully loaded"

This reverts commit bb43fcea6e.

* Use playwright selectOption to select dropdown option

* Revert "Use playwright selectOption to select dropdown option"

This reverts commit daa8cd0930.

* Select dropdown option with playwright api instead of manual click

* c7ab4c7ecf7b05f32a85568bce1a667ad8c62703Revert "Select dropdown option with playwright api instead of manual click"

This reverts commit c7ab4c7ecf.

* Wait for 5s after dropdown click

* Revert "Wait for 5s after dropdown click"

This reverts commit 847e9ad33f.

* Try forcing click

* Revert "Try forcing click"

This reverts commit 29b9fa1bda.

* Force click on the dropdown and set viewport size bigger.

* Force click on the dropdown and set viewport size bigger.

* try force clicking option

* Skip container test on webkit

* Add branded browsers to e2e tests

---------

Co-authored-by: Ashley Stanton-Nurse <ashleyst@microsoft.com>

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`AddMongoIndexComponent renders 1`] = `
 <Stack
   tokens={
-    Object {
+    {
       "childrenGap": 5,
     }
   }
@@ -11,7 +11,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
   <Stack
     horizontal={true}
     tokens={
-      Object {
+      {
         "childrenGap": 20,
       }
     }
@@ -21,8 +21,8 @@ exports[`AddMongoIndexComponent renders 1`] = `
       componentRef={[Function]}
       onChange={[Function]}
       styles={
-        Object {
-          "root": Object {
+        {
+          "root": {
             "paddingLeft": 10,
             "width": 210,
           },
@@ -34,12 +34,12 @@ exports[`AddMongoIndexComponent renders 1`] = `
       ariaLabel="Index Type 1"
       onChange={[Function]}
       options={
-        Array [
-          Object {
+        [
+          {
             "key": "Single",
             "text": "Single Field",
           },
-          Object {
+          {
             "key": "Wildcard",
             "text": "Wildcard",
           },
@@ -48,8 +48,8 @@ exports[`AddMongoIndexComponent renders 1`] = `
       placeholder="Select an index type"
       selectedKey="Single"
       styles={
-        Object {
-          "dropdown": Object {
+        {
+          "dropdown": {
             "paddingleft": 10,
             "width": 202,
           },
@@ -60,7 +60,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
       ariaLabel="Undo Button 1"
       disabled={false}
       iconProps={
-        Object {
+        {
           "iconName": "Undo",
         }
       }
@@ -70,8 +70,8 @@ exports[`AddMongoIndexComponent renders 1`] = `
   <StyledMessageBar
     messageBarType={1}
     styles={
-      Object {
-        "root": Object {
+      {
+        "root": {
           "marginLeft": 10,
         },
       }

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`MongoIndexingPolicyComponent error shown for collection with compound i
 exports[`MongoIndexingPolicyComponent renders 1`] = `
 <Stack
   tokens={
-    Object {
+    {
       "childrenGap": 20,
     }
   }
@@ -29,14 +29,14 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   </Text>
   <Stack
     styles={
-      Object {
-        "root": Object {
+      {
+        "root": {
           "width": 600,
         },
       }
     }
     tokens={
-      Object {
+      {
         "childrenGap": 5,
       }
     }
@@ -47,8 +47,8 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
     >
       <StyledWithViewportComponent
         columns={
-          Array [
-            Object {
+          [
+            {
               "fieldName": "definition",
               "isResizable": true,
               "key": "definition",
@@ -56,7 +56,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
               "minWidth": 100,
               "name": "Definition",
             },
-            Object {
+            {
               "fieldName": "type",
               "isResizable": true,
               "key": "type",
@@ -64,7 +64,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
               "minWidth": 100,
               "name": "Type",
             },
-            Object {
+            {
               "fieldName": "actionButton",
               "isResizable": true,
               "key": "actionButton",
@@ -75,15 +75,15 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
           ]
         }
         disableSelectionZone={true}
-        items={Array []}
+        items={[]}
         layoutMode={1}
         onRenderRow={[Function]}
         selectionMode={0}
         styles={
-          Object {
-            "root": Object {
-              "selectors": Object {
-                ".ms-FocusZone": Object {
+          {
+            "root": {
+              "selectors": {
+                ".ms-FocusZone": {
                   "paddingTop": 0,
                 },
               },
@@ -93,14 +93,14 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
       />
       <Stack
         styles={
-          Object {
-            "root": Object {
+          {
+            "root": {
               "width": 600,
             },
           }
         }
         tokens={
-          Object {
+          {
             "childrenGap": 10,
           }
         }
@@ -117,11 +117,11 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   </Stack>
   <Separator
     styles={
-      Object {
-        "root": Array [
-          Object {
-            "selectors": Object {
-              "::before": Object {
+      {
+        "root": [
+          {
+            "selectors": {
+              "::before": {
                 "background": undefined,
               },
             },
@@ -132,8 +132,8 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   />
   <Stack
     styles={
-      Object {
-        "root": Object {
+      {
+        "root": {
           "width": 600,
         },
       }