Skip to content

Commit

Permalink
React: Update vitest imports (#28270)
Browse files Browse the repository at this point in the history
* chore: Update vitest imports

* chore: Refactor CustomButton test with proper indentations
  • Loading branch information
mathdebate09 authored Jun 25, 2024
1 parent 5084af2 commit 9d323c0
Showing 1 changed file with 19 additions and 19 deletions.
38 changes: 19 additions & 19 deletions react/react_testing/mocking_callbacks_and_components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
```

Expand Down

0 comments on commit 9d323c0

Please sign in to comment.