Merge pull request #7126 from Sage/prep-react-18

Add missing `act` wrappers

src/__internal__/checkable-input/checkable-input.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import CheckableInput from ".";
 
 test("renders `label` with expected id when `id` prop is passed", () => {
@@ -40,7 +40,9 @@ test("renders input with 'aria-describedby' as the id of the validation tooltip
 
   expect(input).not.toHaveAttribute("aria-describedby");
 
-  input.focus();
+  act(() => {
+    input.focus();
+  });
 
   expect(input).toHaveAttribute("aria-describedby", "foo-validation");
 });
@@ -59,7 +61,9 @@ test("appends the id of the validation tooltip to the input's 'aria-describedby'
 
   expect(input).toHaveAttribute("aria-describedby", "foo-field-help");
 
-  input.focus();
+  act(() => {
+    input.focus();
+  });
 
   expect(input).toHaveAttribute(
     "aria-describedby",

src/__internal__/fieldset/fieldset.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, within } from "@testing-library/react";
+import { act, render, screen, within } from "@testing-library/react";
 import Fieldset from ".";
 import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils";
 
@@ -96,11 +96,16 @@ test("sets `aria-describedby` on help icon as tooltip content when focused and r
       <input />
     </Fieldset>,
   );
-
   const help = screen.getByRole("button", { name: "help" });
-  help.focus();
+
+  act(() => {
+    help.focus();
+  });
   expect(help).toHaveAccessibleDescription("label help");
-  help.blur();
+
+  act(() => {
+    help.blur();
+  });
   expect(help).not.toHaveAttribute("aria-describedby");
 });