Merge pull request #21 from elastic/add_eui_and_styles

chore: configure Babel and Jest, add @elastic/eui and styled-componen…

Author: kapral18

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

jest.config.js

@@ -1,12 +1,38 @@
-/** @type {import('ts-jest').JestConfigWithTsJest} **/
+/** @type {import('jest').Config} **/
 
 export default {
-  preset: "ts-jest",
   testEnvironment: "jsdom",
   moduleNameMapper: {
     "^.+\\.svg$": "jest-svg-transformer",
-    "\\.(css|less|scss)$": "identity-obj-proxy",
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
+    "@elastic/eui/es/(.*)?": "<rootDir>/node_modules/@elastic/eui/test-env/$1",
+    "@elastic/eui$": "<rootDir>/node_modules/@elastic/eui/test-env",
   },
+  transform: {
+    "^.+\\.(js|ts|tsx|mjs)$": [
+      "babel-jest",
+      {
+        presets: [
+          [
+            "@babel/preset-typescript",
+            { "preset-env": { modules: "commonjs" } },
+          ],
+        ],
+        plugins: [
+          "babel-plugin-transform-import-meta",
+          "babel-plugin-explicit-exports-references",
+        ],
+      },
+    ],
+    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
+      "jest-transform-stub",
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!(@elastic/eui|uuid|react-dnd|dnd-core|@react-dnd|lodash-es)/)",
+    "/node_modules/(?!(uuid|unist-util-visit|unist-util-visit-parents|unist-util-is)/)",
+    "^.+\\.module\\.(css|sass|scss)$",
+  ],
   setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
-  testTimeout: 100000,
+  testTimeout: 500000,
 };

package.json

@@ -14,10 +14,20 @@
     "test:hidden:individual": "jest src/App.individualHidden.test.tsx"
   },
   "dependencies": {
+    "@elastic/datemath": "^5.0.3",
+    "@elastic/eui": "^98.1.0",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.13.5",
+    "moment": "^2.30.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@eslint/js": "9.15.0",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
@@ -27,12 +37,17 @@
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.3.3",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-explicit-exports-references": "^1.0.2",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "eslint": "9.15.0",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-react-refresh": "0.4.14",
     "globals": "15.12.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "jest-transform-stub": "^2.0.0",
     "ts-jest": "29.2.5",
     "typescript": "5.7.2",
     "typescript-eslint": "8.15.0",

src/App.defaultHidden.test.tsx

@@ -27,7 +27,7 @@ const components = [
   },
 ];
 
-describe("App defaultHidden test", () => {
+describe("App.defaultHidden", () => {
   // The hidden attribute is only only affecting `ByRole` queries
   describe.each(components)(
     "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",

src/App.individualHidden.test.tsx

@@ -1,5 +1,6 @@
 import { waitFor, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+
 import App from "./App";
 
 const components = [
@@ -23,7 +24,7 @@ const components = [
   },
 ];
 
-describe("App individual hidden test", () => {
+describe("App.defaultHidden", () => {
   // The hidden attribute is only only affecting `ByRole` queries
   describe.each(components)(
     "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",