From 9d323c0f314c1b1550f6e9537e90d5ae88b5faad Mon Sep 17 00:00:00 2001
From: Jay <learn.jayssingh@gmail.com>
Date: Tue, 25 Jun 2024 15:35:04 +0530
Subject: [PATCH] React: Update vitest imports (#28270)

* chore: Update vitest imports

* chore: Refactor CustomButton test with proper indentations
---
 .../mocking_callbacks_and_components.md       | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/react/react_testing/mocking_callbacks_and_components.md b/react/react_testing/mocking_callbacks_and_components.md
index a509c3e428d..d54a7fe8a4e 100644
--- a/react/react_testing/mocking_callbacks_and_components.md
+++ b/react/react_testing/mocking_callbacks_and_components.md
@@ -37,38 +37,38 @@ Nothing fancy. `CustomButton` is a component with a prop passed in. We're intere
 ```jsx
 // CustomButton.test.jsx
 
-import { vi } from 'vitest'
+import { vi, describe, it, expect } from 'vitest'
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import CustomButton from "./CustomButton";
 
 describe("CustomButton", () => {
-    it("should render a button with the text 'Click me'", () => {
-        render(<CustomButton onClick={() => {}} />);
+  it("should render a button with the text 'Click me'", () => {
+    render(<CustomButton onClick={() => {}} />);
 
-        const button = screen.getByRole("button", { name: "Click me" });
+    const button = screen.getByRole("button", { name: "Click me" });
 
-        expect(button).toBeInTheDocument();
-    });
+    expect(button).toBeInTheDocument();
+  });
   
-    it("should call the onClick function when clicked", async () => {
-        const onClick = vi.fn();
-        const user = userEvent.setup()
-        render(<CustomButton onClick={onClick} />);
+  it("should call the onClick function when clicked", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup()
+    render(<CustomButton onClick={onClick} />);
 
-        const button = screen.getByRole("button", { name: "Click me" });
+    const button = screen.getByRole("button", { name: "Click me" });
 
-        await user.click(button);
+    await user.click(button);
 
-        expect(onClick).toHaveBeenCalled();
-    });
+    expect(onClick).toHaveBeenCalled();
+  });
 
-    it("should not call the onClick function when it isn't clicked", async () => {
-        const onClick = vi.fn();
-        render(<CustomButton onClick={onClick} />);
+  it("should not call the onClick function when it isn't clicked", async () => {
+    const onClick = vi.fn();
+    render(<CustomButton onClick={onClick} />);
 
-        expect(onClick).not.toHaveBeenCalled();
-    });
+    expect(onClick).not.toHaveBeenCalled();
+  });
 });
 ```