Skip to content

Cleanup - fewer deps, nicer tests. #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HowToTestFrontend merged 2 commits into from
Dec 7, 2025
Merged

Cleanup - fewer deps, nicer tests. #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f7bf67
clean up - remove unused dep (@vitest/browser is a sub dependency of …
HowToTestFrontend Dec 7, 2025
dc413db
clean up - simpler tests
HowToTestFrontend Dec 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 35 additions & 26 deletions app/page.browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@ describe('Main app page (vitest browser mode)', () => {
test('renders header', async () => {
const screen = await render(<HomePage />);

await expect
.element(screen.getByRole('heading', { name: 'Welcome to this sample app' }))
.toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Welcome to this sample app' })).toBeInTheDocument();

// if you needed retrying, you could do this:
// await expect
// .element(screen.getByRole('heading', { name: 'Welcome to this sample app' }))
// .toBeInTheDocument();
});

describe('counter', () => {
Expand All @@ -18,17 +21,21 @@ describe('Main app page (vitest browser mode)', () => {
const decrementButton = screen.getByText('-');
const counterDisplay = screen.getByTestId('counter-display');

await expect.element(counterDisplay).toHaveTextContent('0');
expect(counterDisplay).toHaveTextContent('0');
// or:
// await expect.element(counterDisplay).toHaveTextContent('0');

await incrementButton.click();

await expect.element(counterDisplay).toHaveTextContent('1');
expect(counterDisplay).toHaveTextContent('1');
// or:
//await expect.element(counterDisplay).toHaveTextContent('1');

await decrementButton.click();
await expect.element(counterDisplay).toHaveTextContent('0');
expect(counterDisplay).toHaveTextContent('0');

await decrementButton.click();
await expect.element(counterDisplay).toHaveTextContent('-1');
expect(counterDisplay).toHaveTextContent('-1');
});
});

Expand All @@ -43,25 +50,25 @@ describe('Main app page (vitest browser mode)', () => {

const totalItems = screen.getByText('Total items', { exact: false });

await expect.element(totalItems).toHaveTextContent('Total items: 1');
expect(totalItems).toHaveTextContent('Total items: 1');

await input.fill('dog');
await addButton.click();

await expect.element(totalItems).toHaveTextContent('Total items: 2');
expect(totalItems).toHaveTextContent('Total items: 2');

const firstRow = screen.getByTestId('item-0');
await expect.element(firstRow).toHaveTextContent('cat');
expect(firstRow).toHaveTextContent('cat');

// no need to call within(firstRow) in Browser mode - you can query directly on the object
const removeCatButton = firstRow.getByRole('button');
await expect.element(removeCatButton).toHaveTextContent('Remove');
expect(removeCatButton).toHaveTextContent('Remove');

await expect.element(screen.getByText('cat', { exact: false })).toBeInTheDocument();
expect(screen.getByText('cat', { exact: false })).toBeInTheDocument();

await removeCatButton.click();

await expect.element(screen.getByText('cat', { exact: false })).not.toBeInTheDocument();
expect(screen.getByText('cat', { exact: false })).not.toBeInTheDocument();
});
});

Expand All @@ -77,34 +84,36 @@ describe('Main app page (vitest browser mode)', () => {
const toggleContent2 = screen.getByTestId('toggle-content-2');

// it starts off visible:
await expect.element(toggleButton).toHaveTextContent('Hide Content');
await expect.element(toggleContent1).toBeInTheDocument();
await expect.element(toggleContent1).toBeVisible();
await expect.element(toggleContent2).toBeInTheDocument();
await expect.element(toggleContent2).toBeVisible();
expect(toggleButton).toHaveTextContent('Hide Content');
expect(toggleContent1).toBeInTheDocument();
expect(toggleContent1).toBeVisible();
expect(toggleContent2).toBeInTheDocument();
expect(toggleContent2).toBeVisible();

// Click to hide
await toggleButton.click();

await expect.element(toggleButton).toHaveTextContent('Show Content');
expect(toggleButton).toHaveTextContent('Show Content');

// check the contet is not visible:
expect(screen.getByTestId('toggle-content-1')).not.toBeInTheDocument();

await expect.element(screen.getByTestId('toggle-content-1').query()).toBeNull();
// the second content div should still be in the dom
// but hidden with css... we can test that the hidden class is there
// and in browser mode, we can actually test visibility properly
await expect.element(toggleContent2).toHaveClass('hidden');
await expect.element(toggleContent2).toBeInTheDocument();
expect(toggleContent2).toHaveClass('hidden');
expect(toggleContent2).toBeInTheDocument();

// BTW this only works as the `hidden` class name from tailwind is added, and in vitest.browser.setup.ts
// we include the css! without it, there is no display:none style applied.
await expect.element(toggleContent2).not.toBeVisible(); // ✅ this works in browser mode!
expect(toggleContent2).not.toBeVisible(); // ✅ this works in browser mode!

// Click to show again
await toggleButton.click();

await expect.element(toggleButton).toHaveTextContent('Hide Content');
await expect.element(screen.getByTestId('toggle-content-1')).toBeInTheDocument();
await expect.element(toggleContent2).not.toHaveClass('hidden');
expect(toggleButton).toHaveTextContent('Hide Content');
expect(screen.getByTestId('toggle-content-1')).toBeInTheDocument();
expect(toggleContent2).not.toHaveClass('hidden');
});
});
});
8 changes: 4 additions & 4 deletions app/self-contained-test.browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ const CounterComponent = (): React.ReactElement => {
it('should let you increment ', async () => {
render(<CounterComponent />);

// everything is promise based:
await expect.element(page.getByRole('heading')).toHaveTextContent('Count: 0');
expect(page.getByRole('heading')).toHaveTextContent('Count: 0');

// get an element, then call .click() on it directly:
const button = await page.getByRole('button');
const button = page.getByRole('button');
await button.click();

await expect.element(page.getByRole('heading')).toHaveTextContent('Count: 1');
expect(page.getByRole('heading')).toHaveTextContent('Count: 1');
// await expect.element(page.getByRole('heading')).toHaveTextContent('Count: 1');
});
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
"@types/react": "^19",
"@types/react-dom": "^19",
"@vitejs/plugin-react": "^5.1.1",
"@vitest/browser": "^4.0.13",
"@vitest/browser-playwright": "^4.0.13",
"@vitest/ui": "^4.0.13",
"eslint": "^9",
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1351,7 +1351,7 @@
"@vitest/mocker" "4.0.14"
tinyrainbow "^3.0.3"

"@vitest/browser@4.0.14", "@vitest/browser@^4.0.13":
"@vitest/browser@4.0.14":
version "4.0.14"
resolved "https://registry.yarnpkg.com/@vitest/browser/-/browser-4.0.14.tgz#12b577e027ff09cbcc3c9395f44ae7df73543b3b"
integrity sha512-vO0uqR8SnPTd8ykp14yaIuUyMZ9HEBYuoZrVdUp7RrEp76VEnkrX9fDkGnK0NyBdfWXB6cqp7BmqVekd8yKHFQ==
Expand Down