handle .jsx files in karma

test plan:
  - build passes

flag=none

refs FOO-3190

Change-Id: I48d9459276123f0fe13767682855d4d0cc16c938
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/324173
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Christopher Soto <christopher.soto@instructure.com>
Reviewed-by: Michael Hulse <michael.hulse@instructure.com>
QA-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
Product-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
Build-Review: Andrea Cirulli <andrea.cirulli@instructure.com>
Build-Review: Isaac Moore <isaac.moore@instructure.com>

karma.conf.js

@@ -118,6 +118,7 @@ const karmaConfig = {
   preprocessors: {
     'spec/javascripts/webpack_spec_index.js': ['webpack'],
     '**/*Spec.js': ['webpack'],
+    '**/*Spec.jsx': ['webpack'],
   },
 
   webpack: require('./ui-build/webpack-for-karma'),
@@ -132,7 +133,7 @@ if (process.env.COVERAGE === '1') {
     fixWebpackSourcePaths: true,
   }
   karmaConfig.webpack.module.rules.unshift({
-    test: /\.(js|coffee)$/,
+    test: /\.(js|jsx|ts|tsx|coffee)$/,
     use: {
       loader: 'coverage-istanbul-loader',
       options: {esModules: true, produceSourceMap: true},

ui-build/webpack-for-karma/index.js

@@ -41,7 +41,7 @@ module.exports = {
     noParse: [require.resolve('jquery'), require.resolve('tinymce')],
     rules: [
       {
-        test: /\.m?js$/,
+        test: /\.(mjs|js|jsx|ts|tsx)$/,
         type: 'javascript/auto',
         include: [
           path.resolve(canvasDir, 'node_modules/graphql'),
@@ -80,7 +80,11 @@ module.exports = {
           options: {
             cacheDirectory: false,
             configFile: false,
-            presets: [['@babel/preset-react', {useBuiltIns: true}], ['@babel/preset-typescript']],
+            presets: [
+              ['@babel/preset-env'],
+              ['@babel/preset-react', {useBuiltIns: true}],
+              ['@babel/preset-typescript'],
+            ],
             plugins: [
               // we need to have babel transpile ESM to CJS and can't just let
               // Webpack do it because Sinon is evidently no longer compatible