Merge pull request #13505 from backstage/blam/fix-swc-import

Fix the config for `jest` with `swc`

.changeset/itchy-brooms-end.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Fix issue when using `.jsx` files inside tests

.changeset/shaggy-buses-juggle.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-graphiql': patch
+---
+
+Internal refactor

packages/app/src/components/Root/LogoIcon.jsx

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+// @ts-check
+// NOTE: This file is intentionally .jsx, so that there is one file in this repo where we make sure .jsx files work.
 
 import React from 'react';
 import { makeStyles } from '@material-ui/core';

packages/cli/config/jest.js

@@ -131,10 +131,60 @@ async function getProjectConfig(targetPath, displayName) {
     },
 
     transform: {
-      '\\.(js|jsx|ts|tsx|mjs|cjs)$': [
+      '\\.(mjs|cjs|js)$': [
         require.resolve('./jestSwcTransform'),
         {
           sourceMaps: envOptions.enableSourceMaps || envOptions.nextTests,
+          jsc: {
+            parser: {
+              syntax: 'ecmascript',
+            },
+          },
+        },
+      ],
+      '\\.jsx$': [
+        require.resolve('./jestSwcTransform'),
+        {
+          sourceMaps: envOptions.enableSourceMaps || envOptions.nextTests,
+          jsc: {
+            parser: {
+              syntax: 'ecmascript',
+              jsx: true,
+            },
+            transform: {
+              react: {
+                runtime: 'automatic',
+              },
+            },
+          },
+        },
+      ],
+      '\\.ts$': [
+        require.resolve('./jestSwcTransform'),
+        {
+          sourceMaps: envOptions.enableSourceMaps || envOptions.nextTests,
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+            },
+          },
+        },
+      ],
+      '\\.tsx$': [
+        require.resolve('./jestSwcTransform'),
+        {
+          sourceMaps: envOptions.enableSourceMaps || envOptions.nextTests,
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+            },
+            transform: {
+              react: {
+                runtime: 'automatic',
+              },
+            },
+          },
         },
       ],
       '\\.(bmp|gif|jpg|jpeg|png|frag|xml|svg|eot|woff|woff2|ttf)$':