diff --git a/.babelrc b/.babelrc
index 7ef51374cd..a34308e711 100644
--- a/.babelrc
+++ b/.babelrc
@@ -62,6 +62,20 @@
           }
         ]
       ]
+    },
+    "test": {
+      "presets": [
+        "@babel/preset-env",
+        [
+          "@babel/preset-react",
+          {
+            "runtime": "automatic"
+          }
+        ]
+      ],
+      "plugins": [
+        "babel-plugin-styled-components"
+      ]
     }
   },
   "plugins": [
diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
index d9140653c1..290528582a 100644
--- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
+++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
@@ -211,7 +211,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 0.16666666666666666rem;
-  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
+  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px,rgba(60,64,67,0.15) 0px 1px 3px 1px;
   min-width: 10rem;
   border-radius: 0.16666666666666666rem;
 }
@@ -324,7 +324,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-fujyAs cSTVlM"
+              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
               focusable="false"
             />
           </button>
@@ -340,7 +340,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="sc-iqAclL iOZiVo"
+            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
             focusable="false"
           />
         </button>
@@ -912,7 +912,7 @@ exports[`Nav renders editor version for mobile 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 0.16666666666666666rem;
-  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
+  box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px,rgba(60,64,67,0.15) 0px 1px 3px 1px;
   min-width: 10rem;
   border-radius: 0.16666666666666666rem;
 }
@@ -1025,7 +1025,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="sc-fujyAs cSTVlM"
+              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
               focusable="false"
             />
           </button>
@@ -1041,7 +1041,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="sc-iqAclL iOZiVo"
+            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
             focusable="false"
           />
         </button>
diff --git a/package.json b/package.json
index c0c2309e64..72181466c7 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "build:client": "cross-env NODE_ENV=production webpack --config webpack/config.prod.js",
     "build:server": "cross-env NODE_ENV=production webpack --config webpack/config.server.js",
     "build:examples": "cross-env NODE_ENV=production webpack --config webpack/config.examples.js",
-    "test": "jest",
+    "test": "NODE_ENV=test jest",
     "test:ci": "npm run lint && npm run test",
     "fetch-examples": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples.js",
     "fetch-examples-gg": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples-gg.js",
@@ -111,7 +111,9 @@
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
     "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.5",
+    "babel-plugin-styled-components": "^2.1.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.2.12",
     "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^3.4.1",