EQA-1: Update the jest configuration

jest.config.js

@@ -1,28 +1,41 @@
-// Sync object
-/** @type {import('@jest/types').Config.InitialOptions} */
-const config = {
-  verbose: true,
-  collectCoverage: true,
-  coverageThreshold: {
-    global: {
-      branches: 10,
-      functions: 10,
-      lines: 10,
-    },
-  },
-  coverageReporters: ["json-summary", "lcov"],
-  collectCoverageFrom: ["./src/forms/**", "!./src/components/**/*.snap"],
+/**
+ * @returns {Promise<import('jest').Config>}
+ */
+module.exports = {
   transform: {
-    "^.+\\.tsx?$": "@swc/jest",
+    "^.+\\.(j|t)sx?$": "@swc/jest",
   },
   transformIgnorePatterns: ["/node_modules/(?!@openmrs)"],
   moduleNameMapper: {
     "\\.(s?css)$": "identity-obj-proxy",
     "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
-    "react-i18next": "<rootDir>/__mocks__/react-i18next.js",
-    "lodash-es": "lodash",
-    "react-markdown": "<rootDir>/__mocks__/react-markdown.tsx",
+    "^lodash-es/(.*)$": "lodash/$1",
+    "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
+    "^dexie$": require.resolve("dexie"),
+  },
+  collectCoverageFrom: [
+    "**/src/**/*.component.tsx",
+    "!**/node_modules/**",
+    "!**/vendor/**",
+    "!**/src/**/*.test.*",
+    "!**/src/declarations.d.tsx",
+    "!**/e2e/**",
+  ],
+  coverageThreshold: {
+    global: {
+      statements: 80,
+      branches: 80,
+      functions: 80,
+      lines: 80,
+    },
+  },
+  setupFilesAfterEnv: ["<rootDir>/src/setup-tests.ts"],
+  testPathIgnorePatterns: [
+    "<rootDir>/packages/esm-form-entry-app",
+    "<rootDir>/e2e",
+  ],
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    url: "http://localhost/",
   },
 };
-
-module.exports = config;

src/components/lazy-cell/lazy-cell.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import { LazyCell } from "./lazy-cell.component";
+
+describe("LazyCell", () => {
+  test("renders the resolved value after the promise is resolved", async () => {
+    const { container } = render(
+      <LazyCell lazyValue={Promise.resolve("Lazy cell")} />
+    );
+    await waitFor(() =>
+      expect(container.firstChild).toHaveTextContent("Lazy cell")
+    );
+  });
+});

src/views/empty-state/empty-state.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { EmptyState } from "./empty-state.component";
+
+describe("EmptyState Component", () => {
+  const headerTitle = "This is a header";
+  const displayText = "example display text";
+
+  test("renders header title", () => {
+    render(<EmptyState headerTitle={headerTitle} displayText={displayText} />);
+    const headerElement = screen.getByText(headerTitle);
+    expect(headerElement).toBeInTheDocument();
+  });
+
+  test("renders display text", () => {
+    render(<EmptyState headerTitle={headerTitle} displayText={displayText} />);
+    const displayTextElement = screen.getByText(
+      `There are no ${displayText} to display for this patient`
+    );
+    expect(displayTextElement).toBeInTheDocument();
+  });
+});

src/views/error-state/error-state.component.tsx

@@ -15,7 +15,7 @@ export const ErrorState: React.FC<ErrorStateProps> = ({
   const { t } = useTranslation();
 
   return (
-    <Tile light className={styles.tile}>
+    <Tile className={styles.tile}>
       <h1 className={styles.heading}>{headerTitle}</h1>
       <p className={styles.errorMessage}>
         {t("error", "Error")} {`${error?.response?.status}: `}

src/views/error-state/error-state.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ErrorState } from "./error-state.component";
+
+describe("ErrorState component", () => {
+  test("renders error message and header title", () => {
+    const error = {
+      response: {
+        status: 404,
+        statusText: "Not Found",
+      },
+    };
+    const headerTitle = "Error State";
+
+    render(<ErrorState error={error} headerTitle={headerTitle} />);
+
+    const errorMessage = screen.getByText("Error 404: Not Found");
+    const errorCopy = screen.getByText(
+      "Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above."
+    );
+
+    expect(errorMessage).toBeInTheDocument();
+    expect(errorCopy).toBeInTheDocument();
+  });
+});