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/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
         >
           <img
             alt="in progress items"
-            src={Object {}}
+            src={{}}
           />
           <span
             className="numInProgress"
@@ -35,7 +35,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
         >
           <img
             alt="error items"
-            src={Object {}}
+            src={{}}
           />
           <span
             className="numErroredItems"
@@ -48,7 +48,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
         >
           <img
             alt="info items"
-            src={Object {}}
+            src={{}}
           />
           <span
             className="numInfoItems"
@@ -86,7 +86,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      Object {
+      {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -105,7 +105,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
     easing="ease"
     height={0}
     onAnimationEnd={[Function]}
-    style={Object {}}
+    style={{}}
   >
     <div
       className="notificationConsoleContents"
@@ -117,20 +117,20 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           label="Filter:"
           onChange={[Function]}
           options={
-            Array [
-              Object {
+            [
+              {
                 "key": "All",
                 "text": "All",
               },
-              Object {
+              {
                 "key": "In Progress",
                 "text": "In progress",
               },
-              Object {
+              {
                 "key": "Info",
                 "text": "Info",
               },
-              Object {
+              {
                 "key": "Error",
                 "text": "Error",
               },
@@ -147,7 +147,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           onKeyDown={[Function]}
           role="button"
           style={
-            Object {
+            {
               "border": "1px solid black",
               "borderRadius": "2px",
             }
@@ -156,7 +156,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
         >
           <img
             alt="clear notifications image"
-            src={Object {}}
+            src={{}}
           />
           Clear Notifications
         </span>
@@ -191,7 +191,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
         >
           <img
             alt="in progress items"
-            src={Object {}}
+            src={{}}
           />
           <span
             className="numInProgress"
@@ -204,7 +204,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
         >
           <img
             alt="error items"
-            src={Object {}}
+            src={{}}
           />
           <span
             className="numErroredItems"
@@ -217,7 +217,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
         >
           <img
             alt="info items"
-            src={Object {}}
+            src={{}}
           />
           <span
             className="numInfoItems"
@@ -257,7 +257,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
   <AnimateHeight
     animateOpacity={false}
     animationStateClasses={
-      Object {
+      {
         "animating": "rah-animating",
         "animatingDown": "rah-animating--down",
         "animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -276,7 +276,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
     easing="ease"
     height={0}
     onAnimationEnd={[Function]}
-    style={Object {}}
+    style={{}}
   >
     <div
       className="notificationConsoleContents"
@@ -288,20 +288,20 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           label="Filter:"
           onChange={[Function]}
           options={
-            Array [
-              Object {
+            [
+              {
                 "key": "All",
                 "text": "All",
               },
-              Object {
+              {
                 "key": "In Progress",
                 "text": "In progress",
               },
-              Object {
+              {
                 "key": "Info",
                 "text": "Info",
               },
-              Object {
+              {
                 "key": "Error",
                 "text": "Error",
               },
@@ -318,7 +318,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           onKeyDown={[Function]}
           role="button"
           style={
-            Object {
+            {
               "border": "1px solid black",
               "borderRadius": "2px",
             }
@@ -327,7 +327,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
         >
           <img
             alt="clear notifications image"
-            src={Object {}}
+            src={{}}
           />
           Clear Notifications
         </span>
@@ -342,7 +342,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           <img
             alt="info"
             className="infoIcon"
-            src={Object {}}
+            src={{}}
           />
           <span
             className="date"