From 8f7bf677969b4f1234a45d2503dd981ae45ed8c5 Mon Sep 17 00:00:00 2001 From: HowToTestFrontend <218445345+HowToTestFrontend@users.noreply.github.com> Date: Sun, 7 Dec 2025 19:53:51 +0000 Subject: [PATCH 1/2] clean up - remove unused dep (@vitest/browser is a sub dependency of @vitest/browser-playwright anyway) --- package.json | 1 - yarn.lock | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index a781e4f..aa70651 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 4ae225a..502d48a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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== From dc413db876f07b0bd46b8c496b1cc4ec2b0fa62a Mon Sep 17 00:00:00 2001 From: HowToTestFrontend <218445345+HowToTestFrontend@users.noreply.github.com> Date: Sun, 7 Dec 2025 20:01:06 +0000 Subject: [PATCH 2/2] clean up - simpler tests --- app/page.browser.tsx | 61 +++++++++++++++++------------ app/self-contained-test.browser.tsx | 8 ++-- 2 files changed, 39 insertions(+), 30 deletions(-) diff --git a/app/page.browser.tsx b/app/page.browser.tsx index 912e5df..6186010 100644 --- a/app/page.browser.tsx +++ b/app/page.browser.tsx @@ -6,9 +6,12 @@ describe('Main app page (vitest browser mode)', () => { test('renders header', async () => { const screen = await render(); - 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', () => { @@ -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'); }); }); @@ -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(); }); }); @@ -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'); }); }); }); diff --git a/app/self-contained-test.browser.tsx b/app/self-contained-test.browser.tsx index 6be5683..0df9fb5 100644 --- a/app/self-contained-test.browser.tsx +++ b/app/self-contained-test.browser.tsx @@ -24,12 +24,12 @@ const CounterComponent = (): React.ReactElement => { it('should let you increment ', async () => { render(); - // 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'); });