diff --git a/packages/react-async-button/package.json b/packages/react-async-button/package.json index 4d5a3ed..542416a 100644 --- a/packages/react-async-button/package.json +++ b/packages/react-async-button/package.json @@ -37,9 +37,6 @@ }, "devDependencies": { "@biomejs/biome": "2.2.2", - "@testing-library/dom": "^10.0.0", - "@testing-library/jest-dom": "^6.0.0", - "@testing-library/react": "^16.0.0", "@types/react": "*", "@types/react-dom": "*", "@vitest/browser-playwright": "^4.0.1", diff --git a/packages/react-async-button/src/AsyncButton.spec.tsx b/packages/react-async-button/src/AsyncButton.spec.tsx index 93ac54d..f17dc2b 100644 --- a/packages/react-async-button/src/AsyncButton.spec.tsx +++ b/packages/react-async-button/src/AsyncButton.spec.tsx @@ -1,6 +1,6 @@ import { describe, expect, it, vi } from 'vitest'; -import { userEvent } from 'vitest/browser'; -import { act, render, screen } from '@testing-library/react'; +import { page, userEvent } from 'vitest/browser'; +import { render } from 'vitest-browser-react'; import { createRef } from 'react'; import AsyncButton from './index.js'; @@ -27,28 +27,28 @@ describe(' component', () => { errorConfig, } satisfies React.ComponentProps; - it('renders button properly', () => { - render(); + it('renders button properly', async () => { + await render(); - expect(screen.queryByRole('button')).toBeInTheDocument(); + expect(page.getByRole('button')).toBeInTheDocument(); }); - it('passes ref correctly', () => { + it('passes ref correctly', async () => { const ref = createRef(); - render(); + await render(); - const button = screen.getByRole('button'); + const button = page.getByRole('button'); - expect(ref.current).toBe(button); + expect(ref.current).toBe(button.element()); }); it('calls onClick properly', async () => { const onClick = vi.fn(); - render(); + await render(); - const button = screen.getByRole('button'); + const button = page.getByRole('button'); await userEvent.click(button); @@ -61,13 +61,13 @@ describe(' component', () => { // Intentionally empty }; - render(); + await render(); - const button = screen.getByRole('button'); + const button = page.getByRole('button'); await userEvent.click(button); - const button2 = screen.getByRole('button'); + const button2 = page.getByRole('button'); expect(button2).toHaveTextContent('Success!'); }); @@ -76,111 +76,84 @@ describe(' component', () => { // Intentionally empty }; - render(); + await render(); - const button = screen.getByRole('button'); + const button = page.getByRole('button'); await userEvent.click(button); - const button2 = screen.getByRole('button'); - expect(button2).toHaveTextContent('Success!'); + await expect.element(button).toHaveTextContent('Success!'); - act(() => { - vi.advanceTimersByTime(1000); - }); + vi.advanceTimersByTime(1000); - const button3 = screen.getByRole('button'); - expect(button3).toHaveTextContent('Success!'); + await expect.element(button).toHaveTextContent('Success!'); - act(() => { - vi.advanceTimersByTime(1000); - }); + vi.advanceTimersByTime(1000); - const button4 = screen.getByRole('button'); - expect(button4).toHaveTextContent('Click me'); + await expect.element(button).toHaveTextContent('Click me'); }); it('changes button state to pending on click if onClick is asynchronous', async () => { - let resolve: () => void; const onClick = () => - new Promise((res) => { - resolve = res; + new Promise(() => { + // Intentionally empty }); - render(); + await render(); - const button = screen.getByRole('button'); + const button = page.getByRole('button'); await userEvent.click(button); - const button2 = screen.getByRole('button'); - expect(button2).toHaveTextContent('Loading…'); - - await act(async () => { - resolve(); - }); + await expect.element(button).toHaveTextContent('Loading…'); }); it('changes button state to success after asynchronous onClick is resolved', async () => { - let resolve: () => void; + let resolve: (() => void) | undefined; const onClick = () => new Promise((res) => { resolve = res; }); - render(); + await render(); - const button = screen.getByRole('button'); + const button = page.getByRole('button'); await userEvent.click(button); - const button2 = screen.getByRole('button'); - expect(button2).toHaveTextContent('Loading…'); + await expect.element(button).toHaveTextContent('Loading…'); - await act(async () => { - resolve(); - }); + resolve?.(); - const button3 = screen.getByRole('button'); - expect(button3).toHaveTextContent('Success!'); + await expect.element(button).toHaveTextContent('Success!'); }); it('changes button state to default after refresh timeout has passed', async () => { - let resolve: () => void; + let resolve: (() => void) | undefined; const onClick = () => new Promise((res) => { resolve = res; }); - render(); + await render(); - const button = screen.getByRole('button'); + const button = page.getByRole('button'); await userEvent.click(button); - const button2 = screen.getByRole('button'); - expect(button2).toHaveTextContent('Loading…'); + await expect.element(button).toHaveTextContent('Loading…'); - await act(async () => { - resolve(); - }); + resolve?.(); - const button3 = screen.getByRole('button'); - expect(button3).toHaveTextContent('Success!'); + await expect.element(button).toHaveTextContent('Success!'); - act(() => { - vi.advanceTimersByTime(1000); - }); + vi.advanceTimersByTime(1000); - const button4 = screen.getByRole('button'); - expect(button4).toHaveTextContent('Success!'); + await expect.element(button).toHaveTextContent('Success!'); - act(() => { - vi.advanceTimersByTime(1000); - }); + vi.advanceTimersByTime(1000); - const button5 = screen.getByRole('button'); - expect(button5).toHaveTextContent('Click me'); + await expect.element(button).toHaveTextContent('Click me'); }); it('should allow button props to be passed by default', () => { diff --git a/packages/react-async-button/vitest.config.ts b/packages/react-async-button/vitest.config.ts index 9d9dac8..485ff07 100644 --- a/packages/react-async-button/vitest.config.ts +++ b/packages/react-async-button/vitest.config.ts @@ -11,7 +11,6 @@ const config: ViteUserConfig = defineConfig({ instances: [{ browser: 'chromium' }], provider: playwright(), }, - setupFiles: 'vitest.setup.ts', watch: false, }, }); diff --git a/packages/react-async-button/vitest.setup.ts b/packages/react-async-button/vitest.setup.ts deleted file mode 100644 index 97650fd..0000000 --- a/packages/react-async-button/vitest.setup.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { afterEach } from 'vitest'; -import { cleanup } from '@testing-library/react'; -import '@testing-library/jest-dom/vitest'; - -afterEach(() => { - cleanup(); -}); diff --git a/yarn.lock b/yarn.lock index 01ba4d7..33c7c34 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5,13 +5,6 @@ __metadata: version: 8 cacheKey: 10c0 -"@adobe/css-tools@npm:^4.3.1": - version: 4.3.2 - resolution: "@adobe/css-tools@npm:4.3.2" - checksum: 10c0/296a03dd29f227c60500d2da8c7f64991fecf1d8b456ce2b4adb8cec7363d9c08b5b03f1463673fc8cbfe54b538745588e7a13c736d2dd14a80c01a20f127f39 - languageName: node - linkType: hard - "@ampproject/remapping@npm:^2.2.0": version: 2.3.0 resolution: "@ampproject/remapping@npm:2.3.0" @@ -22,7 +15,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.27.1": +"@babel/code-frame@npm:^7.27.1": version: 7.27.1 resolution: "@babel/code-frame@npm:7.27.1" dependencies: @@ -183,13 +176,6 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.9.2": - version: 7.27.6 - resolution: "@babel/runtime@npm:7.27.6" - checksum: 10c0/89726be83f356f511dcdb74d3ea4d873a5f0cf0017d4530cb53aa27380c01ca102d573eff8b8b77815e624b1f8c24e7f0311834ad4fb632c90a770fda00bd4c8 - languageName: node - linkType: hard - "@babel/template@npm:^7.27.2": version: 7.27.2 resolution: "@babel/template@npm:7.27.2" @@ -777,79 +763,6 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:^10.0.0": - version: 10.4.1 - resolution: "@testing-library/dom@npm:10.4.1" - dependencies: - "@babel/code-frame": "npm:^7.10.4" - "@babel/runtime": "npm:^7.12.5" - "@types/aria-query": "npm:^5.0.1" - aria-query: "npm:5.3.0" - dom-accessibility-api: "npm:^0.5.9" - lz-string: "npm:^1.5.0" - picocolors: "npm:1.1.1" - pretty-format: "npm:^27.0.2" - checksum: 10c0/19ce048012d395ad0468b0dbcc4d0911f6f9e39464d7a8464a587b29707eed5482000dad728f5acc4ed314d2f4d54f34982999a114d2404f36d048278db815b1 - languageName: node - linkType: hard - -"@testing-library/jest-dom@npm:^6.0.0": - version: 6.1.4 - resolution: "@testing-library/jest-dom@npm:6.1.4" - dependencies: - "@adobe/css-tools": "npm:^4.3.1" - "@babel/runtime": "npm:^7.9.2" - aria-query: "npm:^5.0.0" - chalk: "npm:^3.0.0" - css.escape: "npm:^1.5.1" - dom-accessibility-api: "npm:^0.5.6" - lodash: "npm:^4.17.15" - redent: "npm:^3.0.0" - peerDependencies: - "@jest/globals": ">= 28" - "@types/jest": ">= 28" - jest: ">= 28" - vitest: ">= 0.32" - peerDependenciesMeta: - "@jest/globals": - optional: true - "@types/jest": - optional: true - jest: - optional: true - vitest: - optional: true - checksum: 10c0/2e23f120613fd8ae6d5169bbc94f1a2e4c82b07182057dc94db8ec54ebf32555833442e6c43a187e59715d83704ffb5df49ba88a71f6f32d2683f3d95ba721c7 - languageName: node - linkType: hard - -"@testing-library/react@npm:^16.0.0": - version: 16.0.0 - resolution: "@testing-library/react@npm:16.0.0" - dependencies: - "@babel/runtime": "npm:^7.12.5" - peerDependencies: - "@testing-library/dom": ^10.0.0 - "@types/react": ^18.0.0 - "@types/react-dom": ^18.0.0 - react: ^18.0.0 - react-dom: ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - "@types/react-dom": - optional: true - checksum: 10c0/297f97bf4722dad05f11d9cafd47d387dbdb096fea4b79b876c7466460f0f2e345b55b81b3e37fc81ed8185c528cb53dd8455ca1b6b019b229edf6c796f11c9f - languageName: node - linkType: hard - -"@types/aria-query@npm:^5.0.1": - version: 5.0.1 - resolution: "@types/aria-query@npm:5.0.1" - checksum: 10c0/bc9e40ce37bd3a1654948778c7829bd55aea1bc5f2cd06fcf6cd650b07bb388995799e9aab6e2d93a6cf55dcba3b85c155f7ba93adefcc7c2e152fc6057061b5 - languageName: node - linkType: hard - "@types/babel__core@npm:^7.20.5": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" @@ -1112,9 +1025,6 @@ __metadata: resolution: "@wojtekmaj/react-async-button@workspace:packages/react-async-button" dependencies: "@biomejs/biome": "npm:2.2.2" - "@testing-library/dom": "npm:^10.0.0" - "@testing-library/jest-dom": "npm:^6.0.0" - "@testing-library/react": "npm:^16.0.0" "@types/react": "npm:*" "@types/react-dom": "npm:*" "@vitest/browser-playwright": "npm:^4.0.1" @@ -1162,7 +1072,7 @@ __metadata: languageName: node linkType: hard -"ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0": +"ansi-styles@npm:^4.0.0": version: 4.3.0 resolution: "ansi-styles@npm:4.3.0" dependencies: @@ -1171,13 +1081,6 @@ __metadata: languageName: node linkType: hard -"ansi-styles@npm:^5.0.0": - version: 5.2.0 - resolution: "ansi-styles@npm:5.2.0" - checksum: 10c0/9c4ca80eb3c2fb7b33841c210d2f20807f40865d27008d7c3f707b7f95cab7d67462a565e2388ac3285b71cb3d9bb2173de8da37c57692a362885ec34d6e27df - languageName: node - linkType: hard - "ansi-styles@npm:^6.1.0": version: 6.2.1 resolution: "ansi-styles@npm:6.2.1" @@ -1185,15 +1088,6 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:5.3.0, aria-query@npm:^5.0.0": - version: 5.3.0 - resolution: "aria-query@npm:5.3.0" - dependencies: - dequal: "npm:^2.0.3" - checksum: 10c0/2bff0d4eba5852a9dd578ecf47eaef0e82cc52569b48469b0aac2db5145db0b17b7a58d9e01237706d1e14b7a1b0ac9b78e9c97027ad97679dd8f91b85da1469 - languageName: node - linkType: hard - "balanced-match@npm:^1.0.0": version: 1.0.2 resolution: "balanced-match@npm:1.0.2" @@ -1265,16 +1159,6 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^3.0.0": - version: 3.0.0 - resolution: "chalk@npm:3.0.0" - dependencies: - ansi-styles: "npm:^4.1.0" - supports-color: "npm:^7.1.0" - checksum: 10c0/ee650b0a065b3d7a6fda258e75d3a86fc8e4effa55871da730a9e42ccb035bf5fd203525e5a1ef45ec2582ecc4f65b47eb11357c526b84dd29a14fb162c414d2 - languageName: node - linkType: hard - "chownr@npm:^3.0.0": version: 3.0.0 resolution: "chownr@npm:3.0.0" @@ -1334,13 +1218,6 @@ __metadata: languageName: node linkType: hard -"css.escape@npm:^1.5.1": - version: 1.5.1 - resolution: "css.escape@npm:1.5.1" - checksum: 10c0/5e09035e5bf6c2c422b40c6df2eb1529657a17df37fda5d0433d722609527ab98090baf25b13970ca754079a0f3161dd3dfc0e743563ded8cfa0749d861c1525 - languageName: node - linkType: hard - "csstype@npm:3.1.2, csstype@npm:^3.0.2": version: 3.1.2 resolution: "csstype@npm:3.1.2" @@ -1360,20 +1237,6 @@ __metadata: languageName: node linkType: hard -"dequal@npm:^2.0.3": - version: 2.0.3 - resolution: "dequal@npm:2.0.3" - checksum: 10c0/f98860cdf58b64991ae10205137c0e97d384c3a4edc7f807603887b7c4b850af1224a33d88012009f150861cbee4fa2d322c4cc04b9313bee312e47f6ecaa888 - languageName: node - linkType: hard - -"dom-accessibility-api@npm:^0.5.6, dom-accessibility-api@npm:^0.5.9": - version: 0.5.16 - resolution: "dom-accessibility-api@npm:0.5.16" - checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053 - languageName: node - linkType: hard - "eastasianwidth@npm:^0.2.0": version: 0.2.0 resolution: "eastasianwidth@npm:0.2.0" @@ -1653,13 +1516,6 @@ __metadata: languageName: node linkType: hard -"has-flag@npm:^4.0.0": - version: 4.0.0 - resolution: "has-flag@npm:4.0.0" - checksum: 10c0/2e789c61b7888d66993e14e8331449e525ef42aac53c627cc53d1c3334e768bcb6abdc4f5f0de1478a25beec6f0bd62c7549058b7ac53e924040d4f301f02fd1 - languageName: node - linkType: hard - "hoist-non-react-statics@npm:^3.3.0": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" @@ -1721,13 +1577,6 @@ __metadata: languageName: node linkType: hard -"indent-string@npm:^4.0.0": - version: 4.0.0 - resolution: "indent-string@npm:4.0.0" - checksum: 10c0/1e1904ddb0cb3d6cce7cd09e27a90184908b7a5d5c21b92e232c93579d314f0b83c246ffb035493d0504b1e9147ba2c9b21df0030f48673fba0496ecd698161f - languageName: node - linkType: hard - "ip-address@npm:^9.0.5": version: 9.0.5 resolution: "ip-address@npm:9.0.5" @@ -1804,13 +1653,6 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.17.15": - version: 4.17.21 - resolution: "lodash@npm:4.17.21" - checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c - languageName: node - linkType: hard - "loose-envify@npm:^1.1.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" @@ -1838,15 +1680,6 @@ __metadata: languageName: node linkType: hard -"lz-string@npm:^1.5.0": - version: 1.5.0 - resolution: "lz-string@npm:1.5.0" - bin: - lz-string: bin/bin.js - checksum: 10c0/36128e4de34791838abe979b19927c26e67201ca5acf00880377af7d765b38d1c60847e01c5ec61b1a260c48029084ab3893a3925fd6e48a04011364b089991b - languageName: node - linkType: hard - "magic-string@npm:^0.30.19": version: 0.30.21 resolution: "magic-string@npm:0.30.21" @@ -1882,13 +1715,6 @@ __metadata: languageName: node linkType: hard -"min-indent@npm:^1.0.0": - version: 1.0.1 - resolution: "min-indent@npm:1.0.1" - checksum: 10c0/7e207bd5c20401b292de291f02913230cb1163abca162044f7db1d951fa245b174dc00869d40dd9a9f32a885ad6a5f3e767ee104cf278f399cb4e92d3f582d5c - languageName: node - linkType: hard - "minimatch@npm:^9.0.1": version: 9.0.3 resolution: "minimatch@npm:9.0.3" @@ -2082,7 +1908,7 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:1.1.1, picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1": +"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1": version: 1.1.1 resolution: "picocolors@npm:1.1.1" checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58 @@ -2167,17 +1993,6 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^27.0.2": - version: 27.5.1 - resolution: "pretty-format@npm:27.5.1" - dependencies: - ansi-regex: "npm:^5.0.1" - ansi-styles: "npm:^5.0.0" - react-is: "npm:^17.0.1" - checksum: 10c0/0cbda1031aa30c659e10921fa94e0dd3f903ecbbbe7184a729ad66f2b6e7f17891e8c7d7654c458fa4ccb1a411ffb695b4f17bbcd3fe075fabe181027c4040ed - languageName: node - linkType: hard - "proc-log@npm:^5.0.0": version: 5.0.0 resolution: "proc-log@npm:5.0.0" @@ -2222,13 +2037,6 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^17.0.1": - version: 17.0.2 - resolution: "react-is@npm:17.0.2" - checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053 - languageName: node - linkType: hard - "react-refresh@npm:^0.17.0": version: 0.17.0 resolution: "react-refresh@npm:0.17.0" @@ -2245,16 +2053,6 @@ __metadata: languageName: node linkType: hard -"redent@npm:^3.0.0": - version: 3.0.0 - resolution: "redent@npm:3.0.0" - dependencies: - indent-string: "npm:^4.0.0" - strip-indent: "npm:^3.0.0" - checksum: 10c0/d64a6b5c0b50eb3ddce3ab770f866658a2b9998c678f797919ceb1b586bab9259b311407280bd80b804e2a7c7539b19238ae6a2a20c843f1a7fcff21d48c2eae - languageName: node - linkType: hard - "retry@npm:^0.12.0": version: 0.12.0 resolution: "retry@npm:0.12.0" @@ -2527,15 +2325,6 @@ __metadata: languageName: node linkType: hard -"strip-indent@npm:^3.0.0": - version: 3.0.0 - resolution: "strip-indent@npm:3.0.0" - dependencies: - min-indent: "npm:^1.0.0" - checksum: 10c0/ae0deaf41c8d1001c5d4fbe16cb553865c1863da4fae036683b474fa926af9fc121e155cb3fc57a68262b2ae7d5b8420aa752c97a6428c315d00efe2a3875679 - languageName: node - linkType: hard - "styled-components@npm:^6.1.8": version: 6.1.8 resolution: "styled-components@npm:6.1.8" @@ -2563,15 +2352,6 @@ __metadata: languageName: node linkType: hard -"supports-color@npm:^7.1.0": - version: 7.2.0 - resolution: "supports-color@npm:7.2.0" - dependencies: - has-flag: "npm:^4.0.0" - checksum: 10c0/afb4c88521b8b136b5f5f95160c98dee7243dc79d5432db7efc27efb219385bbc7d9427398e43dd6cc730a0f87d5085ce1652af7efbe391327bc0a7d0f7fc124 - languageName: node - linkType: hard - "tar@npm:^7.4.3": version: 7.4.3 resolution: "tar@npm:7.4.3"