Merge Jest configuration from Next version

7 files changed, 360 insertions, 129 deletions

diff --git a/vnext/jest.config.js b/vnext/jest.config.js
new file mode 100644
index 00000000..8f098bcb
--- /dev/null
+++ b/vnext/jest.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+    'moduleNameMapper': {
+        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+        '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.js'
+    },
+    'transform': {
+        '^.+\\.js$': 'babel-jest'
+    },
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/setupTests.js']
+};
diff --git a/vnext/package-lock.json b/vnext/package-lock.json
index a8dfa7e0..31c8082b 100644
--- a/vnext/package-lock.json
+++ b/vnext/package-lock.json
@@ -39,6 +39,8 @@
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/preset-env": "7.19.4",
         "@babel/preset-react": "7.18.6",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
         "babel-jest": "^29.2.2",
         "babel-loader": "^9.0.0",
         "css-loader": "^6.7.1",
@@ -73,6 +75,12 @@
         "webpack-dev-server": "^4.11.1"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
+      "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==",
+      "dev": true
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -3240,15 +3248,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.2.tgz",
-      "integrity": "sha512-JWydkr9MirMg2jGJstDqDgzoHqaFbv7n1ghfXYdtEgXWgdq3jz7IU3SQvtj9k3mAszQBiTpQhFdlH+JIRuGTzg==",
-      "dev": true,
-      "dependencies": {
-        "deep-equal": "^2.0.5"
-      }
-    },
     "node_modules/@testing-library/dom/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3336,6 +3335,113 @@
         "node": ">=8"
       }
     },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "5.16.5",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
+      "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
+      "dev": true,
+      "dependencies": {
+        "@adobe/css-tools": "^4.0.1",
+        "@babel/runtime": "^7.9.2",
+        "@types/testing-library__jest-dom": "^5.9.1",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.5.6",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/react": {
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
+      "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3547,6 +3653,16 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "node_modules/@types/jest": {
+      "version": "29.2.0",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.2.0.tgz",
+      "integrity": "sha512-KO7bPV21d65PKwv3LLsD8Jn3E05pjNjRZvkm+YTacWhVmykAb07wW6IkZUmQAltwQafNcDUEUrMO2h3jeBSisg==",
+      "dev": true,
+      "dependencies": {
+        "expect": "^29.0.0",
+        "pretty-format": "^29.0.0"
+      }
+    },
     "node_modules/@types/js-cookie": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
@@ -3630,6 +3746,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "18.0.8",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.8.tgz",
+      "integrity": "sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
@@ -3681,6 +3806,15 @@
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "node_modules/@types/testing-library__jest-dom": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
+      "integrity": "sha512-SBwbxYoyPIvxHbeHxTZX2Pe/74F/tX2/D3mMvzabdeJ25bBojfW0TyB8BHrbq/9zaaKICJZjLP+8r6AeZMFCuQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/jest": "*"
+      }
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
@@ -4370,6 +4504,15 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-query": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.2.tgz",
+      "integrity": "sha512-JWydkr9MirMg2jGJstDqDgzoHqaFbv7n1ghfXYdtEgXWgdq3jz7IU3SQvtj9k3mAszQBiTpQhFdlH+JIRuGTzg==",
+      "dev": true,
+      "dependencies": {
+        "deep-equal": "^2.0.5"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -5649,6 +5792,12 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
     "node_modules/cssdb": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.0.2.tgz",
@@ -16606,6 +16755,12 @@
     }
   },
   "dependencies": {
+    "@adobe/css-tools": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
+      "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==",
+      "dev": true
+    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -18816,15 +18971,6 @@
             "color-convert": "^2.0.1"
           }
         },
-        "aria-query": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.2.tgz",
-          "integrity": "sha512-JWydkr9MirMg2jGJstDqDgzoHqaFbv7n1ghfXYdtEgXWgdq3jz7IU3SQvtj9k3mAszQBiTpQhFdlH+JIRuGTzg==",
-          "dev": true,
-          "requires": {
-            "deep-equal": "^2.0.5"
-          }
-        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -18892,6 +19038,85 @@
         }
       }
     },
+    "@testing-library/jest-dom": {
+      "version": "5.16.5",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
+      "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
+      "dev": true,
+      "requires": {
+        "@adobe/css-tools": "^4.0.1",
+        "@babel/runtime": "^7.9.2",
+        "@types/testing-library__jest-dom": "^5.9.1",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.5.6",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@testing-library/react": {
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
+      "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
+      }
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -19097,6 +19322,16 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "@types/jest": {
+      "version": "29.2.0",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.2.0.tgz",
+      "integrity": "sha512-KO7bPV21d65PKwv3LLsD8Jn3E05pjNjRZvkm+YTacWhVmykAb07wW6IkZUmQAltwQafNcDUEUrMO2h3jeBSisg==",
+      "dev": true,
+      "requires": {
+        "expect": "^29.0.0",
+        "pretty-format": "^29.0.0"
+      }
+    },
     "@types/js-cookie": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
@@ -19180,6 +19415,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-dom": {
+      "version": "18.0.8",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.8.tgz",
+      "integrity": "sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/retry": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
@@ -19231,6 +19475,15 @@
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "@types/testing-library__jest-dom": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
+      "integrity": "sha512-SBwbxYoyPIvxHbeHxTZX2Pe/74F/tX2/D3mMvzabdeJ25bBojfW0TyB8BHrbq/9zaaKICJZjLP+8r6AeZMFCuQ==",
+      "dev": true,
+      "requires": {
+        "@types/jest": "*"
+      }
+    },
     "@types/tough-cookie": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
@@ -19742,6 +19995,15 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "aria-query": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.2.tgz",
+      "integrity": "sha512-JWydkr9MirMg2jGJstDqDgzoHqaFbv7n1ghfXYdtEgXWgdq3jz7IU3SQvtj9k3mAszQBiTpQhFdlH+JIRuGTzg==",
+      "dev": true,
+      "requires": {
+        "deep-equal": "^2.0.5"
+      }
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -20661,6 +20923,12 @@
       "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
       "dev": true
     },
+    "css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
     "cssdb": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.0.2.tgz",
diff --git a/vnext/package.json b/vnext/package.json
index 77585490..bcc2461a 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -18,6 +18,8 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "7.19.4",
     "@babel/preset-react": "7.18.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "babel-jest": "^29.2.2",
     "babel-loader": "^9.0.0",
     "css-loader": "^6.7.1",
@@ -72,15 +74,6 @@
       ]
     ]
   },
-  "jest": {
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js"
-    },
-    "transform": {
-      "^.+\\.js$": "babel-jest"
-    }
-  },
   "dependencies": {
     "@babel/register": "^7.18.9",
     "axios": "^1.1.3",
diff --git a/vnext/setupTests.js b/vnext/setupTests.js
new file mode 100644
index 00000000..b6aaf949
--- /dev/null
+++ b/vnext/setupTests.js
@@ -0,0 +1,14 @@
+import '@testing-library/jest-dom';
+
+window.matchMedia = window.matchMedia || function() {
+    return {
+        matches: true,
+        media: '',
+        addListener: function() { },
+        removeListener: function() { },
+        addEventListener: function() { },
+        removeEventListener: function() { },
+        dispatchEvent: function() { return true; },
+        onchange: function() { }
+    };
+};
diff --git a/vnext/src/ui/__tests__/MessageInput-test.js b/vnext/src/ui/__tests__/MessageInput-test.js
deleted file mode 100644
index 12b85bca..00000000
--- a/vnext/src/ui/__tests__/MessageInput-test.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { create, act } from 'react-test-renderer';
-
-import MessageInput from '../MessageInput';
-
-const testMessage = {
-    mid: 1,
-    rid: 0,
-    body: 'test message',
-    timestamp: new Date().toISOString(),
-    attach: '',
-    to: {}
-};
-
-window.matchMedia = window.matchMedia || function() {
-    return {
-        matches: true,
-        addListener: function() { },
-        removeListener: function() { }
-    };
-};
-
-function createMessageInput(data, onFocus, onSend, draft) {
-    return create(<MessageInput data={data} onSend={onSend} text={draft} />, {
-        createNodeMock: (element) => {
-            if (element.type === 'textarea') {
-                // mock a focus function
-                return {
-                    focus: onFocus,
-                    style: {}
-                };
-            }
-            return null;
-        }
-    });
-}
-
-it('Gives immediate focus on to textarea on load', () => {
-    let focused = false;
-    act(() => {
-        createMessageInput(testMessage, () => {
-            focused = true;
-        }, () => { });
-    });
-    expect(focused).toEqual(true, 'textarea was not focused');
-});
-
-
-it('Submits on ctrl-enter', () => {
-    const onSend = jest.fn();
-    var messageInput = null;
-    act(() => {
-        messageInput = createMessageInput(testMessage, () => {}, onSend);
-    });
-    let textarea = messageInput.root.findByType('textarea');
-    act(() => {
-
-        textarea.props.onKeyPress({
-            charCode: 13,
-            which: 13,
-            keyCode: 13,
-            ctrlKey: false
-        });
-    });
-    expect(onSend).toHaveBeenCalledTimes(0);
-    act(() => {
-        textarea.props.onKeyPress({
-            charCode: 13,
-            which: 13,
-            keyCode: 13,
-            ctrlKey: true
-        });
-    });
-    expect(onSend).toHaveBeenCalledTimes(1);
-    expect(textarea.props.value).toEqual('');
-    act(() => {
-        textarea.props.onChange({
-            target: {
-                value: ' ',
-                validity: {}
-            }
-        });
-    });
-    expect(textarea.props.value).toEqual(' ');
-    act(() => {
-        messageInput.root.findByType('form').props.onSubmit({ event: {} });
-    });
-    expect(textarea.props.value).toEqual('', 'Value should be cleared after submit');
-});
-
-it('Show draft text', () => {
-    var messageInput;
-    act(() => {
-        messageInput = createMessageInput(testMessage, () => {}, () => {}, 'yo');
-    });
-    let textarea = messageInput.root.findByType('textarea');
-    expect(textarea.props.value).toEqual('yo', 'Value should match draft');
-});
diff --git a/vnext/src/ui/__tests__/MessageInput.test.js b/vnext/src/ui/__tests__/MessageInput.test.js
new file mode 100644
index 00000000..1b5b0442
--- /dev/null
+++ b/vnext/src/ui/__tests__/MessageInput.test.js
@@ -0,0 +1,46 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+import MessageInput from '../MessageInput';
+
+test('Gives immediate focus on to textarea on load', async () => {
+    let draft = 'draft';
+    render(<MessageInput text={draft} onSend={async () => { return true; }} />);
+    expect(screen.getByText(draft)).toHaveFocus();
+});
+
+
+test('Submits on ctrl-enter and pass validation', async () => {
+    let result = false;
+    const onSend = jest.fn(async ({ body }) => { result = body === 'YO'; return result; });
+    let draft = 'draft';
+    render(<MessageInput onSend={onSend} text={draft} />);
+    let textarea = screen.getByText(draft);
+    fireEvent.change(textarea, { target: { value: 'HI' } });
+    // this event should not submit
+    fireEvent.keyPress(textarea, {
+        charCode: 13,
+        which: 13,
+        keyCode: 13
+    });
+    // this event should submit
+    fireEvent.keyPress(textarea, {
+        charCode: 13,
+        which: 13,
+        keyCode: 13,
+        ctrlKey: true
+    });
+    expect(onSend).toHaveBeenCalledTimes(1);
+    expect(result).toBe(false);
+    fireEvent.change(textarea, { target: { value: 'YO' } });
+    fireEvent.keyPress(textarea, {
+        charCode: 13,
+        which: 13,
+        keyCode: 13,
+        ctrlKey: true
+    });
+    expect(onSend).toHaveBeenCalledTimes(2);
+    expect(result).toBe(true);
+    await waitFor(() => expect(textarea.textContent).toEqual(''));
+    textarea.focus();
+    expect(textarea).toHaveFocus();
+});
diff --git a/vnext/src/utils/embed.js b/vnext/src/utils/embed.js
index e1fc28dd..22dacd8b 100644
--- a/vnext/src/utils/embed.js
+++ b/vnext/src/utils/embed.js
@@ -276,7 +276,7 @@ function getEmbeddableLinkTypes() {
       className: 'tg compact',
       re: /https?:\/\/t\.me\/(\S+)/i,
       makeNode: function(aNode, reResult, div) {
-        let [url, post] = reResult;
+        let [post] = reResult;
         // innerHTML cannot insert scripts, so...
         let script = document.createElement('script');
         script.src = 'https://telegram.org/js/telegram-widget.js?18';