fix(empty-state) test improvements following code review

src/components/EmptyState/EmptyState.test.tsx

@@ -1,45 +1,46 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 
 import EmptyState from "./EmptyState";
 
 describe("EmptyState ", () => {
   it("renders the title", () => {
-    const { container } = render(
-      <EmptyState title="Test title" image={<img alt="" src="" />} />
-    );
-    expect(container).toContainHTML("Test title");
+    render(<EmptyState title="Test title" image={<img alt="" src="" />} />);
+    expect(
+      screen.getByRole("heading", { name: "Test title" })
+    ).toBeInTheDocument();
   });
 
   it("renders the image", () => {
-    const { container } = render(
+    render(
       <EmptyState
         title="Test title"
         image={<img alt="" src="path/to/image" />}
       />
     );
-    expect(container).toContainHTML("path/to/image");
+    expect(screen.getByRole("img")).toHaveAttribute("src", "path/to/image");
   });
 
   it("renders the content", () => {
-    const { container } = render(
+    render(
       <EmptyState title="Test title" image={<img alt="" src="" />}>
         Empty
       </EmptyState>
     );
-    expect(container).toContainHTML("Empty");
+    expect(screen.getByText("Empty")).toBeInTheDocument();
   });
 
   it("passes extra classes to the wrapping element", async () => {
-    const { container } = render(
+    render(
       <EmptyState
         title="Test title"
         image={<img alt="" src="" />}
         className="extra-class"
+        data-testid="wrapper"
       >
         Empty
       </EmptyState>
     );
-    expect(container).toContainHTML('div class="extra-class"');
+    expect(screen.getByTestId("wrapper")).toHaveClass("extra-class");
   });
 });