fix: add testing library eslint rules (#31028)

Added recommended rules for testing library

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added `data-testid` attributes across various components for improved
test identification.

- **Tests**
- Enhanced test cases with asynchronous handling (`async`/`await`) for
more reliable user interaction simulations.
- Transitioned to using `getByTestId` instead of `queryByTestId` for
better assertion reliability in tests.
- Added `await` before the `userEvent.click(el)` statement in the
ChartWidget test file.
- Updated the destructured variable names from `queryByTestId` to
`getByTestId` in the DividerWidget test file for improved clarity.
- Added an import for `screen` from "@testing-library/react" and updated
element querying in the TabsWidget test file.

- **Chores**
- Updated ESLint configurations to include testing-library plugins and
rules, improving code quality and consistency in test files.
- Removed unnecessary `cleanup` function calls after tests, following
best practices for test cleanup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/.eslintrc.base.json

@@ -16,12 +16,14 @@
     "react-hooks",
     "sort-destructure-keys",
     "cypress",
+    "testing-library",
     "jest"
   ],
   "extends": [
     "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
     "plugin:@typescript-eslint/recommended",
     "plugin:cypress/recommended",
+    "plugin:testing-library/react",
     // Note: Please keep this as the last config to make sure that this (and by extension our .prettierrc file) overrides all configuration above it
     // https://www.npmjs.com/package/eslint-plugin-prettier#recommended-configuration
     "plugin:prettier/recommended"
@@ -35,6 +37,13 @@
     "project": "./tsconfig.json"
   },
   "rules": {
+    "testing-library/consistent-data-testid": [
+      "warn",
+      {
+        "testIdPattern": "^t--[a-zA-Z0-9_.-]*$",
+        "testIdAttribute": ["data-testid"]
+      }
+    ],
     "@typescript-eslint/consistent-type-definitions": "error",
     "@typescript-eslint/prefer-nullish-coalescing": "error",
     "@typescript-eslint/promise-function-async": "error",

app/client/.eslintrc.js

@@ -13,6 +13,12 @@ const baseNoRestrictedImports =
 const eslintConfig = {
   extends: ["./.eslintrc.base.json"],
   rules: {
+    "testing-library/no-container": "off",
+    "testing-library/no-node-access": "off",
+    "testing-library/no-debugging-utils": "off",
+    "testing-library/prefer-screen-queries": "off",
+    "testing-library/render-result-naming-convention": "off",
+    "testing-library/no-unnecessary-act": "off",
     "@typescript-eslint/prefer-nullish-coalescing": "off",
     "@typescript-eslint/strict-boolean-expressions": "off",
     "@typescript-eslint/no-explicit-any": "off",

app/client/package.json

@@ -329,6 +329,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sort-destructure-keys": "^1.5.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-testing-library": "^6.2.0",
     "esm": "^3.2.25",
     "factory.ts": "^0.5.1",
     "husky": "^8.0.0",

app/client/packages/design-system/widgets-old/src/Dropdown/index.tsx

@@ -858,6 +858,7 @@ export function RenderDropdownOptions(props: DropdownOptionsProps) {
     <DropdownWrapper
       className="ads-dropdown-options-wrapper"
       data-cy="dropdown-options-wrapper"
+      // eslint-disable-next-line testing-library/consistent-data-testid
       data-testid="dropdown-options-wrapper"
       isOpen={props.isOpen}
       width={optionWidth}

app/client/packages/design-system/widgets/src/components/Button/tests/Button.test.tsx

@@ -33,18 +33,16 @@ describe("@design-system/widgets/Button", () => {
     render(<Button isLoading />);
     expect(screen.getByRole("button")).toHaveAttribute("data-loading");
 
+    // eslint-disable-next-line testing-library/no-node-access
     const icon = screen.getByRole("button").querySelector("[data-icon]");
     expect(icon).toBeInTheDocument();
   });
 
   it("renders icon when passed", () => {
-    const { container } = render(<Button icon="star" />);
+    render(<Button icon="star" />);
     // Note: using testid=t--fallack-icon as the icon is rendered lazily and the fallback component
     // has a testid
-    const icon = container.querySelector(
+    const icon = screen.getByTestId("t--fallback-icon");
-      "button [data-testid='t--fallback-icon']",
-    ) as HTMLElement;
-
     expect(icon).toBeInTheDocument();
   });
 

app/client/packages/design-system/widgets/src/components/Checkbox/tests/Checkbox.test.tsx

@@ -27,7 +27,7 @@ describe("@design-system/widgets/Checkbox", () => {
     expect(screen.getByText("Click me")).toBeInTheDocument();
   });
 
-  it("should render uncontrolled checkbox", () => {
+  it("should render uncontrolled checkbox", async () => {
     render(
       <Checkbox defaultSelected onChange={onChangeSpy}>
         Checkbox
@@ -36,7 +36,7 @@ describe("@design-system/widgets/Checkbox", () => {
 
     const checkbox = screen.getByRole("checkbox");
     expect(checkbox).toBeChecked();
-    userEvent.click(checkbox);
+    await userEvent.click(checkbox);
     expect(onChangeSpy).toHaveBeenCalled();
     expect(screen.getByRole("checkbox")).not.toBeChecked();
   });
@@ -64,6 +64,7 @@ describe("@design-system/widgets/Checkbox", () => {
 
   it("should render indeterminate checkbox", () => {
     const { container } = render(<Checkbox isIndeterminate>Checkbox</Checkbox>);
+    // eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
     const label = container.querySelector("label") as HTMLElement;
     const checkbox = screen.getByRole("checkbox") as HTMLInputElement;
 
@@ -74,6 +75,7 @@ describe("@design-system/widgets/Checkbox", () => {
   it("should be able to render custom icon", () => {
     const { container } = render(<Checkbox icon={EmotionHappyLineIcon} />);
 
+    // eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
     const icon = container.querySelector("label [data-icon]") as HTMLElement;
     expect(icon).toBeInTheDocument();
   });

app/client/packages/design-system/widgets/src/components/CheckboxGroup/tests/CheckboxGroup.test.tsx

@@ -7,7 +7,7 @@ import { CheckboxGroup } from "../";
 import { Checkbox } from "../../Checkbox";
 
 describe("@design-system/widgets/CheckboxGroup", () => {
-  it("should render the checkbox group", () => {
+  it("should render the checkbox group", async () => {
     const { container } = render(
       <CheckboxGroup label="Checkbox Group">
         <Checkbox value="value-1">Value 1</Checkbox>
@@ -18,6 +18,7 @@ describe("@design-system/widgets/CheckboxGroup", () => {
     expect(screen.getByText("Value 1")).toBeInTheDocument();
     expect(screen.getByText("Value 2")).toBeInTheDocument();
 
+    // eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
     const label = container.querySelector("label") as HTMLElement;
     expect(label).toHaveTextContent("Checkbox Group");
 
@@ -32,22 +33,25 @@ describe("@design-system/widgets/CheckboxGroup", () => {
     expect(checkboxes[0]).not.toBeChecked();
     expect(checkboxes[1]).not.toBeChecked();
 
-    userEvent.click(checkboxes[0]);
+    await userEvent.click(checkboxes[0]);
     expect(checkboxes[0]).toBeChecked();
 
-    userEvent.click(checkboxes[1]);
+    await userEvent.click(checkboxes[1]);
     expect(checkboxes[1]).toBeChecked();
   });
 
   it("should support custom props", () => {
     render(
-      <CheckboxGroup data-testid="checkbox-group" label="Checkbox Group Label">
+      <CheckboxGroup
+        data-testid="t--checkbox-group"
+        label="Checkbox Group Label"
+      >
         <Checkbox value="value-1">Value 1</Checkbox>
         <Checkbox value="value-2">Value 2</Checkbox>
       </CheckboxGroup>,
     );
 
-    const checkboxGroup = screen.getByTestId("checkbox-group");
+    const checkboxGroup = screen.getByTestId("t--checkbox-group");
     expect(checkboxGroup).toBeInTheDocument();
   });
 
@@ -67,7 +71,7 @@ describe("@design-system/widgets/CheckboxGroup", () => {
     expect(checkboxes[1]).toBeChecked();
   });
 
-  it("should be able to fire onChange event", () => {
+  it("should be able to fire onChange event", async () => {
     const onChangeSpy = jest.fn();
 
     render(
@@ -78,7 +82,7 @@ describe("@design-system/widgets/CheckboxGroup", () => {
     );
 
     const checkboxes = screen.getAllByRole("checkbox");
-    userEvent.click(checkboxes[0]);
+    await userEvent.click(checkboxes[0]);
     expect(onChangeSpy).toHaveBeenCalled();
   });
 

app/client/packages/design-system/widgets/src/components/RadioGroup/tests/RadioGroup.test.tsx

@@ -7,7 +7,7 @@ import { RadioGroup } from "../";
 import { Radio } from "../../Radio";
 
 describe("@design-system/widgets/RadioGroup", () => {
-  it("should render the Radio group", () => {
+  it("should render the Radio group", async () => {
     const { container } = render(
       <RadioGroup label="Radio Group">
         <Radio value="value-1">Value 1</Radio>
@@ -18,6 +18,7 @@ describe("@design-system/widgets/RadioGroup", () => {
     expect(screen.getByText("Value 1")).toBeInTheDocument();
     expect(screen.getByText("Value 2")).toBeInTheDocument();
 
+    // eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
     const label = container.querySelector("label") as HTMLElement;
     expect(label).toHaveTextContent("Radio Group");
 
@@ -32,24 +33,24 @@ describe("@design-system/widgets/RadioGroup", () => {
     expect(options[0]).not.toBeChecked();
     expect(options[1]).not.toBeChecked();
 
-    userEvent.click(options[0]);
+    await userEvent.click(options[0]);
     expect(options[0]).toBeChecked();
 
-    userEvent.click(options[1]);
+    await userEvent.click(options[1]);
     expect(options[0]).not.toBeChecked();
     expect(options[1]).toBeChecked();
   });
 
   it("should support custom props", () => {
     render(
-      <RadioGroup data-testid="radio-group" label="Radio Group Label">
+      <RadioGroup data-testid="t--radio-group" label="Radio Group Label">
         <Radio value="value-1">Value 1</Radio>
         <Radio value="value-2">Value 2</Radio>
         <Radio value="value-3">Value 3</Radio>
       </RadioGroup>,
     );
 
-    const radioGroup = screen.getByTestId("radio-group");
+    const radioGroup = screen.getByTestId("t--radio-group");
     expect(radioGroup).toBeInTheDocument();
   });
 
@@ -66,7 +67,7 @@ describe("@design-system/widgets/RadioGroup", () => {
     expect(options[1]).not.toBeChecked();
   });
 
-  it("should be able to fire onChange event", () => {
+  it("should be able to fire onChange event", async () => {
     const onChangeSpy = jest.fn();
 
     render(
@@ -77,7 +78,7 @@ describe("@design-system/widgets/RadioGroup", () => {
     );
 
     const options = screen.getAllByRole("radio");
-    userEvent.click(options[0]);
+    await userEvent.click(options[0]);
     expect(onChangeSpy).toHaveBeenCalled();
   });
 

app/client/packages/design-system/widgets/src/components/Text/tests/Text.test.tsx

@@ -12,9 +12,10 @@ describe("@design-system/widgets/Text", () => {
   });
 
   it("should support custom props", () => {
-    const { container } = render(<Text data-testid="text">My Text</Text>);
+    const { container } = render(<Text data-testid="t--text">My Text</Text>);
 
+    // eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
     const text = container.querySelector("div") as HTMLElement;
-    expect(text).toHaveAttribute("data-testid", "text");
+    expect(text).toHaveAttribute("data-testid", "t--text");
   });
 });

app/client/packages/dsl/.eslintrc.json

@@ -4,6 +4,7 @@
   "rules": {
     "@typescript-eslint/strict-boolean-expressions": "off",
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/prefer-nullish-coalescing": "off"
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "testing-library/no-debugging-utils": "off"
   }
 }

app/client/packages/rts/.eslintrc.json

@@ -4,6 +4,7 @@
   "rules": {
     "@typescript-eslint/prefer-nullish-coalescing": "off",
     "@typescript-eslint/strict-boolean-expressions": "off",
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "off",
+    "testing-library/no-debugging-utils": "off"
   }
 }

app/client/src/components/editorComponents/AutoResizeTextArea.test.tsx

@@ -8,6 +8,7 @@ describe("<AutoResizeTextArea />", () => {
   describe("when autoResize is true", () => {
     it("it should render a proxy textarea", async () => {
       const tree = renderer.create(<AutoResizeTextArea autoResize />);
+      // eslint-disable-next-line testing-library/await-async-queries
       expect(tree.root.findAllByType("textarea").length).toBe(2);
     });
   });
@@ -15,6 +16,7 @@ describe("<AutoResizeTextArea />", () => {
   describe("when autoResize is false", () => {
     it("it should not render a proxy textarea if autoResize is false", async () => {
       const tree = renderer.create(<AutoResizeTextArea autoResize={false} />);
+      // eslint-disable-next-line testing-library/await-async-queries
       expect(tree.root.findAllByType("textarea").length).toBe(1);
     });
   });

app/client/src/components/editorComponents/CodeEditor/CodeEditor.test.tsx

@@ -39,6 +39,7 @@ describe("CodeEditor", () => {
     );
     const testInstance = testRenderer.root;
     expect(
+      // eslint-disable-next-line testing-library/await-async-queries
       testInstance.findByType(EvaluatedValuePopup).props.hideEvaluatedValue,
     ).toBe(false);
   });
@@ -67,6 +68,7 @@ describe("CodeEditor", () => {
     );
     const testInstance = testRenderer.root;
     expect(
+      // eslint-disable-next-line testing-library/await-async-queries
       testInstance.findByType(EvaluatedValuePopup).props.hideEvaluatedValue,
     ).toBe(true);
   });

app/client/src/components/editorComponents/CodeEditor/index.test.tsx

@@ -38,9 +38,9 @@ describe("<CodeEditor /> - Keyboard navigation", () => {
     </Provider>
   );
 
-  it("Pressing tab should focus the component", () => {
+  it("Pressing tab should focus the component", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
     expect(screen.getByTestId("code-editor-target")).toHaveFocus();
   });
 });

app/client/src/components/editorComponents/EditorContextProvider.test.tsx

@@ -56,7 +56,10 @@ describe("EditorContextProvider", () => {
     );
     const testInstance = testRenderer.root;
     const result = (
-      Object.keys(testInstance.findByType(TestChild).props.editorContext) || []
+      Object.keys(
+        // eslint-disable-next-line testing-library/await-async-queries
+        testInstance.findByType(TestChild).props.editorContext,
+      ) || []
     ).sort();
 
     expect(result).toEqual(expectedMethods);
@@ -92,7 +95,10 @@ describe("EditorContextProvider", () => {
     );
     const testInstance = testRenderer.root;
     const result = (
-      Object.keys(testInstance.findByType(TestChild).props.editorContext) || []
+      Object.keys(
+        // eslint-disable-next-line testing-library/await-async-queries
+        testInstance.findByType(TestChild).props.editorContext,
+      ) || []
     ).sort();
 
     expect(result).toEqual(expectedMethods);

app/client/src/components/formControls/DynamicInputTextControl.test.tsx

@@ -4,7 +4,7 @@ import DynamicInputTextControl from "./DynamicInputTextControl";
 import { reduxForm } from "redux-form";
 import { mockCodemirrorRender } from "test/__mocks__/CodeMirrorEditorMock";
 import userEvent from "@testing-library/user-event";
-import { waitFor } from "@testing-library/dom";
+import { waitFor } from "@testing-library/react";
 
 function TestForm(props: any) {
   return <div>{props.children}</div>;
@@ -17,6 +17,7 @@ const ReduxFormDecorator = reduxForm({
 
 describe("DynamicInputTextControl", () => {
   beforeEach(() => {
+    // eslint-disable-next-line testing-library/no-render-in-lifecycle
     mockCodemirrorRender();
   });
   it("renders correctly", () => {
@@ -38,10 +39,13 @@ describe("DynamicInputTextControl", () => {
       {},
     );
 
+    // eslint-disable-next-line testing-library/await-async-utils
     waitFor(async () => {
       const input = screen.getAllByText("My test value")[0];
-      userEvent.type(input, "New text");
+      // eslint-disable-next-line testing-library/no-wait-for-side-effects
+      await userEvent.type(input, "New text");
       await expect(screen.getAllByText("New text")).toHaveLength(2);
+      // eslint-disable-next-line testing-library/await-async-queries
       await expect(screen.findByText("My test value")).toBeNull();
     });
   });

app/client/src/components/propertyControls/ColorPickerComponentV2.test.tsx

@@ -82,67 +82,67 @@ describe("<ColorPicker />", () => {
 });
 
 describe("<ColorPicker /> - Keyboard Navigation", () => {
-  it("Pressing tab should focus the component", () => {
+  it("Pressing tab should focus the component", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
     expect(screen.getByRole("textbox")).toHaveFocus();
   });
 
-  it("Pressing {Enter} should open the colorpicker", () => {
+  it("Pressing {Enter} should open the colorpicker", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
     expect(screen.queryByTestId("color-picker")).toBeNull();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
-    expect(screen.queryByTestId("color-picker")).toBeInTheDocument();
+    expect(screen.getByTestId("color-picker")).toBeInTheDocument();
   });
 
   it("Pressing {Escape} should close the colorpicker", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
     expect(screen.queryByTestId("color-picker")).toBeNull();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
-    expect(screen.queryByTestId("color-picker")).toBeInTheDocument();
+    expect(screen.getByTestId("color-picker")).toBeInTheDocument();
-    userEvent.keyboard("{Escape}");
+    await userEvent.keyboard("{Escape}");
     await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
   });
 
-  it("Pressing {Tab} should shift sections in the colorpicker", () => {
+  it("Pressing {Tab} should shift sections in the colorpicker", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
 
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
     ).toHaveFocus();
 
-    userEvent.tab();
+    await userEvent.tab();
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
     ).toHaveFocus();
 
     // Back to first color
-    userEvent.tab();
+    await userEvent.tab();
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[0],
     ).toHaveFocus();
   });
 
-  it("Pressing {ArrowRight} should shift focus to color to the right", () => {
+  it("Pressing {ArrowRight} should shift focus to color to the right", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
 
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
 
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
     ).toHaveFocus();
 
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
 
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
@@ -150,76 +150,76 @@ describe("<ColorPicker /> - Keyboard Navigation", () => {
     ).toHaveFocus();
   });
 
-  it("Pressing {ArrowLeft} should shift focus to color to the left", () => {
+  it("Pressing {ArrowLeft} should shift focus to color to the left", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
 
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
 
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
     ).toHaveFocus();
 
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
 
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
         .parentElement?.childNodes[2],
     ).toHaveFocus();
 
-    userEvent.keyboard("{ArrowLeft}");
+    await userEvent.keyboard("{ArrowLeft}");
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
         .parentElement?.childNodes[1],
     ).toHaveFocus();
   });
 
-  it("Pressing {ArrowDown} should shift focus to color to the bottom", () => {
+  it("Pressing {ArrowDown} should shift focus to color to the bottom", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
 
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
 
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
     ).toHaveFocus();
 
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
         .parentElement?.childNodes[10],
     ).toHaveFocus();
   });
 
-  it("Pressing {ArrowUp} should shift focus to color to the top", () => {
+  it("Pressing {ArrowUp} should shift focus to color to the top", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
 
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
 
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1],
     ).toHaveFocus();
 
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
         .parentElement?.childNodes[21],
     ).toHaveFocus();
 
-    userEvent.keyboard("{ArrowUp}");
+    await userEvent.keyboard("{ArrowUp}");
     expect(
       document.querySelectorAll("[tabindex='0'].t--colorpicker-v2-color")[1]
         .parentElement?.childNodes[11],
@@ -229,12 +229,12 @@ describe("<ColorPicker /> - Keyboard Navigation", () => {
   it("Pressing {Enter} should select the color in focus", async () => {
     const onColorChange = jest.fn();
     render(getTestComponent(onColorChange));
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
     expect(onColorChange).toBeCalled();
     await waitForElementToBeRemoved(screen.queryByTestId("color-picker"));
   });

app/client/src/components/propertyControls/IconSelectControl.test.tsx

@@ -46,9 +46,9 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
     />
   );
 
-  it("Pressing tab should focus the component", () => {
+  it("Pressing tab should focus the component", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
     expect(screen.getByRole("button")).toHaveFocus();
   });
 
@@ -56,53 +56,53 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
     "Pressing '%s' should open the icon selector",
     async (key) => {
       render(getTestComponent());
-      userEvent.tab();
+      await userEvent.tab();
       expect(screen.queryByRole("list")).toBeNull();
-      userEvent.keyboard(key);
+      await userEvent.keyboard(key);
-      expect(screen.queryByRole("list")).toBeInTheDocument();
+      expect(screen.getByRole("list")).toBeInTheDocument();
 
       // Makes sure search bar is having focus
       await waitFor(() => {
-        expect(screen.queryByRole("textbox")).toHaveFocus();
+        expect(screen.getByRole("textbox")).toHaveFocus();
       }, waitForParamsForSearchFocus);
     },
   );
 
   it("Pressing '{Escape}' should close the icon selector", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
     expect(screen.queryByRole("list")).toBeNull();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
-    expect(screen.queryByRole("list")).toBeInTheDocument();
+    expect(screen.getByRole("list")).toBeInTheDocument();
-    userEvent.keyboard("{Escape}");
+    await userEvent.keyboard("{Escape}");
-    await waitForElementToBeRemoved(screen.getAllByRole("list"));
+    await waitForElementToBeRemoved(screen.queryByRole("list"));
   });
 
   it("Pressing '{ArrowDown}' while search is in focus should remove the focus", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
-    expect(screen.queryByRole("list")).toBeInTheDocument();
+    expect(screen.getByRole("list")).toBeInTheDocument();
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
-    expect(screen.queryByRole("textbox")).not.toHaveFocus();
+    expect(screen.getByRole("textbox")).not.toHaveFocus();
   });
 
   it("Pressing '{Shift} + {ArrowUp}' while search is not in focus should focus search box", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
-    expect(screen.queryByRole("list")).toBeInTheDocument();
+    expect(screen.getByRole("list")).toBeInTheDocument();
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
-    expect(screen.queryByRole("textbox")).not.toHaveFocus();
+    expect(screen.getByRole("textbox")).not.toHaveFocus();
-    userEvent.keyboard("{Shift}{ArrowUp}");
+    await userEvent.keyboard("{Shift}{ArrowUp}");
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
   });
 
@@ -115,18 +115,18 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
   */
   it("Pressing '{ArrowDown}' should navigate the icon selection downwards", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
     // used to shift the focus from search
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
 
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
@@ -134,25 +134,25 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
 
   it("Pressing '{ArrowUp}' should navigate the icon selection upwards", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
     // used to shift the focus from search
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
 
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
 
-    userEvent.keyboard("{ArrowUp}");
+    await userEvent.keyboard("{ArrowUp}");
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
@@ -160,18 +160,18 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
 
   it("Pressing '{ArrowRight}' should navigate the icon selection towards right", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
     // used to shift the focus from search
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
 
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
@@ -179,25 +179,25 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
 
   it("Pressing '{ArrowLeft}' should navigate the icon selection towards left", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
     // used to shift the focus from search
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
 
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
 
-    userEvent.keyboard("{ArrowLeft}");
+    await userEvent.keyboard("{ArrowLeft}");
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
@@ -206,41 +206,39 @@ describe("<IconSelectControl /> - Keyboard navigation", () => {
   it("Pressing '{Enter}' or ' ' should select the icon", async () => {
     const handleOnSelect = jest.fn();
     render(getTestComponent(handleOnSelect));
-    userEvent.tab();
+    await userEvent.tab();
-    expect(screen.queryByRole("button")?.textContent).toEqual(
+    expect(screen.getByRole("button")?.textContent).toEqual("(none)caret-down");
-      "(none)caret-down",
+    await userEvent.keyboard("{Enter}");
-    );
-    userEvent.keyboard("{Enter}");
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
     // used to shift the focus from search
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
 
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
-    userEvent.keyboard(" ");
+    await userEvent.keyboard(" ");
     expect(handleOnSelect).toHaveBeenCalledTimes(1);
     expect(handleOnSelect.mock.calls[0]).toMatchSnapshot();
-    await waitForElementToBeRemoved(screen.getByRole("list"));
+    await waitForElementToBeRemoved(screen.queryByRole("list"));
 
-    userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Enter}");
-    expect(screen.queryByRole("list")).toBeInTheDocument();
+    expect(screen.getByRole("list")).toBeInTheDocument();
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
     ).toMatchSnapshot();
-    userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
-    userEvent.keyboard("{ArrowRight}");
+    await userEvent.keyboard("{ArrowRight}");
-    userEvent.keyboard(" ");
+    await userEvent.keyboard(" ");
     expect(handleOnSelect).toHaveBeenCalledTimes(2);
     expect(handleOnSelect.mock.calls[1]).toMatchSnapshot();
   });
@@ -269,13 +267,11 @@ describe("<IconSelectControl /> - (none) icon", () => {
 
   it("Should display (none) icon when hideNoneIcon property is false/undefined", async () => {
     render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
-    expect(screen.queryByRole("button")?.textContent).toEqual(
+    expect(screen.getByRole("button")?.textContent).toEqual("(none)caret-down");
-      "(none)caret-down",
+    await userEvent.keyboard("{Enter}");
-    );
-    userEvent.keyboard("{Enter}");
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,
@@ -287,13 +283,11 @@ describe("<IconSelectControl /> - (none) icon", () => {
 
   it("Should not display (none) icon when hideNoneIcon property is true", async () => {
     render(getTestComponent(true));
-    userEvent.tab();
+    await userEvent.tab();
-    expect(screen.queryByRole("button")?.textContent).toEqual(
+    expect(screen.getByRole("button")?.textContent).toEqual("(none)caret-down");
-      "(none)caret-down",
+    await userEvent.keyboard("{Enter}");
-    );
-    userEvent.keyboard("{Enter}");
     await waitFor(() => {
-      expect(screen.queryByRole("textbox")).toHaveFocus();
+      expect(screen.getByRole("textbox")).toHaveFocus();
     }, waitForParamsForSearchFocus);
     expect(
       document.querySelector("a.bp3-active")?.children[0].classList,

app/client/src/layoutSystems/common/dropTarget/DragLayerComponent.test.tsx

@@ -40,6 +40,7 @@ describe("DragLayerComponent", () => {
     );
     const testInstance = testRenderer.root;
 
+    // eslint-disable-next-line testing-library/await-async-queries
     expect(testInstance.findByType(DragLayerComponent).props.noPad).toBe(true);
   });
 });

app/client/src/pages/AdminSettings/FormGroup/Accordion.test.tsx

@@ -83,6 +83,6 @@ describe("Accordion", () => {
     expect(document.querySelector("[name='expand-more']")).toBeDefined();
     document.querySelector("hr")?.click();
     expect(document.querySelector("[name='expand-less']")).toBeDefined();
-    expect(screen.queryByTestId("admin-settings-group-wrapper")).toBeDefined();
+    expect(screen.getByTestId("admin-settings-group-wrapper")).toBeDefined();
   });
 });

app/client/src/pages/AppViewer/PrimaryCTA.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, cleanup } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { Provider } from "react-redux";
 import { ThemeProvider } from "styled-components";
@@ -155,8 +155,6 @@ export const fetchApplicationMockResponse = {
 };
 
 describe("App viewer fork button", () => {
-  afterEach(cleanup);
-
   it("Fork modal trigger should not be displayed until user details are fetched", () => {
     render(
       <Provider store={getStore()}>

app/client/src/pages/Editor/Explorer/Libraries/__tests__/Installer.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { Provider } from "react-redux";
 import store from "store";
@@ -48,7 +48,6 @@ describe("Contains all UI tests for JS libraries", () => {
     type: ReduxActionTypes.TOGGLE_INSTALLER,
     payload: true,
   });
-  afterEach(cleanup);
 
   it("Headers should exist", () => {
     render(
@@ -80,7 +79,7 @@ describe("Contains all UI tests for JS libraries", () => {
     expect(screen.getByTestId("install-library-btn")).toBeEnabled();
     expect(screen.queryByText("Please enter a valid URL")).toBeNull();
     fireEvent.change(input, { target: { value: "23" } });
-    expect(screen.queryByText("Please enter a valid URL")).toBeDefined();
+    expect(screen.getByText("Please enter a valid URL")).toBeDefined();
     expect(screen.getByTestId("install-library-btn")).toBeDisabled();
   });
 
@@ -113,6 +112,7 @@ describe("Contains all UI tests for JS libraries", () => {
     fireEvent.click(installButton);
 
     expect(
+      // eslint-disable-next-line testing-library/prefer-presence-queries
       screen.queryByText(
         `Installing library for ${fetchApplicationMockResponse.data.application.name}`,
       ),
@@ -136,6 +136,7 @@ describe("Contains all UI tests for JS libraries", () => {
     });
 
     expect(
+      // eslint-disable-next-line testing-library/prefer-presence-queries
       screen.queryByText(
         `Installing library for ${fetchApplicationMockResponse.data.application.name}`,
       ),

app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx

@@ -268,7 +268,7 @@ describe("Cut/Copy/Paste hotkey", () => {
       </MockPageDSL>,
       { initialState: store.getState(), sagasToRun: sagasToRunForTests },
     );
-    const artBoard: any = await component.queryByTestId("t--canvas-artboard");
+    const artBoard: any = component.queryByTestId("t--canvas-artboard");
     // deselect all other widgets
     fireEvent.click(artBoard);
     act(() => {
@@ -358,7 +358,7 @@ describe("Cut/Copy/Paste hotkey", () => {
         </GlobalHotKeys>
       </MockPageDSL>,
     );
-    const artBoard: any = await component.queryByTestId("t--canvas-artboard");
+    const artBoard: any = component.queryByTestId("t--canvas-artboard");
     // deselect all other widgets
     fireEvent.click(artBoard);
     act(() => {

app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx

@@ -23,7 +23,7 @@ const FileTabs = (props: Props) => {
   const currentEntity = identifyEntityFromPath(location.pathname);
 
   return (
-    <Flex data-test-id="editor-tabs" flex="1" gap="spaces-2" height="100%">
+    <Flex data-testid="editor-tabs" flex="1" gap="spaces-2" height="100%">
       {tabs.map((tab: EntityItem) => (
         <StyledTab
           className={clsx(

app/client/src/pages/Editor/MainContainerWidthToggles.test.tsx

@@ -9,9 +9,9 @@ import { lightTheme } from "selectors/themeSelectors";
 import store from "store";
 import { MainContainerWidthToggles } from "./MainContainerWidthToggles";
 
-function navigateWithArrowKeys(key: string, noOfPresses: number) {
+async function navigateWithArrowKeys(key: string, noOfPresses: number) {
   for (let i = 0; i < noOfPresses; i++) {
-    userEvent.keyboard(key);
+    await userEvent.keyboard(key);
   }
 }
 
@@ -24,9 +24,9 @@ describe("<MainContainerWidthToggles />", () => {
     </ThemeProvider>
   );
 
-  it("Pressing tab should focus on the first component", () => {
+  it("Pressing tab should focus on the first component", async () => {
     const { container } = render(getTestComponent());
-    userEvent.tab();
+    await userEvent.tab();
 
     // Should focus on the first component
     const tab = container.getElementsByClassName(
@@ -35,21 +35,21 @@ describe("<MainContainerWidthToggles />", () => {
     expect(tab).toHaveFocus();
   });
 
-  it("{ArrowRight} should focus the next item", () => {
+  it("{ArrowRight} should focus the next item", async () => {
     const { container } = render(getTestComponent());
     const tabs = container.getElementsByClassName(
       "ads-v2-segmented-control__segments-container",
     );
-    userEvent.tab();
+    await userEvent.tab();
 
-    navigateWithArrowKeys("{ArrowRight}", 1);
+    await navigateWithArrowKeys("{ArrowRight}", 1);
     expect(tabs[1]).toHaveFocus();
 
     // Focus back on the first element
-    userEvent.keyboard("{ArrowLeft}");
+    await userEvent.keyboard("{ArrowLeft}");
 
     // Arrow Right after the last item should focus the first item again
-    navigateWithArrowKeys("{ArrowRight}", tabs.length);
+    await navigateWithArrowKeys("{ArrowRight}", tabs.length);
     expect(tabs[0]).toHaveFocus();
   });
 
@@ -59,13 +59,13 @@ describe("<MainContainerWidthToggles />", () => {
       "ads-v2-segmented-control__segments-container",
     );
 
-    userEvent.tab();
+    await userEvent.tab();
 
     // Arrow Left on the First item should focus on the last item
-    navigateWithArrowKeys("{ArrowLeft}", 1);
+    await navigateWithArrowKeys("{ArrowLeft}", 1);
     expect(tabs[tabs.length - 1]).toHaveFocus();
 
-    navigateWithArrowKeys("{ArrowLeft}", tabs.length - 1);
+    await navigateWithArrowKeys("{ArrowLeft}", tabs.length - 1);
 
     expect(tabs[0]).toHaveFocus();
   });

app/client/src/pages/Editor/gitSync/GitSettingsModal/index.test.tsx

@@ -64,11 +64,11 @@ const renderComponent = (store: MockStoreEnhanced<unknown, any>) => {
 describe("Git Settings Modal", () => {
   it("is rendered properly", () => {
     const store = mockStore(createInitialState());
-    const { queryByTestId } = renderComponent(store);
+    const { getByTestId } = renderComponent(store);
-    expect(queryByTestId("t--git-settings-modal")).toBeTruthy();
+    expect(getByTestId("t--git-settings-modal")).toBeTruthy();
-    expect(queryByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
+    expect(getByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
-    expect(queryByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).toBeTruthy();
+    expect(getByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).toBeTruthy();
-    expect(queryByTestId(`t--tab-${GitSettingsTab.CD}`)).toBeTruthy();
+    expect(getByTestId(`t--tab-${GitSettingsTab.CD}`)).toBeTruthy();
   });
 
   it("is not rendering branch tab when neither of the features are enabled", () => {
@@ -81,11 +81,11 @@ describe("Git Settings Modal", () => {
       return newState;
     });
     const store = mockStore(initialState);
-    const { queryByTestId } = renderComponent(store);
+    const { getByTestId, queryByTestId } = renderComponent(store);
-    expect(queryByTestId("t--git-settings-modal")).toBeTruthy();
+    expect(getByTestId("t--git-settings-modal")).toBeTruthy();
-    expect(queryByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
+    expect(getByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
     expect(queryByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).not.toBeTruthy();
-    expect(queryByTestId(`t--tab-${GitSettingsTab.CD}`)).toBeTruthy();
+    expect(getByTestId(`t--tab-${GitSettingsTab.CD}`)).toBeTruthy();
   });
 
   it("is not rendering CD when feature flag is not enabled", () => {
@@ -98,10 +98,10 @@ describe("Git Settings Modal", () => {
       return newState;
     });
     const store = mockStore(initialState);
-    const { queryByTestId } = renderComponent(store);
+    const { getByTestId, queryByTestId } = renderComponent(store);
-    expect(queryByTestId("t--git-settings-modal")).toBeTruthy();
+    expect(getByTestId("t--git-settings-modal")).toBeTruthy();
-    expect(queryByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
+    expect(getByTestId(`t--tab-${GitSettingsTab.GENERAL}`)).toBeTruthy();
-    expect(queryByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).toBeTruthy();
+    expect(getByTestId(`t--tab-${GitSettingsTab.BRANCH}`)).toBeTruthy();
     expect(queryByTestId(`t--tab-${GitSettingsTab.CD}`)).not.toBeTruthy();
   });
 });

app/client/src/pages/Editor/gitSync/QuickGitActions/BranchButton.test.tsx

@@ -5,7 +5,7 @@ import React from "react";
 describe("BranchButton", () => {
   it("renders properly", async () => {
     render(<BranchButton />);
-    const currentBranch = await screen.queryByTestId(
+    const currentBranch = screen.queryByTestId(
       "t--branch-button-currentBranch",
     );
     expect(currentBranch?.innerHTML).toContain("*");

app/client/src/pages/Editor/gitSync/Tabs/__tests__/ConnectionSuccess.test.tsx

@@ -39,18 +39,16 @@ jest.mock("react-redux", () => {
 describe("Connection Success Modal", () => {
   it("is rendered properly", () => {
     const store = mockStore(initialState);
-    const { queryByTestId } = render(
+    const { getByTestId } = render(
       <Provider store={store}>
         <ConnectionSuccess />
       </Provider>,
     );
-    expect(queryByTestId("t--git-success-modal-body")).toBeTruthy();
+    expect(getByTestId("t--git-success-modal-body")).toBeTruthy();
     expect(
-      queryByTestId("t--git-success-modal-start-using-git-cta"),
+      getByTestId("t--git-success-modal-start-using-git-cta"),
-    ).toBeTruthy();
-    expect(
-      queryByTestId("t--git-success-modal-open-settings-cta"),
     ).toBeTruthy();
+    expect(getByTestId("t--git-success-modal-open-settings-cta")).toBeTruthy();
   });
 
   it("go to settings cta button is working", () => {

app/client/src/pages/Editor/gitSync/components/BetaTag.test.tsx

@@ -6,7 +6,7 @@ import "jest-styled-components";
 describe("BetaTag", () => {
   it("renders properly", async () => {
     render(<BetaTag />);
-    const actual = await screen.queryByTestId("t--beta-tag");
+    const actual = screen.queryByTestId("t--beta-tag");
 
     // renders
     expect(actual).not.toBeNull();

app/client/src/pages/Editor/gitSync/components/ConflictInfo.test.tsx

@@ -13,15 +13,15 @@ describe("ConflictInfo", () => {
 
     // check for existence
     [
-      await screen.queryByTestId("t--conflict-info-container"),
+      screen.queryByTestId("t--conflict-info-container"),
-      await screen.queryByTestId("t--conflict-info-error-warning"),
+      screen.queryByTestId("t--conflict-info-error-warning"),
     ].every((query) => {
       expect(query).not.toBeNull();
       return true;
     });
 
     //check for text
-    const container = await screen.getByTestId("t--conflict-info-container");
+    const container = screen.getByTestId("t--conflict-info-container");
     const html = container.innerHTML.toString();
     expect(html.includes("Learn more")).toBeTruthy();
     expect(html.includes("Open repository")).toBeTruthy();

app/client/src/pages/Editor/gitSync/components/DefaultTag.test.tsx

@@ -6,7 +6,7 @@ import "jest-styled-components";
 describe("DefaultTag", () => {
   it("renders properly", async () => {
     render(<DefaultTag />);
-    const actual = await screen.queryByTestId("t--default-tag");
+    const actual = screen.queryByTestId("t--default-tag");
 
     // renders
     expect(actual).not.toBeNull();

app/client/src/pages/Editor/gitSync/components/RemoteBranchList.test.tsx

@@ -7,7 +7,7 @@ describe("RemoteBranchList", function () {
   it("renders nothing when param:remoteBranches is an empty array", async () => {
     render(RemoteBranchList([], () => undefined));
 
-    const renderedList = await screen.queryByTestId(
+    const renderedList = screen.queryByTestId(
       "t--git-remote-branch-list-container",
     );
     expect(renderedList?.innerHTML).toBeFalsy();
@@ -24,7 +24,7 @@ describe("RemoteBranchList", function () {
     expect(renderedList?.children.length).toEqual(2);
 
     // contains styled segment header
-    const header = await screen.queryByTestId("t--branch-list-header-local");
+    const header = screen.queryByTestId("t--branch-list-header-local");
     expect(header).not.toBeNull();
     expect(header?.innerHTML.includes("Remote branches")).toBeTruthy();
   });

app/client/src/pages/setup/SetupForm.test.tsx

@@ -9,17 +9,17 @@ function renderComponent() {
 }
 
 describe("SetupForm", () => {
-  it("If the form is in invalid state pressing enter should not submit the form", () => {
+  it("If the form is in invalid state pressing enter should not submit the form", async () => {
     renderComponent();
     const verifyPassword = screen.getByTestId("verifyPassword");
     const formPage = screen.getByTestId("formPage");
     expect(verifyPassword).toHaveAttribute("name");
-    userEvent.keyboard("{enter}");
+    await userEvent.keyboard("{enter}");
     // This attribute is removed in onsubmit
     expect(verifyPassword).toHaveAttribute("name");
     expect(formPage).toHaveClass("block");
   });
-  it("If the form is in valid state pressing enter should nagivate to next page", () => {
+  it("If the form is in valid state pressing enter should nagivate to next page", async () => {
     renderComponent();
     const formPage = screen.getByTestId("formPage");
     expect(formPage).toHaveClass("block");
@@ -33,7 +33,7 @@ describe("SetupForm", () => {
     fireEvent.change(password, { target: { value: "Test@123" } });
     const verifyPassword = screen.getByTestId("verifyPassword");
     fireEvent.change(verifyPassword, { target: { value: "Test@123" } });
-    userEvent.keyboard("{enter}");
+    await userEvent.keyboard("{enter}");
     expect(formPage).toHaveClass("hidden");
   });
 });

app/client/src/widgets/ChartWidget/component/index.test.tsx

@@ -234,7 +234,7 @@ describe("Chart Widget", () => {
 
     expect(mockCallback.mock.calls.length).toEqual(0);
     const el = await screen.findByText("1000");
-    userEvent.click(el);
+    await userEvent.click(el);
     expect(mockCallback.mock.calls.length).toEqual(1);
   });
 });

app/client/src/widgets/DividerWidget/widget/index.test.tsx

@@ -86,14 +86,14 @@ describe("<DividerWidget />", () => {
   }
 
   test("should render Divider widget horizontal by default", async () => {
-    const { queryByTestId } = renderDividerWidget();
+    const { getByTestId } = renderDividerWidget();
 
-    expect(queryByTestId("dividerHorizontal")).toBeTruthy();
+    expect(getByTestId("dividerHorizontal")).toBeTruthy();
   });
 
   test("should render Divider vertical", async () => {
-    const { queryByTestId } = renderDividerWidget({ orientation: "vertical" });
+    const { getByTestId } = renderDividerWidget({ orientation: "vertical" });
 
-    expect(queryByTestId("dividerVertical")).toBeTruthy();
+    expect(getByTestId("dividerVertical")).toBeTruthy();
   });
 });

app/client/src/widgets/TabsWidget/widget/index.test.tsx

@@ -3,6 +3,7 @@ import {
   widgetCanvasFactory,
 } from "test/factories/WidgetFactoryUtils";
 import { render, fireEvent } from "test/testUtils";
+import { screen } from "@testing-library/react";
 import * as widgetRenderUtils from "utils/widgetRenderUtils";
 import * as dataTreeSelectors from "selectors/dataTreeSelectors";
 import * as editorSelectors from "selectors/editorSelectors";
@@ -30,13 +31,13 @@ describe("Tabs widget functional cases", () => {
     const dsl: any = widgetCanvasFactory.build({
       children,
     });
-    const component = render(
+    render(
       <MockPageDSL dsl={dsl}>
         <Canvas canvasWidth={dsl.rightColumn} widgetsStructure={dsl} />
       </MockPageDSL>,
     );
-    const tab1 = component.queryByText("Tab 1");
+    const tab1 = screen.queryByText("Tab 1");
-    const tab2 = component.queryByText("Tab 2");
+    const tab2 = screen.queryByText("Tab 2");
     expect(tab1).toBeDefined();
     expect(tab2).toBeDefined();
   });

app/client/yarn.lock

@@ -12022,7 +12022,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:^5.10.0, @typescript-eslint/utils@npm:^5.13.0, @typescript-eslint/utils@npm:^5.45.0":
+"@typescript-eslint/utils@npm:^5.10.0, @typescript-eslint/utils@npm:^5.13.0, @typescript-eslint/utils@npm:^5.45.0, @typescript-eslint/utils@npm:^5.58.0":
   version: 5.62.0
   resolution: "@typescript-eslint/utils@npm:5.62.0"
   dependencies:
@@ -13219,6 +13219,7 @@ __metadata:
     eslint-plugin-react-hooks: ^4.6.0
     eslint-plugin-sort-destructure-keys: ^1.5.0
     eslint-plugin-storybook: ^0.6.15
+    eslint-plugin-testing-library: ^6.2.0
     esm: ^3.2.25
     factory.ts: ^0.5.1
     fast-deep-equal: ^3.1.3
@@ -18713,6 +18714,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-testing-library@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "eslint-plugin-testing-library@npm:6.2.0"
+  dependencies:
+    "@typescript-eslint/utils": ^5.58.0
+  peerDependencies:
+    eslint: ^7.5.0 || ^8.0.0
+  checksum: 7af7e0a1eee44c6ba65ce2ae99f8e46ce709a319f4cce778bb0af2dda5828d78f3a81e8989c7b691a8b9b9fef102b56136209aac700038b9e64794600b0d12db
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"