Make it so we can write tests again

Tests were broken after adding @patternfly/virtual-assistant. I updated the jest config to handle it.

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
+  ],
+};

jest.config.js

@@ -12,21 +12,27 @@ module.exports = {
   coverageDirectory: 'coverage',
 
   // An array of directory names to be searched recursively up from the requiring module's location
-  moduleDirectories: [
-    "node_modules",
-    "<rootDir>/src"
-  ],
+  moduleDirectories: ['node_modules', '<rootDir>/src'],
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
     '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-    "@app/(.*)": '<rootDir>/src/app/$1'
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '@app/(.*)': '<rootDir>/src/app/$1',
   },
 
   // A preset that is used as a base for Jest's configuration
-  preset: "ts-jest/presets/js-with-ts",
+  preset: 'ts-jest/presets/js-with-ts',
 
   // The test environment that will be used for testing.
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
+
+  transformIgnorePatterns: [
+    'node_modules/(?!@patternfly|react-syntax-highlighter|remark-gfm|react-markdown|remark-parse|devlop|hast-util-to-jsx-runtime|comma-separated-tokens|estree-util-is-identifier-name|hast-util-whitespace|property-information|space-separated-tokens|unist-util-position|vfile-message|unist-util-stringify-position|html-url-attributes|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|trim-lines|unist-util-visit|unist-util-is|unified|bail|is-plain-obj|trough|vfile|mdast-util-gfm|ccount|mdast-util-find-and-replace|escape-string-regexp|markdown-table|mdast-util-to-markdown|zwitch|longest-streak|mdast-util-phrasing)',
+  ],
+
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
 };

package.json

@@ -10,7 +10,7 @@
     "prebuild": "npm run type-check && npm run clean",
     "dr:surge": "node dr-surge.js",
     "build": "webpack --config webpack.prod.js && npm run dr:surge",
-    "start": "sirv dist --cors --single --host --port 3000", 
+    "start": "sirv dist --cors --single --host --port 3000",
     "start:dev": "webpack serve --color --progress --config webpack.dev.js",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -25,6 +25,9 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^1.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",

src/app/BaseChatbot/BaseChatbot.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BaseChatbot } from './BaseChatbot';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+
+describe('Base chatbot', () => {
+  it('should be able to snapshot', () => {
+    const router = createMemoryRouter([{ path: '/', element: <BaseChatbot /> }], { initialEntries: ['/'] });
+
+    const { container } = render(<RouterProvider router={router} />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/app/BaseChatbot/__snapshots__/BaseChatbot.test.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base chatbot should be able to snapshot 1`] = `
+<div>
+  <h2>
+    Unexpected Application Error!
+  </h2>
+  <h3
+    style="font-style: italic;"
+  >
+    Cannot destructure property 'chatbots' of '(0 , _reactRouterDom.useLoaderData)(...)' as it is undefined.
+  </h3>
+  <pre
+    style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
+  >
+    TypeError: Cannot destructure property 'chatbots' of '(0 , _reactRouterDom.useLoaderData)(...)' as it is undefined.
+    at chatbots (/Users/ralpert/Documents/chatbot-ui/src/app/BaseChatbot/BaseChatbot.tsx:51:11)
+    at renderWithHooks (/Users/ralpert/Documents/chatbot-ui/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
+    at mountIndeterminateComponent (/Users/ralpert/Documents/chatbot-ui/node_modules/react-dom/cjs/react-dom.development.js:20103:13)
+    at beginWork (/Users/ralpert/Documents/chatbot-ui/node_modules/react-dom/cjs/react-dom.development.js:21626:16)
+    at beginWork$1 (/Users/ralpert/Documents/chatbot-ui/node_modules/react-dom/cjs/react-dom.development.js:27465:14)
+    at performUnitOfWork (/Users/ralpert/Documents/chatbot-ui/node_modules/react-dom/cjs/react-dom.development.js:26599:12)
+    at workLoopSync (/Users/ralpert/Documents/chatbot-ui/node_modules/react-dom/cjs/react-dom.development.js:26505:5)
+    at renderRootSync (/Users/ralpert/Documents/chatbot-ui/node_modules/react-dom/cjs/react-dom.development.js:26473:7)
+    at recoverFromConcurrentError (/Users/ralpert/Documents/chatbot-ui/node_modules/react-dom/cjs/react-dom.development.js:25889:20)
+    at performConcurrentWorkOnRoot (/Users/ralpert/Documents/chatbot-ui/node_modules/react-dom/cjs/react-dom.development.js:25789:22)
+    at flushActQueue (/Users/ralpert/Documents/chatbot-ui/node_modules/react/cjs/react.development.js:2667:24)
+    at act (/Users/ralpert/Documents/chatbot-ui/node_modules/react/cjs/react.development.js:2582:11)
+    at /Users/ralpert/Documents/chatbot-ui/node_modules/@testing-library/react/dist/act-compat.js:47:25
+    at renderRoot (/Users/ralpert/Documents/chatbot-ui/node_modules/@testing-library/react/dist/pure.js:180:26)
+    at render (/Users/ralpert/Documents/chatbot-ui/node_modules/@testing-library/react/dist/pure.js:271:10)
+    at Object.&lt;anonymous&gt; (/Users/ralpert/Documents/chatbot-ui/src/app/BaseChatbot/BaseChatbot.test.tsx:11:33)
+    at Promise.then.completed (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-circus/build/utils.js:298:28)
+    at new Promise (&lt;anonymous&gt;)
+    at callAsyncCircusFn (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-circus/build/utils.js:231:10)
+    at _callCircusTest (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-circus/build/run.js:316:40)
+    at processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at _runTest (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-circus/build/run.js:252:3)
+    at _runTestsForDescribeBlock (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-circus/build/run.js:126:9)
+    at _runTestsForDescribeBlock (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-circus/build/run.js:121:9)
+    at run (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-circus/build/run.js:71:3)
+    at runAndTransformResultsToJestFormat (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
+    at jestAdapter (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
+    at runTestInternal (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-runner/build/runTest.js:367:16)
+    at runTest (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-runner/build/runTest.js:444:34)
+    at Object.worker (/Users/ralpert/Documents/chatbot-ui/node_modules/jest-runner/build/testWorker.js:106:12)
+  </pre>
+  <p>
+    💿 Hey developer 👋
+  </p>
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
+    >
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
+    >
+      errorElement
+    </code>
+     prop on your route.
+  </p>
+</div>
+`;