diff --git a/src/__internal__/utils/helpers/tags/tags-specs/index.ts b/src/__internal__/utils/helpers/tags/tags-specs/index.ts
index cec7ad6853..9afa6aa780 100644
--- a/src/__internal__/utils/helpers/tags/tags-specs/index.ts
+++ b/src/__internal__/utils/helpers/tags/tags-specs/index.ts
@@ -1 +1 @@
-export { elementsTagTest, rootTagTest } from "./tags-specs";
+export { default } from "./tags-specs";
diff --git a/src/__internal__/utils/helpers/tags/tags-specs/tags-specs.ts b/src/__internal__/utils/helpers/tags/tags-specs/tags-specs.ts
index e8d5fe2770..c34241c8d9 100644
--- a/src/__internal__/utils/helpers/tags/tags-specs/tags-specs.ts
+++ b/src/__internal__/utils/helpers/tags/tags-specs/tags-specs.ts
@@ -1,17 +1,6 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
 
-export const elementsTagTest = (
-  wrapper: ReactWrapper | ShallowWrapper,
-  elements: string[]
-) => {
-  elements.forEach((element) => {
-    it(`include 'data-element="${element}"'`, () => {
-      expect(wrapper.find({ "data-element": element }).length).toEqual(1);
-    });
-  });
-};
-
-export const rootTagTest = (
+const rootTagTest = (
   rootNode: ReactWrapper | ShallowWrapper,
   comp: string,
   elem?: string,
@@ -21,3 +10,5 @@ export const rootTagTest = (
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
 };
+
+export default rootTagTest;
diff --git a/src/components/detail/detail.component.tsx b/src/components/detail/detail.component.tsx
index 23ca5eb323..a91a0c9560 100644
--- a/src/components/detail/detail.component.tsx
+++ b/src/components/detail/detail.component.tsx
@@ -41,7 +41,11 @@ export const Detail = ({
     </StyledDetailContent>
 
     {footnote && (
-      <StyledDetailFootnote data-element="footnote" hasIcon={!!icon}>
+      <StyledDetailFootnote
+        data-element="footnote"
+        data-role="footnote"
+        hasIcon={!!icon}
+      >
         {footnote}
       </StyledDetailFootnote>
     )}
diff --git a/src/components/detail/detail.spec.tsx b/src/components/detail/detail.spec.tsx
deleted file mode 100644
index bb07169ac7..0000000000
--- a/src/components/detail/detail.spec.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from "react";
-import { shallow, mount, ReactWrapper, ShallowWrapper } from "enzyme";
-import Detail from "./detail.component";
-import {
-  elementsTagTest,
-  rootTagTest,
-} from "../../__internal__/utils/helpers/tags/tags-specs";
-import {
-  assertStyleMatch,
-  testStyledSystemMargin,
-} from "../../__spec_helper__/__internal__/test-utils";
-import {
-  StyledDetail,
-  StyledDetailContent,
-  StyledDetailIcon,
-  StyledDetailFootnote,
-} from "./detail.style";
-
-describe("Detail", () => {
-  let wrapper: ReactWrapper | ShallowWrapper;
-
-  testStyledSystemMargin((props) => <Detail {...props}>foo</Detail>);
-
-  describe("render", () => {
-    beforeEach(() => {
-      wrapper = shallow(<Detail className="foo">foo</Detail>);
-    });
-
-    it("renders the children", () => {
-      expect(wrapper.find(StyledDetailContent).text()).toEqual("foo");
-    });
-
-    it("renders with custom classes", () => {
-      expect(wrapper.find(StyledDetail).props().className).toContain(
-        "carbon-detail foo"
-      );
-    });
-  });
-
-  describe("with a footnote", () => {
-    beforeEach(() => {
-      wrapper = shallow(<Detail footnote="extra info">foo</Detail>);
-    });
-
-    it("renders the footnote", () => {
-      const footnote = wrapper.find(StyledDetailFootnote);
-      expect(footnote.text()).toEqual("extra info");
-    });
-  });
-
-  describe("with an icon", () => {
-    beforeEach(() => {
-      wrapper = mount(<Detail icon="settings">foo</Detail>);
-    });
-
-    it("renders the icon", () => {
-      const icon = wrapper.find(StyledDetailIcon);
-      expect(icon).toBeDefined();
-    });
-
-    it("should give the content a margin left", () => {
-      assertStyleMatch(
-        { marginLeft: "26px" },
-        wrapper.find(StyledDetailContent)
-      );
-    });
-
-    describe("with a footnote", () => {
-      beforeEach(() => {
-        wrapper = mount(
-          <Detail icon="settings" footnote="extra info">
-            foo
-          </Detail>
-        );
-      });
-
-      it("should give the footnote a margin left", () => {
-        assertStyleMatch(
-          { marginLeft: "26px" },
-          wrapper.find(StyledDetailFootnote)
-        );
-      });
-    });
-  });
-
-  describe("tags", () => {
-    describe("on component", () => {
-      const instance = shallow(<Detail data-element="bar" data-role="baz" />);
-
-      it("include correct component, element and role data tags", () => {
-        rootTagTest(instance.find(StyledDetail), "detail", "bar", "baz");
-      });
-    });
-
-    describe("on internal elements", () => {
-      wrapper = shallow(<Detail icon="home" footnote="test" />);
-
-      elementsTagTest(wrapper, ["icon", "footnote"]);
-    });
-  });
-});
diff --git a/src/components/detail/detail.test.tsx b/src/components/detail/detail.test.tsx
new file mode 100644
index 0000000000..d0249296d1
--- /dev/null
+++ b/src/components/detail/detail.test.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { render, screen, within } from "@testing-library/react";
+import Detail from ".";
+import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils";
+
+test("renders children", () => {
+  render(<Detail>foo</Detail>);
+
+  expect(screen.getByText("foo")).toBeVisible();
+});
+
+test("renders with provided `footnote`", () => {
+  render(<Detail footnote="extra info">foo</Detail>);
+
+  const footnoteText = within(screen.getByTestId("footnote")).getByText(
+    "extra info"
+  );
+
+  expect(footnoteText).toBeVisible();
+});
+
+test("renders with provided `icon`", () => {
+  render(<Detail icon="bin">foo</Detail>);
+
+  const icon = screen.getByTestId("icon");
+
+  expect(icon).toBeVisible();
+  expect(icon).toHaveAttribute("type", "bin");
+});
+
+test("renders with provided data- tags", () => {
+  render(
+    <Detail data-element="bar" data-role="baz">
+      foo
+    </Detail>
+  );
+
+  expect(screen.getByTestId("baz")).toHaveAttribute("data-element", "bar");
+});
+
+// coverage
+test("renders with expected styles when `icon` and `footnote` are passed", () => {
+  render(
+    <Detail icon="bin" footnote="extra info">
+      foo
+    </Detail>
+  );
+
+  const footnote = screen.getByTestId("footnote");
+
+  expect(footnote).toHaveStyle("margin-left: 26px");
+});
+
+testStyledSystemMargin((props) => <Detail {...props}>foo</Detail>);
diff --git a/src/components/popover-container/popover-container.spec.tsx b/src/components/popover-container/popover-container.spec.tsx
index 5a2240a906..68b8196e3f 100644
--- a/src/components/popover-container/popover-container.spec.tsx
+++ b/src/components/popover-container/popover-container.spec.tsx
@@ -26,7 +26,7 @@ import Icon from "../icon";
 import guid from "../../__internal__/utils/helpers/guid";
 import { Select, Option } from "../select";
 import useMediaQuery from "../../hooks/useMediaQuery";
-import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../__internal__/utils/helpers/tags/tags-specs";
 
 jest.mock("../../hooks/useMediaQuery", () => {
   return {
diff --git a/src/components/tabs/tabs.spec.tsx b/src/components/tabs/tabs.spec.tsx
index f4103ab5f1..efc031e923 100644
--- a/src/components/tabs/tabs.spec.tsx
+++ b/src/components/tabs/tabs.spec.tsx
@@ -5,7 +5,7 @@ import { act } from "react-dom/test-utils";
 import TabTitle from "./__internal__/tab-title/tab-title.component";
 import { Tabs, Tab, TabsProps } from ".";
 import TabContext from "./tab/__internal__/tab.context";
-import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../__internal__/utils/helpers/tags/tags-specs";
 import StyledTabs, { StyledTabsProps } from "./tabs.style";
 import StyledTab from "./tab/tab.style";
 import { StyledTabTitleButton } from "./__internal__/tab-title/tab-title.style";
diff --git a/src/components/tile/tile-footer/tile-footer.spec.tsx b/src/components/tile/tile-footer/tile-footer.spec.tsx
index 25a98cf893..3d12bb88bf 100644
--- a/src/components/tile/tile-footer/tile-footer.spec.tsx
+++ b/src/components/tile/tile-footer/tile-footer.spec.tsx
@@ -6,7 +6,7 @@ import {
   testStyledSystemPadding,
 } from "../../../__spec_helper__/__internal__/test-utils";
 import StyledTileFooter from "./tile-footer.style";
-import { rootTagTest } from "../../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../../__internal__/utils/helpers/tags/tags-specs";
 
 describe("TileFooter", () => {
   let wrapper: ReactWrapper;
diff --git a/src/components/tile/tile-header/tile-header.spec.tsx b/src/components/tile/tile-header/tile-header.spec.tsx
index 9b0e48175e..c1dc4dcc82 100644
--- a/src/components/tile/tile-header/tile-header.spec.tsx
+++ b/src/components/tile/tile-header/tile-header.spec.tsx
@@ -6,7 +6,7 @@ import {
   testStyledSystemPadding,
 } from "../../../__spec_helper__/__internal__/test-utils";
 import StyledTileHeader from "./tile-header.style";
-import { rootTagTest } from "../../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../../__internal__/utils/helpers/tags/tags-specs";
 
 describe("TileHeader", () => {
   let wrapper: ReactWrapper;
diff --git a/src/components/tile/tile.spec.tsx b/src/components/tile/tile.spec.tsx
index 14cafcb00b..2b620e9836 100644
--- a/src/components/tile/tile.spec.tsx
+++ b/src/components/tile/tile.spec.tsx
@@ -10,7 +10,7 @@ import {
   testStyledSystemHeight,
 } from "../../__spec_helper__/__internal__/test-utils";
 import { TileProps } from "./tile.component";
-import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
+import rootTagTest from "../../__internal__/utils/helpers/tags/tags-specs";
 import StyledTile from "./tile.style";
 import { TILE_HIGHLIGHT_VARIANTS } from "./tile.config";