diff --git a/.changeset/stupid-pants-perform.md b/.changeset/stupid-pants-perform.md new file mode 100644 index 0000000000..274eabf78d --- /dev/null +++ b/.changeset/stupid-pants-perform.md @@ -0,0 +1,84 @@ +--- +"@heroui/use-intersection-observer": patch +"@heroui/use-data-scroll-overflow": patch +"@heroui/use-aria-accordion-item": patch +"@heroui/use-aria-modal-overlay": patch +"@heroui/use-safe-layout-effect": patch +"@heroui/use-aria-multiselect": patch +"@heroui/use-infinite-scroll": patch +"@heroui/use-scroll-position": patch +"@heroui/react-rsc-utils": patch +"@heroui/scroll-shadow": patch +"@heroui/use-aria-accordion": patch +"@heroui/autocomplete": patch +"@heroui/use-update-effect": patch +"@heroui/breadcrumbs": patch +"@heroui/date-picker": patch +"@heroui/use-callback-ref": patch +"@heroui/framer-utils": patch +"@heroui/shared-icons": patch +"@heroui/date-input": patch +"@heroui/pagination": patch +"@heroui/use-aria-button": patch +"@heroui/react-utils": patch +"@heroui/accordion": patch +"@heroui/input-otp": patch +"@heroui/use-disclosure": patch +"@heroui/use-is-mounted": patch +"@heroui/use-pagination": patch +"@heroui/use-real-shape": patch +"@heroui/aria-utils": patch +"@heroui/test-utils": patch +"@heroui/calendar": patch +"@heroui/checkbox": patch +"@heroui/dropdown": patch +"@heroui/progress": patch +"@heroui/skeleton": patch +"@heroui/use-aria-link": patch +"@heroui/use-clipboard": patch +"@heroui/use-draggable": patch +"@heroui/use-is-mobile": patch +"@heroui/use-ref-state": patch +"@heroui/divider": patch +"@heroui/listbox": patch +"@heroui/popover": patch +"@heroui/snippet": patch +"@heroui/spinner": patch +"@heroui/tooltip": patch +"@heroui/avatar": patch +"@heroui/button": patch +"@heroui/drawer": patch +"@heroui/navbar": patch +"@heroui/ripple": patch +"@heroui/select": patch +"@heroui/slider": patch +"@heroui/spacer": patch +"@heroui/switch": patch +"@heroui/use-measure": patch +"@heroui/alert": patch +"@heroui/badge": patch +"@heroui/image": patch +"@heroui/input": patch +"@heroui/modal": patch +"@heroui/radio": patch +"@heroui/table": patch +"@heroui/use-resize": patch +"@heroui/card": patch +"@heroui/chip": patch +"@heroui/code": patch +"@heroui/form": patch +"@heroui/link": patch +"@heroui/menu": patch +"@heroui/tabs": patch +"@heroui/user": patch +"@heroui/system-rsc": patch +"@heroui/use-image": patch +"@heroui/use-theme": patch +"@heroui/kbd": patch +"@heroui/use-ssr": patch +"@heroui/system": patch +"@heroui/react": patch +"@heroui/theme": patch +--- + +Tailwind variants upgraded to the latest version, classnames adjusted, tests fixed diff --git a/apps/docs/package.json b/apps/docs/package.json index c0b3844963..4440ad4141 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -78,8 +78,8 @@ "posthog-js": "1.197.0", "prism-react-renderer": "^1.2.1", "querystring": "^0.2.1", - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "18.3.0", + "react-dom": "18.3.0", "react-hook-form": "^7.51.3", "react-icons": "^4.10.1", "react-live": "^4.1.8", @@ -97,7 +97,7 @@ "sharp": "^0.32.1", "shelljs": "^0.8.4", "swr": "2.2.5", - "tailwind-variants": "^0.1.20", + "tailwind-variants": "^0.3.0", "unified": "^11.0.5", "unist-util-visit": "5.0.0", "usehooks-ts": "3.1.0", @@ -126,8 +126,8 @@ "algoliasearch": "^4.10.3", "autoprefixer": "10.4.20", "dotenv": "^16.0.1", - "esbuild-plugin-raw": "0.1.8", "eslint-config-next": "15.0.3", + "esbuild-plugin-raw": "0.1.8", "markdown-toc": "^1.2.0", "mdx-bundler": "10.0.3", "next-sitemap": "4.2.3", @@ -141,8 +141,8 @@ }, "pnpm": { "overrides": { - "react": "18.2.0", - "react-dom": "18.2.0" + "react": "18.3.0", + "react-dom": "18.3.0" } } } diff --git a/package.json b/package.json index 5ab462fa88..dce5bbcd4d 100644 --- a/package.json +++ b/package.json @@ -62,10 +62,10 @@ "@babel/preset-env": "^7.14.5", "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "^7.14.5", - "@changesets/cli": "2.27.10", "@changesets/changelog-github": "0.5.0", - "@changesets/get-release-plan": "4.0.5", + "@changesets/cli": "2.27.10", "@changesets/get-github-info": "0.6.0", + "@changesets/get-release-plan": "4.0.5", "@changesets/types": "6.0.0", "@commitlint/cli": "^17.2.0", "@commitlint/config-conventional": "^17.2.0", @@ -127,14 +127,13 @@ "prettier": "^2.2.1", "prettier-eslint": "^12.0.0", "prettier-eslint-cli": "^5.0.1", - "react": "^18.0.0", - "react-dom": "^18.0.0", + "react": "18.3.0", "rimraf": "^3.0.2", "shelljs": "^0.8.4", - "tsup": "6.4.0", - "tsx": "^3.8.2", + "tsup": "8.3.5", + "tsx": "^4.19.2", "turbo": "1.6.3", - "typescript": "^4.9.5", + "typescript": "^5.5.0", "webpack": "^5.53.0", "webpack-bundle-analyzer": "^4.4.2", "webpack-cli": "^3.3.11", @@ -142,8 +141,8 @@ }, "pnpm": { "overrides": { - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "18.3.0", + "react-dom": "18.3.0", "@changesets/get-github-info": "0.6.0" } }, diff --git a/packages/components/accordion/__tests__/accordion.test.tsx b/packages/components/accordion/__tests__/accordion.test.tsx index 85e4f58236..ebc1baa36b 100644 --- a/packages/components/accordion/__tests__/accordion.test.tsx +++ b/packages/components/accordion/__tests__/accordion.test.tsx @@ -1,15 +1,12 @@ +import "@testing-library/jest-dom"; import * as React from "react"; import {act, render} from "@testing-library/react"; -import {focus} from "@heroui/test-utils"; +import {focus, shouldIgnoreReactWarning, spy} from "@heroui/test-utils"; import userEvent, {UserEvent} from "@testing-library/user-event"; import {Input} from "@heroui/input"; import {Accordion, AccordionItem} from "../src"; -// e.g. console.error Warning: Function components cannot be given refs. -// Attempts to access this ref will fail. Did you mean to use React.forwardRef()? -const spy = jest.spyOn(console, "error").mockImplementation(() => {}); - describe("Accordion", () => { let user: UserEvent; @@ -30,6 +27,10 @@ describe("Accordion", () => { expect(() => wrapper.unmount()).not.toThrow(); + if (shouldIgnoreReactWarning(spy)) { + return; + } + expect(spy).toHaveBeenCalledTimes(0); }); diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json index 5076a399e6..b98f1c8f78 100644 --- a/packages/components/accordion/package.json +++ b/packages/components/accordion/package.json @@ -72,8 +72,8 @@ "@heroui/test-utils": "workspace:*", "framer-motion": "11.9.0", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json index 0871936d34..621fa5f369 100644 --- a/packages/components/alert/package.json +++ b/packages/components/alert/package.json @@ -55,8 +55,8 @@ "@heroui/system": "workspace:*", "@heroui/theme": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx index 81b4fdcf07..e9621b4747 100644 --- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx +++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx @@ -2,6 +2,7 @@ import "@testing-library/jest-dom"; import * as React from "react"; import {within, render, renderHook, act} from "@testing-library/react"; import userEvent, {UserEvent} from "@testing-library/user-event"; +import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils"; import {useForm} from "react-hook-form"; import {Form} from "@heroui/form"; @@ -88,6 +89,11 @@ describe("Autocomplete", () => { it("should render correctly", () => { const wrapper = render(); + if (shouldIgnoreReactWarning(spy)) { + return; + } + + expect(spy).toHaveBeenCalledTimes(0); expect(() => wrapper.unmount()).not.toThrow(); }); diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json index ad975601db..4efb159172 100644 --- a/packages/components/autocomplete/package.json +++ b/packages/components/autocomplete/package.json @@ -68,14 +68,15 @@ "@heroui/avatar": "workspace:*", "@heroui/chip": "workspace:*", "@heroui/stories-utils": "workspace:*", + "@heroui/test-utils": "workspace:*", "@heroui/system": "workspace:*", "@heroui/theme": "workspace:*", "@heroui/use-infinite-scroll": "workspace:*", "@react-stately/data": "3.12.1", "clean-package": "2.2.0", "framer-motion": "11.9.0", - "react": "^18.0.0", - "react-dom": "^18.0.0", + "react": "18.3.0", + "react-dom": "18.3.0", "react-hook-form": "^7.51.3" }, "clean-package": "../../../clean-package.config.json" diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json index d824761862..31c8f6f201 100644 --- a/packages/components/avatar/package.json +++ b/packages/components/avatar/package.json @@ -53,8 +53,8 @@ "@heroui/shared-icons": "workspace:*", "@heroui/test-utils": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/badge/package.json b/packages/components/badge/package.json index 4422d89c09..260473d2d8 100644 --- a/packages/components/badge/package.json +++ b/packages/components/badge/package.json @@ -50,8 +50,8 @@ "@heroui/shared-icons": "workspace:*", "@heroui/switch": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/breadcrumbs/package.json b/packages/components/breadcrumbs/package.json index 433ca63a3e..54fb9e2942 100644 --- a/packages/components/breadcrumbs/package.json +++ b/packages/components/breadcrumbs/package.json @@ -56,8 +56,8 @@ "@heroui/tooltip": "workspace:*", "@heroui/button": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/button/package.json b/packages/components/button/package.json index 751c582791..3fe85e79cc 100644 --- a/packages/components/button/package.json +++ b/packages/components/button/package.json @@ -59,8 +59,8 @@ "@heroui/shared-icons": "workspace:*", "framer-motion": "11.9.0", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json index 605b863149..f0dfca3e8f 100644 --- a/packages/components/calendar/package.json +++ b/packages/components/calendar/package.json @@ -70,8 +70,8 @@ "@heroui/test-utils": "workspace:*", "framer-motion": "11.9.0", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } diff --git a/packages/components/card/package.json b/packages/components/card/package.json index 8d308ece9d..2e95c9c8e1 100644 --- a/packages/components/card/package.json +++ b/packages/components/card/package.json @@ -61,8 +61,8 @@ "@heroui/image": "workspace:*", "framer-motion": "11.9.0", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json index 5d2a5b6a0a..c57e6a0aaf 100644 --- a/packages/components/checkbox/package.json +++ b/packages/components/checkbox/package.json @@ -63,8 +63,8 @@ "@heroui/theme": "workspace:*", "@heroui/user": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0", + "react": "18.3.0", + "react-dom": "18.3.0", "react-hook-form": "^7.51.3" }, "clean-package": "../../../clean-package.config.json" diff --git a/packages/components/chip/package.json b/packages/components/chip/package.json index 6a74471d34..9120bbcb1e 100644 --- a/packages/components/chip/package.json +++ b/packages/components/chip/package.json @@ -53,8 +53,8 @@ "@heroui/system": "workspace:*", "@heroui/avatar": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/code/__tests__/code.test.tsx b/packages/components/code/__tests__/code.test.tsx index 8ddd66508f..b5a2eb3f4c 100644 --- a/packages/components/code/__tests__/code.test.tsx +++ b/packages/components/code/__tests__/code.test.tsx @@ -1,5 +1,6 @@ import * as React from "react"; import {render} from "@testing-library/react"; +import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils"; import {Code} from "../src"; @@ -8,6 +9,12 @@ describe("Code", () => { const wrapper = render(); expect(() => wrapper.unmount()).not.toThrow(); + + if (shouldIgnoreReactWarning(spy)) { + return; + } + + expect(spy).toHaveBeenCalledTimes(0); }); it("ref should be forwarded", () => { diff --git a/packages/components/code/package.json b/packages/components/code/package.json index 55cd4f46c8..0aa1346ce0 100644 --- a/packages/components/code/package.json +++ b/packages/components/code/package.json @@ -45,9 +45,10 @@ }, "devDependencies": { "@heroui/theme": "workspace:*", + "@heroui/test-utils": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/date-input/package.json b/packages/components/date-input/package.json index c832936dad..9f9bb1b9fe 100644 --- a/packages/components/date-input/package.json +++ b/packages/components/date-input/package.json @@ -57,8 +57,8 @@ "@heroui/shared-icons": "workspace:*", "@heroui/test-utils": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } diff --git a/packages/components/date-picker/__tests__/date-picker.test.tsx b/packages/components/date-picker/__tests__/date-picker.test.tsx index 48d930ceda..cb9db44d0b 100644 --- a/packages/components/date-picker/__tests__/date-picker.test.tsx +++ b/packages/components/date-picker/__tests__/date-picker.test.tsx @@ -1,7 +1,13 @@ /* eslint-disable jsx-a11y/no-autofocus */ import * as React from "react"; import {render, act, fireEvent, waitFor, within} from "@testing-library/react"; -import {pointerMap, triggerPress} from "@heroui/test-utils"; +import { + errorSpy, + pointerMap, + shouldIgnoreReactWarning, + triggerPress, + warnSpy, +} from "@heroui/test-utils"; import userEvent from "@testing-library/user-event"; import {CalendarDate, CalendarDateTime} from "@internationalized/date"; import {HeroUIProvider} from "@heroui/system"; @@ -66,6 +72,7 @@ describe("DatePicker", () => { user = userEvent.setup({delay: null, pointerMap}); jest.useFakeTimers(); }); + afterEach(() => { act(() => { jest.runAllTimers(); @@ -435,8 +442,6 @@ describe("DatePicker", () => { describe("Calendar popover", function () { it("should emit onChange when selecting a date in the calendar in controlled mode", function () { let onChange = jest.fn(); - const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation(() => {}); - const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {}); let {getByRole, getAllByRole, queryByLabelText} = render( { expect(onChange).toHaveBeenCalledWith(new CalendarDate(2019, 2, 4)); expect(getTextValue(combobox)).toBe("2/3/2019"); // controlled - expect(consoleWarnSpy).not.toHaveBeenCalled(); - expect(consoleErrorSpy).not.toHaveBeenCalled(); - consoleWarnSpy.mockRestore(); - consoleErrorSpy.mockRestore(); + if (!shouldIgnoreReactWarning(warnSpy)) { + expect(warnSpy).not.toHaveBeenCalled(); + } + + if (!shouldIgnoreReactWarning(errorSpy)) { + expect(errorSpy).not.toHaveBeenCalled(); + } + + warnSpy.mockRestore(); + errorSpy.mockRestore(); }); it("should emit onChange when selecting a date in the calendar in uncontrolled mode", function () { diff --git a/packages/components/date-picker/package.json b/packages/components/date-picker/package.json index f59cfe99be..3e42c84fd4 100644 --- a/packages/components/date-picker/package.json +++ b/packages/components/date-picker/package.json @@ -67,8 +67,8 @@ "@heroui/theme": "workspace:*", "framer-motion": "11.9.0", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } diff --git a/packages/components/divider/package.json b/packages/components/divider/package.json index 9f23c52904..df2a3c1b37 100644 --- a/packages/components/divider/package.json +++ b/packages/components/divider/package.json @@ -47,8 +47,8 @@ "devDependencies": { "@heroui/theme": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/drawer/__tests__/drawer.test.tsx b/packages/components/drawer/__tests__/drawer.test.tsx index 85178372c5..1128174fc8 100644 --- a/packages/components/drawer/__tests__/drawer.test.tsx +++ b/packages/components/drawer/__tests__/drawer.test.tsx @@ -2,11 +2,9 @@ import "@testing-library/jest-dom"; import * as React from "react"; import {render, fireEvent} from "@testing-library/react"; import userEvent from "@testing-library/user-event"; +import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils"; import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter} from "../src"; -// e.g. console.error Warning: Function components cannot be given refs. -// Attempts to access this ref will fail. Did you mean to use React.forwardRef()? -const spy = jest.spyOn(console, "error").mockImplementation(() => {}); describe("Drawer", () => { afterEach(() => { @@ -25,6 +23,11 @@ describe("Drawer", () => { ); expect(() => wrapper.unmount()).not.toThrow(); + + if (shouldIgnoreReactWarning(spy)) { + return; + } + expect(spy).toHaveBeenCalledTimes(0); }); diff --git a/packages/components/drawer/package.json b/packages/components/drawer/package.json index 2db44a36de..70355409ab 100644 --- a/packages/components/drawer/package.json +++ b/packages/components/drawer/package.json @@ -58,10 +58,11 @@ "@heroui/switch": "workspace:*", "@heroui/shared-icons": "workspace:*", "@heroui/use-disclosure": "workspace:*", + "@heroui/test-utils": "workspace:*", "react-lorem-component": "0.13.0", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } diff --git a/packages/components/dropdown/__tests__/dropdown.test.tsx b/packages/components/dropdown/__tests__/dropdown.test.tsx index 7485b24f39..74d5b41eb5 100644 --- a/packages/components/dropdown/__tests__/dropdown.test.tsx +++ b/packages/components/dropdown/__tests__/dropdown.test.tsx @@ -2,17 +2,13 @@ import * as React from "react"; import {act, render, fireEvent} from "@testing-library/react"; import {Button} from "@heroui/button"; import userEvent, {UserEvent} from "@testing-library/user-event"; -import {keyCodes} from "@heroui/test-utils"; +import {keyCodes, shouldIgnoreReactWarning, spy} from "@heroui/test-utils"; import {User} from "@heroui/user"; import {Image} from "@heroui/image"; import {Avatar} from "@heroui/avatar"; import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSection} from "../src"; -// e.g. console.error Warning: Function components cannot be given refs. -// Attempts to access this ref will fail. Did you mean to use React.forwardRef()? -const spy = jest.spyOn(console, "error").mockImplementation(() => {}); - describe("Dropdown", () => { let user: UserEvent; @@ -25,7 +21,7 @@ describe("Dropdown", () => { it("should render correctly (static)", () => { const wrapper = render( - + @@ -52,7 +48,7 @@ describe("Dropdown", () => { ]; const wrapper = render( - + @@ -67,7 +63,7 @@ describe("Dropdown", () => { it("should render correctly with section (static)", () => { const wrapper = render( - + @@ -106,7 +102,7 @@ describe("Dropdown", () => { ]; const wrapper = render( - + @@ -130,7 +126,7 @@ describe("Dropdown", () => { it("should not throw any error when clicking button", async () => { const wrapper = render( - + @@ -149,7 +145,14 @@ describe("Dropdown", () => { expect(triggerButton).toBeTruthy(); - await user.click(triggerButton); + await act(async () => { + await user.click(triggerButton); + }); + + if (shouldIgnoreReactWarning(spy)) { + return; + } + expect(spy).toHaveBeenCalledTimes(0); let menu = wrapper.queryByRole("menu"); @@ -186,7 +189,9 @@ describe("Dropdown", () => { expect(onOpenChange).toHaveBeenCalledTimes(0); - await user.click(triggerButton); + await act(async () => { + await user.click(triggerButton); + }); expect(onOpenChange).toHaveBeenCalledTimes(1); @@ -201,7 +206,9 @@ describe("Dropdown", () => { expect(menuItems.length).toBe(4); - await user.click(menuItems[1]); + await act(async () => { + await user.click(menuItems[1]); + }); expect(onSelectionChange).toHaveBeenCalledTimes(1); expect(onOpenChange).toHaveBeenCalled(); @@ -236,7 +243,9 @@ describe("Dropdown", () => { expect(onOpenChange).toHaveBeenCalledTimes(0); - await user.click(triggerButton); + await act(async () => { + await user.click(triggerButton); + }); expect(onOpenChange).toHaveBeenCalledTimes(1); @@ -251,7 +260,9 @@ describe("Dropdown", () => { expect(menuItems.length).toBe(4); - await user.click(menuItems[0]); + await act(async () => { + await user.click(menuItems[0]); + }); expect(onSelectionChange).toHaveBeenCalledTimes(1); expect(onOpenChange).toHaveBeenCalled(); @@ -362,7 +373,7 @@ describe("Dropdown", () => { it("should not open on disabled button", async () => { const wrapper = render( - + @@ -543,7 +560,7 @@ describe("Dropdown", () => { - + @@ -565,29 +582,26 @@ describe("Dropdown", () => { expect(dropdown).toBeVisible(); expect(dropdown2).toBeVisible(); - // open the dropdown listbox by clicking dropdown button in the first dropdown - await user.click(dropdown); + // Wrap click events in act() + await act(async () => { + await user.click(dropdown); + }); - // assert that the first dropdown listbox is open expect(dropdown).toHaveAttribute("aria-expanded", "true"); - - // assert that the second dropdown listbox is close expect(dropdown2).toHaveAttribute("aria-expanded", "false"); - // close the dropdown listbox by clicking the second dropdown - await user.click(dropdown2); + await act(async () => { + await user.click(dropdown2); + }); - // assert that the first dropdown listbox is closed expect(dropdown).toHaveAttribute("aria-expanded", "false"); - - // assert that the second dropdown listbox is open expect(dropdown2).toHaveAttribute("aria-expanded", "true"); }); describe("Keyboard interactions", () => { it("should focus on the first item on keyDown (Enter)", async () => { const wrapper = render( - + @@ -625,7 +639,7 @@ describe("Dropdown", () => { it("should focus on the first item on keyDown (Space)", async () => { const wrapper = render( - + @@ -665,7 +679,7 @@ describe("Dropdown", () => { const logSpy = jest.spyOn(console, "log").mockImplementation(() => {}); const wrapper = render( - + @@ -708,7 +722,9 @@ describe("Dropdown", () => { expect(menuItems[0]).toHaveFocus(); - await user.keyboard("[Enter]"); + await act(async () => { + await user.keyboard("[Enter]"); + }); expect(logSpy).toHaveBeenCalledWith("ENTER"); @@ -719,7 +735,7 @@ describe("Dropdown", () => { const logSpy = jest.spyOn(console, "log").mockImplementation(() => {}); const wrapper = render( - + @@ -762,7 +778,9 @@ describe("Dropdown", () => { expect(menuItems[0]).toHaveFocus(); - await user.keyboard("[Space]"); + await act(async () => { + await user.keyboard("[Space]"); + }); expect(logSpy).toHaveBeenCalledWith("SPACE"); @@ -787,16 +805,24 @@ describe("Dropdown", () => { let triggerButton = wrapper.getByTestId("trigger-test"); - await user.click(triggerButton); + await act(async () => { + await user.click(triggerButton); + }); expect(onOpenChange).toHaveBeenCalledTimes(1); let menuItems = wrapper.getAllByRole("menuitem"); - await user.click(menuItems[0]); + await act(async () => { + await user.click(menuItems[0]); + }); + expect(onOpenChange).toHaveBeenCalledTimes(1); - await user.click(menuItems[1]); + await act(async () => { + await user.click(menuItems[1]); + }); + expect(onOpenChange).toHaveBeenCalledTimes(2); }); @@ -829,12 +855,18 @@ describe("Dropdown", () => { let triggerButton = wrapper.getByTestId("trigger-test"); - await user.click(triggerButton); + await act(async () => { + await user.click(triggerButton); + }); + expect(onOpenChange).toHaveBeenCalledTimes(1); let menuItems = wrapper.getAllByRole("menuitem"); - await user.click(menuItems[0]); + await act(async () => { + await user.click(menuItems[0]); + }); + expect(onOpenChange).toHaveBeenCalledTimes(2); }); }); diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json index 61049b7d91..392d4ae764 100644 --- a/packages/components/dropdown/package.json +++ b/packages/components/dropdown/package.json @@ -63,8 +63,8 @@ "@heroui/user": "workspace:*", "clean-package": "2.2.0", "framer-motion": "11.9.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } diff --git a/packages/components/form/package.json b/packages/components/form/package.json index 80ac07282c..c9b39d571c 100644 --- a/packages/components/form/package.json +++ b/packages/components/form/package.json @@ -52,8 +52,8 @@ "devDependencies": { "@heroui/button": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } diff --git a/packages/components/image/package.json b/packages/components/image/package.json index 3201e74b14..eab43d16df 100644 --- a/packages/components/image/package.json +++ b/packages/components/image/package.json @@ -48,8 +48,8 @@ "@heroui/theme": "workspace:*", "@heroui/system": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/input-otp/package.json b/packages/components/input-otp/package.json index b30869ce64..f8de8bd81d 100644 --- a/packages/components/input-otp/package.json +++ b/packages/components/input-otp/package.json @@ -56,8 +56,8 @@ "@heroui/system": "workspace:*", "@heroui/button": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0", + "react": "18.3.0", + "react-dom": "18.3.0", "react-hook-form": "^7.51.3" }, "clean-package": "../../../clean-package.config.json" diff --git a/packages/components/input/package.json b/packages/components/input/package.json index c639d5222f..39e0b65a6c 100644 --- a/packages/components/input/package.json +++ b/packages/components/input/package.json @@ -58,8 +58,8 @@ "@heroui/system": "workspace:*", "@heroui/theme": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0", + "react": "18.3.0", + "react-dom": "18.3.0", "react-hook-form": "^7.51.3" }, "clean-package": "../../../clean-package.config.json" diff --git a/packages/components/kbd/__tests__/kbd.test.tsx b/packages/components/kbd/__tests__/kbd.test.tsx index a4b38b593c..8d48565ef8 100644 --- a/packages/components/kbd/__tests__/kbd.test.tsx +++ b/packages/components/kbd/__tests__/kbd.test.tsx @@ -1,5 +1,6 @@ import * as React from "react"; import {render} from "@testing-library/react"; +import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils"; import {Kbd} from "../src"; @@ -8,6 +9,12 @@ describe("Kbd", () => { const wrapper = render(); expect(() => wrapper.unmount()).not.toThrow(); + + if (shouldIgnoreReactWarning(spy)) { + return; + } + + expect(spy).toHaveBeenCalledTimes(0); }); it("ref should be forwarded", () => { diff --git a/packages/components/kbd/package.json b/packages/components/kbd/package.json index 53626c2f3f..235c38fe6a 100644 --- a/packages/components/kbd/package.json +++ b/packages/components/kbd/package.json @@ -46,9 +46,10 @@ }, "devDependencies": { "@heroui/theme": "workspace:*", + "@heroui/test-utils": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/link/package.json b/packages/components/link/package.json index 83f060ef54..b1e5aa131d 100644 --- a/packages/components/link/package.json +++ b/packages/components/link/package.json @@ -53,8 +53,8 @@ "@heroui/theme": "workspace:*", "@heroui/system": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/listbox/package.json b/packages/components/listbox/package.json index f96cb29ed5..f613bdcca5 100644 --- a/packages/components/listbox/package.json +++ b/packages/components/listbox/package.json @@ -63,8 +63,8 @@ "@heroui/system": "workspace:*", "@heroui/theme": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/menu/package.json b/packages/components/menu/package.json index 09eac19346..7cb7fbb5ea 100644 --- a/packages/components/menu/package.json +++ b/packages/components/menu/package.json @@ -58,10 +58,10 @@ "@heroui/theme": "workspace:*", "@heroui/system": "workspace:*", "@heroui/test-utils": "workspace:*", - "clean-package": "2.2.0", "@heroui/shared-icons": "workspace:*", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "clean-package": "2.2.0", + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/modal/__tests__/modal.test.tsx b/packages/components/modal/__tests__/modal.test.tsx index 3e73ec156f..304a6e89dd 100644 --- a/packages/components/modal/__tests__/modal.test.tsx +++ b/packages/components/modal/__tests__/modal.test.tsx @@ -1,14 +1,11 @@ import "@testing-library/jest-dom"; import * as React from "react"; import {render, fireEvent} from "@testing-library/react"; +import {shouldIgnoreReactWarning, spy} from "@heroui/test-utils"; import userEvent from "@testing-library/user-event"; import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter, useDraggable} from "../src"; -// e.g. console.error Warning: Function components cannot be given refs. -// Attempts to access this ref will fail. Did you mean to use React.forwardRef()? -const spy = jest.spyOn(console, "error").mockImplementation(() => {}); - const ModalDraggable = ({canOverflow = false, isDisabled = false}) => { const targetRef = React.useRef(null); @@ -43,6 +40,9 @@ describe("Modal", () => { expect(() => wrapper.unmount()).not.toThrow(); + if (shouldIgnoreReactWarning(spy)) { + return; + } expect(spy).toHaveBeenCalledTimes(0); }); diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json index cb92e4bed5..3457618998 100644 --- a/packages/components/modal/package.json +++ b/packages/components/modal/package.json @@ -66,11 +66,12 @@ "@heroui/button": "workspace:*", "@heroui/link": "workspace:*", "@heroui/switch": "workspace:*", + "@heroui/test-utils": "workspace:*", "react-lorem-component": "0.13.0", "framer-motion": "11.9.0", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/navbar/__tests__/navbar.test.tsx b/packages/components/navbar/__tests__/navbar.test.tsx index d2d9c4355c..ff576fc98d 100644 --- a/packages/components/navbar/__tests__/navbar.test.tsx +++ b/packages/components/navbar/__tests__/navbar.test.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import {render} from "@testing-library/react"; import userEvent, {UserEvent} from "@testing-library/user-event"; +import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils"; import { Navbar, @@ -14,10 +15,6 @@ import { window.scrollTo = jest.fn(); -// e.g. console.error Warning: Function components cannot be given refs. -// Attempts to access this ref will fail. Did you mean to use React.forwardRef()? -const spy = jest.spyOn(console, "error").mockImplementation(() => {}); - describe("Navbar", () => { let user: UserEvent; @@ -28,6 +25,7 @@ describe("Navbar", () => { afterEach(() => { jest.clearAllMocks(); }); + it("should render correctly", () => { const wrapper = render(); @@ -94,6 +92,10 @@ describe("Navbar", () => { await user.click(toggle); + if (shouldIgnoreReactWarning(spy)) { + return; + } + expect(spy).toHaveBeenCalledTimes(0); }); diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json index bf34fc9076..ce37160280 100644 --- a/packages/components/navbar/package.json +++ b/packages/components/navbar/package.json @@ -62,12 +62,13 @@ "@heroui/dropdown": "workspace:*", "@heroui/input": "workspace:*", "@heroui/link": "workspace:*", + "@heroui/test-utils": "workspace:*", "@heroui/shared-icons": "workspace:*", "framer-motion": "11.9.0", "react-lorem-component": "0.13.0", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/pagination/__tests__/pagination.test.tsx b/packages/components/pagination/__tests__/pagination.test.tsx index 71db770711..150d59aa20 100644 --- a/packages/components/pagination/__tests__/pagination.test.tsx +++ b/packages/components/pagination/__tests__/pagination.test.tsx @@ -1,5 +1,6 @@ import * as React from "react"; import {render} from "@testing-library/react"; +import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils"; import {Pagination} from "../src"; @@ -8,6 +9,12 @@ describe("Pagination", () => { const wrapper = render(); expect(() => wrapper.unmount()).not.toThrow(); + + if (shouldIgnoreReactWarning(spy)) { + return; + } + + expect(spy).toHaveBeenCalledTimes(0); }); it("ref should be forwarded", () => { diff --git a/packages/components/pagination/package.json b/packages/components/pagination/package.json index ddbbf6f314..fa389867b7 100644 --- a/packages/components/pagination/package.json +++ b/packages/components/pagination/package.json @@ -54,9 +54,10 @@ "devDependencies": { "@heroui/theme": "workspace:*", "@heroui/system": "workspace:*", + "@heroui/test-utils": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/popover/__tests__/popover.test.tsx b/packages/components/popover/__tests__/popover.test.tsx index 803ed0094e..7941e046da 100644 --- a/packages/components/popover/__tests__/popover.test.tsx +++ b/packages/components/popover/__tests__/popover.test.tsx @@ -3,14 +3,11 @@ import * as React from "react"; import {render, fireEvent, act} from "@testing-library/react"; import userEvent, {UserEvent} from "@testing-library/user-event"; import {Button} from "@heroui/button"; +import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils"; import {Popover, PopoverContent, PopoverTrigger} from "../src"; import {Select, SelectItem} from "../../select/src"; -// e.g. console.error Warning: Function components cannot be given refs. -// Attempts to access this ref will fail. Did you mean to use React.forwardRef()? -const spy = jest.spyOn(console, "error").mockImplementation(() => {}); - describe("Popover", () => { let user: UserEvent; @@ -53,7 +50,9 @@ describe("Popover", () => { // open popover await user.click(trigger); - expect(spy).toHaveBeenCalledTimes(0); + if (!shouldIgnoreReactWarning(spy)) { + expect(spy).toHaveBeenCalledTimes(0); + } }); it("ref should be forwarded", () => { diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json index 5b81d45594..d4e4c15fd3 100644 --- a/packages/components/popover/package.json +++ b/packages/components/popover/package.json @@ -63,10 +63,11 @@ "@heroui/input": "workspace:*", "@heroui/system": "workspace:*", "@heroui/theme": "workspace:*", + "@heroui/test-utils": "workspace:*", "clean-package": "2.2.0", "framer-motion": "11.9.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } diff --git a/packages/components/progress/package.json b/packages/components/progress/package.json index 0eb604c182..7e4194fbdf 100644 --- a/packages/components/progress/package.json +++ b/packages/components/progress/package.json @@ -54,8 +54,8 @@ "@heroui/card": "workspace:*", "@heroui/chip": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/radio/package.json b/packages/components/radio/package.json index 27c3c70fbf..dc989a03e0 100644 --- a/packages/components/radio/package.json +++ b/packages/components/radio/package.json @@ -56,9 +56,10 @@ "@heroui/theme": "workspace:*", "@heroui/system": "workspace:*", "@heroui/button": "workspace:*", + "@heroui/test-utils": "workspace:*", "clean-package": "2.2.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json index 8343e2eb36..20121afeed 100644 --- a/packages/components/ripple/package.json +++ b/packages/components/ripple/package.json @@ -50,8 +50,8 @@ "@heroui/system": "workspace:*", "clean-package": "2.2.0", "framer-motion": "11.9.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/scroll-shadow/package.json b/packages/components/scroll-shadow/package.json index 5d3ae50110..6d69427ad3 100644 --- a/packages/components/scroll-shadow/package.json +++ b/packages/components/scroll-shadow/package.json @@ -49,8 +49,8 @@ "@heroui/system": "workspace:*", "clean-package": "2.2.0", "react-lorem-component": "0.13.0", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "18.3.0", + "react-dom": "18.3.0" }, "clean-package": "../../../clean-package.config.json" } \ No newline at end of file diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx index 874e57d7db..e189af03c0 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/packages/components/select/__tests__/select.test.tsx @@ -1,8 +1,10 @@ import type {SelectProps} from "../src"; +import "@testing-library/jest-dom"; import * as React from "react"; -import {act, render, renderHook, waitFor} from "@testing-library/react"; +import {render, renderHook, waitFor, act} from "@testing-library/react"; import userEvent, {UserEvent} from "@testing-library/user-event"; +import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils"; import {useForm} from "react-hook-form"; import {Form} from "@heroui/form"; @@ -58,15 +60,24 @@ describe("Select", () => { user = userEvent.setup(); }); + afterEach(() => { + jest.clearAllMocks(); + }); + it("should render correctly", () => { const wrapper = render( - Penguin Zebra Shark , ); + if (shouldIgnoreReactWarning(spy)) { + return; + } + + expect(spy).toHaveBeenCalledTimes(0); expect(() => wrapper.unmount()).not.toThrow(); }); @@ -74,7 +85,7 @@ describe("Select", () => { const ref = React.createRef(); render( - Penguin Zebra Shark @@ -85,7 +96,12 @@ describe("Select", () => { it("should render correctly (dynamic)", () => { const wrapper = render( - {(item) => {item.label}} , ); @@ -95,7 +111,7 @@ describe("Select", () => { it("should render correctly with section (static)", () => { const wrapper = render( - Penguin @@ -111,7 +127,12 @@ describe("Select", () => { it("should render correctly with section (dynamic)", () => { const wrapper = render( - {(section) => ( aria-label={section.title} @@ -133,6 +154,7 @@ describe("Select", () => { const wrapper = render( { expect(listboxItems.length).toBe(3); - await user.click(listboxItems[1]); - await user.click(listboxItems[2]); + await act(async () => { + await user.click(listboxItems[1]); + await user.click(listboxItems[2]); + }); expect(onSelectionChange).toHaveBeenCalledTimes(2); }); @@ -199,6 +225,7 @@ describe("Select", () => { return ( { Modal header { const wrapper = render( { const onSelectionChangeId = jest.fn(); const wrapperWithId = render( { it("should display selected items as comma-separated string inside the select", async () => { const wrapper = render( + - Penguin @@ -536,6 +585,7 @@ describe("Select", () => { it("should display placeholder text when unselected", async () => { const wrapper = render( { }} > + { const wrapper = render( { render( { expect(select).not.toHaveAttribute("aria-describedby"); await user.click(getByTestId("button")); + expect(select).toHaveAttribute("aria-describedby"); expect(document.getElementById(select.getAttribute("aria-describedby")!)).toHaveTextContent( "Invalid value", @@ -833,6 +896,7 @@ describe("Select", () => { it("should not open dropdown when hideEmptyContent is true", async () => { const wrapper = render( { const wrapper = render(
- {options.map((o) => ( {o} @@ -928,7 +999,13 @@ describe("Select virtualization tests", () => { const wrapper = render(
- {options.map((o) => ( {o} @@ -973,6 +1050,7 @@ describe("Select virtualization tests", () => { const wrapper = render(
{ wrapper = render(
{ const {getByTestId} = render(