diff --git a/app/javascript/components/disable-offline/component.jsx b/app/javascript/components/disable-offline/component.jsx
index a5258cfff6..0dc3ebba86 100644
--- a/app/javascript/components/disable-offline/component.jsx
+++ b/app/javascript/components/disable-offline/component.jsx
@@ -20,7 +20,7 @@ const Component = ({ overrideCondition, children, button, offlineTextKey }) => {
   if (overrideCondition || !online) {
     return (
       <Tooltip title={i18n.t(offlineTextKey || "offline")} enterTouchDelay={20}>
-        <div className={classes}>
+        <div className={classes} data-testid="disable-offline">
           {!button && <div className={css.disabledElement} />}
           {cloneElement(children, { disabled: true })}
         </div>
diff --git a/app/javascript/components/page/component.jsx b/app/javascript/components/page/component.jsx
index e475a65670..ed072d11dd 100644
--- a/app/javascript/components/page/component.jsx
+++ b/app/javascript/components/page/component.jsx
@@ -21,7 +21,7 @@ const Component = ({ children, twoCol, fullWidthMobile }) => {
   }
 
   return (
-    <div className={contentClasses}>
+    <div className={contentClasses} data-testid="page-container">
       <div className={contentContainer}>{children}</div>
     </div>
   );
diff --git a/app/javascript/components/page/components/page-content.jsx b/app/javascript/components/page/components/page-content.jsx
index 617f4d4276..5f36b09c09 100644
--- a/app/javascript/components/page/components/page-content.jsx
+++ b/app/javascript/components/page/components/page-content.jsx
@@ -8,7 +8,11 @@ import css from "../styles.css";
 const PageContent = ({ children, flex = false, hasNav = false }) => {
   const contentClasses = clsx(css.content, { [css.contentFlex]: flex, [css.hasNav]: hasNav });
 
-  return <div className={contentClasses}>{children}</div>;
+  return (
+    <div className={contentClasses} data-testid="page-content">
+      {children}
+    </div>
+  );
 };
 
 PageContent.propTypes = {
diff --git a/app/javascript/components/pages/export-list/container.jsx b/app/javascript/components/pages/export-list/container.jsx
index cdff16e1e0..a37550ccd7 100644
--- a/app/javascript/components/pages/export-list/container.jsx
+++ b/app/javascript/components/pages/export-list/container.jsx
@@ -117,7 +117,7 @@ const ExportList = () => {
 
   return (
     <PageContainer>
-      <PageHeading title={i18n.t("navigation.bulk_exports")} />
+      <PageHeading data-testid="page-heading" title={i18n.t("navigation.bulk_exports")} />
       <PageContent>
         <IndexTable title={i18n.t("navigation.bulk_exports")} {...tableOptions} />
       </PageContent>
diff --git a/app/javascript/components/pages/export-list/container.spec.js b/app/javascript/components/pages/export-list/container.spec.js
new file mode 100644
index 0000000000..0d50381bc4
--- /dev/null
+++ b/app/javascript/components/pages/export-list/container.spec.js
@@ -0,0 +1,210 @@
+// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+
+import { fromJS } from "immutable";
+
+import { ListHeaderRecord } from "../../user/records";
+import { mountedComponent, screen } from "../../../test-utils";
+import { FieldRecord } from "../../record-form";
+import { mapEntriesToRecord } from "../../../libs";
+
+import { ExportRecord } from "./records";
+import ExportList from "./container";
+
+describe("<ExportList />", () => {
+  const initialState = fromJS({
+    records: {
+      bulk_exports: {
+        data: [
+          ExportRecord({
+            id: "d5e1a4a019ec727efd34a35d1d9a271e",
+            file_name: "PRIMERO-CHILD-UNHCR.CSV",
+            record_type: "Case",
+            started_on: "2020-02-04T20:32:50.078Z"
+          }),
+          ExportRecord({
+            id: "d5e1a4a019ec727efd34a35d1d9a272e",
+            file_name: "PRIMERO - CHILD.PDF",
+            record_type: "Case",
+            started_on: "2020-02-03T20:32:50.078Z"
+          }),
+          ExportRecord({
+            id: "d5e1a4a019ec727efd34a35d1d9a273e",
+            file_name: "PRIMERO - CHILD.JSON",
+            record_type: "Case",
+            started_on: "2020-02-02T20:32:50.078Z"
+          })
+        ],
+        metadata: {
+          total: 15,
+          per: 20,
+          page: 1
+        },
+        errors: false
+      }
+    },
+    user: {
+      listHeaders: {
+        bulk_exports: [
+          ListHeaderRecord({
+            name: "file_name",
+            field_name: "file_name",
+            id_search: false
+          }),
+          ListHeaderRecord({
+            name: "record_type",
+            field_name: "record_type",
+            id_search: false
+          }),
+          ListHeaderRecord({
+            name: "started_on",
+            field_name: "started_on",
+            id_search: false
+          })
+        ]
+      },
+      permissions: {
+        exports: ["manage"],
+        bulk_exports: ["manage"]
+      }
+    },
+    forms: {
+      fields: mapEntriesToRecord(
+        {
+          1: {
+            name: "name_first",
+            type: "text_field"
+          }
+        },
+        FieldRecord
+      ),
+      options: {
+        lookups: [
+          {
+            id: 1,
+            unique_id: "lookup-location-type",
+            values: [
+              { id: "country", display_text: "Country" },
+              { id: "region", display_text: "Region" }
+            ]
+          }
+        ]
+      }
+    }
+  });
+
+  it("should render a table with three rows", () => {
+    mountedComponent(<ExportList />, {}, initialState);
+    expect(screen.getAllByRole("row")).toHaveLength(3);
+  });
+
+  it("should render <PageContainer>", () => {
+    mountedComponent(<ExportList />, {}, initialState);
+    expect(screen.getByTestId("page-container")).toBeInTheDocument(1);
+  });
+
+  it("should render <PageHeading>", () => {
+    mountedComponent(<ExportList />, {}, initialState);
+    expect(screen.getByTestId("page-heading")).toBeInTheDocument();
+  });
+
+  it("should render <PageContent>", () => {
+    mountedComponent(<ExportList />, {}, initialState);
+    expect(screen.getByTestId("page-content")).toBeInTheDocument();
+  });
+
+  it("should render <IndexTable>", () => {
+    mountedComponent(<ExportList />, {}, initialState);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+
+  describe("when offline", () => {
+    const stateOffline = fromJS({
+      connectivity: {
+        online: false
+      },
+      records: {
+        bulk_exports: {
+          data: [
+            ExportRecord({
+              id: "d5e1a4a019ec727efd34a35d1d9a271e",
+              file_name: "PRIMERO-CHILD-UNHCR.CSV",
+              record_type: "Case",
+              started_on: "2020-02-04T20:32:50.078Z"
+            }),
+            ExportRecord({
+              id: "d5e1a4a019ec727efd34a35d1d9a272e",
+              file_name: "PRIMERO - CHILD.PDF",
+              record_type: "Case",
+              started_on: "2020-02-03T20:32:50.078Z"
+            }),
+            ExportRecord({
+              id: "d5e1a4a019ec727efd34a35d1d9a273e",
+              file_name: "PRIMERO - CHILD.JSON",
+              record_type: "Case",
+              started_on: "2020-02-02T20:32:50.078Z"
+            })
+          ],
+          metadata: {
+            total: 15,
+            per: 20,
+            page: 1
+          },
+          errors: false
+        }
+      },
+      user: {
+        listHeaders: {
+          bulk_exports: [
+            ListHeaderRecord({
+              name: "file_name",
+              field_name: "file_name",
+              id_search: false
+            }),
+            ListHeaderRecord({
+              name: "record_type",
+              field_name: "record_type",
+              id_search: false
+            }),
+            ListHeaderRecord({
+              name: "started_on",
+              field_name: "started_on",
+              id_search: false
+            })
+          ]
+        },
+        permissions: {
+          exports: ["manage"],
+          bulk_exports: ["manage"]
+        }
+      },
+      forms: {
+        fields: mapEntriesToRecord(
+          {
+            1: {
+              name: "name_first",
+              type: "text_field"
+            }
+          },
+          FieldRecord
+        ),
+        options: {
+          lookups: [
+            {
+              id: 1,
+              unique_id: "lookup-location-type",
+              values: [
+                { id: "country", display_text: "Country" },
+                { id: "region", display_text: "Region" }
+              ]
+            }
+          ]
+        }
+      }
+    });
+
+    it("should render DisabledOffline components for each row", () => {
+      mountedComponent(<ExportList />, stateOffline);
+      expect(screen.getAllByTestId("disable-offline")).toHaveLength(9);
+    });
+  });
+});
diff --git a/app/javascript/components/pages/export-list/container.unit.test.js b/app/javascript/components/pages/export-list/container.unit.test.js
deleted file mode 100644
index 59e96e2f28..0000000000
--- a/app/javascript/components/pages/export-list/container.unit.test.js
+++ /dev/null
@@ -1,136 +0,0 @@
-// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
-
-import { fromJS } from "immutable";
-import MUIDataTable, { TableBodyRow } from "mui-datatables";
-
-import IndexTable from "../../index-table";
-import PageContainer, { PageHeading, PageContent } from "../../page";
-import { ListHeaderRecord } from "../../user/records";
-import { setupMountedComponent } from "../../../test";
-import { FieldRecord } from "../../record-form";
-import { mapEntriesToRecord } from "../../../libs";
-import DisableOffline from "../../disable-offline";
-
-import { ExportRecord } from "./records";
-import ExportList from "./container";
-
-describe("<ExportList />", () => {
-  let component;
-
-  const initialState = fromJS({
-    records: {
-      bulk_exports: {
-        data: [
-          ExportRecord({
-            id: "d5e1a4a019ec727efd34a35d1d9a271e",
-            file_name: "PRIMERO-CHILD-UNHCR.CSV",
-            record_type: "Case",
-            started_on: "2020-02-04T20:32:50.078Z"
-          }),
-          ExportRecord({
-            id: "d5e1a4a019ec727efd34a35d1d9a272e",
-            file_name: "PRIMERO - CHILD.PDF",
-            record_type: "Case",
-            started_on: "2020-02-03T20:32:50.078Z"
-          }),
-          ExportRecord({
-            id: "d5e1a4a019ec727efd34a35d1d9a273e",
-            file_name: "PRIMERO - CHILD.JSON",
-            record_type: "Case",
-            started_on: "2020-02-02T20:32:50.078Z"
-          })
-        ],
-        metadata: {
-          total: 15,
-          per: 20,
-          page: 1
-        },
-        errors: false
-      }
-    },
-    user: {
-      listHeaders: {
-        bulk_exports: [
-          ListHeaderRecord({
-            name: "file_name",
-            field_name: "file_name",
-            id_search: false
-          }),
-          ListHeaderRecord({
-            name: "record_type",
-            field_name: "record_type",
-            id_search: false
-          }),
-          ListHeaderRecord({
-            name: "started_on",
-            field_name: "started_on",
-            id_search: false
-          })
-        ]
-      },
-      permissions: {
-        exports: ["manage"],
-        bulk_exports: ["manage"]
-      }
-    },
-    forms: {
-      fields: mapEntriesToRecord(
-        {
-          1: {
-            name: "name_first",
-            type: "text_field"
-          }
-        },
-        FieldRecord
-      ),
-      options: {
-        lookups: [
-          {
-            id: 1,
-            unique_id: "lookup-location-type",
-            values: [
-              { id: "country", display_text: "Country" },
-              { id: "region", display_text: "Region" }
-            ]
-          }
-        ]
-      }
-    }
-  });
-
-  beforeEach(() => {
-    ({ component } = setupMountedComponent(ExportList, {}, initialState));
-  });
-
-  it("should render a table with three rows", () => {
-    expect(component.find(MUIDataTable).find(TableBodyRow)).to.have.lengthOf(3);
-  });
-
-  it("should render <PageContainer>", () => {
-    expect(component.find(PageContainer)).to.have.lengthOf(1);
-  });
-
-  it("should render <PageHeading>", () => {
-    expect(component.find(PageHeading)).to.have.lengthOf(1);
-  });
-
-  it("should render <PageContent>", () => {
-    expect(component.find(PageContent)).to.have.lengthOf(1);
-  });
-
-  it("should render <IndexTable>", () => {
-    expect(component.find(IndexTable)).to.have.lengthOf(1);
-  });
-
-  describe("when offline", () => {
-    const stateOffline = initialState.setIn(["application", "online"], false);
-
-    beforeEach(() => {
-      ({ component } = setupMountedComponent(ExportList, {}, stateOffline));
-    });
-
-    it("should render DisabledOffline components for each row", () => {
-      expect(component.find(DisableOffline)).to.have.lengthOf(9);
-    });
-  });
-});