From 853be7e0448a48cfe37ba905f8afc1164f84809f Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Tue, 24 Dec 2024 19:33:50 +0900 Subject: [PATCH] feat!: support React19 & drop React 16,17 support --- .github/workflows/ci.yml | 4 +- package.json | 7 ++- test/CSSTransitionGroup-test.js | 11 ++-- test/Transition-test.js | 30 ---------- test/setupAfterEnv.js | 2 +- test/utils.js | 2 +- yarn.lock | 103 +++++++++++++++----------------- 7 files changed, 59 insertions(+), 100 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 08d7ad2d..f2acaf2a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -14,7 +14,7 @@ jobs: # Otherwise how would we know if a specific React version caused the failure? fail-fast: false matrix: - REACT_DIST: [16, 17, 18] + REACT_DIST: [18, 19] steps: - uses: actions/checkout@v2 - name: Use Node.js 14 @@ -24,8 +24,6 @@ jobs: cache: 'npm' - run: yarn - run: yarn add react@${{ matrix.REACT_DIST }} react-dom@${{ matrix.REACT_DIST }} - - run: yarn add @testing-library/react@12 - if: matrix.REACT_DIST == '17' || matrix.REACT_DIST == '16' - run: yarn --cwd www # Test whether the web page can be built successfully or not - run: yarn --cwd www build diff --git a/package.json b/package.json index 72a435e0..fe1c9823 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,8 @@ "@semantic-release/npm": "^7.0.5", "@storybook/addon-actions": "^6.3.4", "@storybook/react": "^6.3.4", - "@testing-library/react": "alpha", + "@testing-library/dom": "^10.4.0", + "@testing-library/react": "^16.1.0", "@typescript-eslint/eslint-plugin": "^4.26.1", "astroturf": "^0.10.4", "babel-eslint": "^10.1.0", @@ -99,8 +100,8 @@ "jest": "^25.3.0", "npm-run-all": "^4.1.5", "prettier": "^2.3.1", - "react": "^18.0.0", - "react-dom": "^18.0.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", "release-script": "^1.0.2", "rimraf": "^3.0.2", "rollup": "^2.6.1", diff --git a/test/CSSTransitionGroup-test.js b/test/CSSTransitionGroup-test.js index 3f37106c..e580d1e1 100644 --- a/test/CSSTransitionGroup-test.js +++ b/test/CSSTransitionGroup-test.js @@ -2,7 +2,6 @@ import hasClass from 'dom-helpers/hasClass'; import CSSTransition from '../src/CSSTransition'; let React; -let ReactDOM; let TransitionGroup; let act; let render; @@ -25,9 +24,7 @@ describe('CSSTransitionGroup', () => { beforeEach(() => { jest.resetModuleRegistry(); jest.useFakeTimers(); - React = require('react'); - ReactDOM = require('react-dom'); const testUtils = require('./utils'); act = testUtils.act; const baseRender = testUtils.render; @@ -147,13 +144,14 @@ describe('CSSTransitionGroup', () => { }); it('should work with a child which renders as null', () => { + const nodeRef = React.createRef(); const NullComponent = () => null; // Testing the whole lifecycle of entering and exiting, // because those lifecycle methods used to fail when the DOM node was null. render(, container); render( - + , @@ -208,14 +206,13 @@ describe('CSSTransitionGroup', () => { } render(, container); - render( + const { unmount } = render( , container ); - - ReactDOM.unmountComponentAtNode(container); + unmount(); // Testing that no exception is thrown here, as the timeout has been cleared. act(() => { diff --git a/test/Transition-test.js b/test/Transition-test.js index e9124e14..36d2cf4e 100644 --- a/test/Transition-test.js +++ b/test/Transition-test.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import { render, waitFor } from './utils'; @@ -197,35 +196,6 @@ describe('Transition', () => { }); }); - it('should use `React.findDOMNode` when `nodeRef` is not provided', () => { - const consoleSpy = jest.spyOn(console, 'error').mockImplementation(); - const findDOMNodeSpy = jest.spyOn(ReactDOM, 'findDOMNode'); - - render( - -
- - ); - - expect(findDOMNodeSpy).toHaveBeenCalled(); - findDOMNodeSpy.mockRestore(); - consoleSpy.mockRestore(); - }); - - it('should not use `React.findDOMNode` when `nodeRef` is provided', () => { - const findDOMNodeSpy = jest.spyOn(ReactDOM, 'findDOMNode'); - - const nodeRef = React.createRef(); - render( - -
- - ); - - expect(findDOMNodeSpy).not.toHaveBeenCalled(); - findDOMNodeSpy.mockRestore(); - }); - describe('appearing timeout', () => { it('should use enter timeout if appear not set', async () => { let calledBeforeEntered = false; diff --git a/test/setupAfterEnv.js b/test/setupAfterEnv.js index aa245bf1..2ad3af43 100644 --- a/test/setupAfterEnv.js +++ b/test/setupAfterEnv.js @@ -1,4 +1,4 @@ -import { cleanup } from '@testing-library/react/pure'; +import { cleanup } from '@testing-library/react'; afterEach(() => { cleanup(); diff --git a/test/utils.js b/test/utils.js index e42aae60..c9927a31 100644 --- a/test/utils.js +++ b/test/utils.js @@ -1,4 +1,4 @@ -import { render as baseRender } from '@testing-library/react/pure'; +import { render as baseRender } from '@testing-library/react'; import React from 'react'; export * from '@testing-library/react'; diff --git a/yarn.lock b/yarn.lock index 49a1ec1b..bbc7130b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3492,28 +3492,26 @@ resolve-from "^5.0.0" store2 "^2.12.0" -"@testing-library/dom@^8.5.0": - version "8.12.0" - resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.12.0.tgz#fef5e545533fb084175dda6509ee71d7d2f72e23" - integrity sha512-rBrJk5WjI02X1edtiUcZhgyhgBhiut96r5Jp8J5qktKdcvLcZpKDW8i2hkGMMItxrghjXuQ5AM6aE0imnFawaw== +"@testing-library/dom@^10.4.0": + version "10.4.0" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8" + integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ== dependencies: "@babel/code-frame" "^7.10.4" "@babel/runtime" "^7.12.5" - "@types/aria-query" "^4.2.0" - aria-query "^5.0.0" + "@types/aria-query" "^5.0.1" + aria-query "5.3.0" chalk "^4.1.0" dom-accessibility-api "^0.5.9" - lz-string "^1.4.4" + lz-string "^1.5.0" pretty-format "^27.0.2" -"@testing-library/react@alpha": - version "13.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.0.0-alpha.7.tgz#0537af3a8d45edd925fd0275aee7d409285ef1fe" - integrity sha512-8Y1PvFczthSeow1WZ0Cq6WbOzpVGLGyEQTr+lL6BwXqAf2IykVY8ZN8V21Ch1cTlbZuZJI5UV3gOyrOHrw9YZQ== +"@testing-library/react@^16.1.0": + version "16.1.0" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.1.0.tgz#aa0c61398bac82eaf89776967e97de41ac742d71" + integrity sha512-Q2ToPvg0KsVL0ohND9A3zLJWcOXXcO8IDu3fj11KhNt0UlCWyFyvnCIBkd12tidB2lkiVRG8VFqdhcqhqnAQtg== dependencies: "@babel/runtime" "^7.12.5" - "@testing-library/dom" "^8.5.0" - "@types/react-dom" "*" "@tootallnate/once@1": version "1.0.0" @@ -3525,10 +3523,10 @@ resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a" integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA== -"@types/aria-query@^4.2.0": - version "4.2.2" - resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc" - integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig== +"@types/aria-query@^5.0.1": + version "5.0.4" + resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708" + integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw== "@types/babel__core@^7.1.7": version "7.1.7" @@ -3767,13 +3765,6 @@ dependencies: "@types/react" "*" -"@types/react-dom@*": - version "17.0.14" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f" - integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ== - dependencies: - "@types/react" "*" - "@types/react-syntax-highlighter@11.0.5": version "11.0.5" resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087" @@ -4453,6 +4444,13 @@ argv-formatter@~1.0.0: resolved "https://registry.yarnpkg.com/argv-formatter/-/argv-formatter-1.0.0.tgz#a0ca0cbc29a5b73e836eebe1cbf6c5e0e4eb82f9" integrity sha1-oMoMvCmltz6Dbuvhy/bF4OTrgvk= +aria-query@5.3.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e" + integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A== + dependencies: + dequal "^2.0.3" + aria-query@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b" @@ -4461,11 +4459,6 @@ aria-query@^4.2.2: "@babel/runtime" "^7.10.2" "@babel/runtime-corejs3" "^7.10.2" -aria-query@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c" - integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg== - arr-diff@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520" @@ -6967,6 +6960,11 @@ deprecation@^2.0.0, deprecation@^2.3.1: resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919" integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ== +dequal@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" + integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== + des.js@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843" @@ -7074,9 +7072,9 @@ doctrine@^3.0.0: esutils "^2.0.2" dom-accessibility-api@^0.5.9: - version "0.5.13" - resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.13.tgz#102ee5f25eacce09bdf1cfa5a298f86da473be4b" - integrity sha512-R305kwb5CcMDIpSHUnLyIAp7SrSPBx6F0VfQFB3M75xVMHhXJJIdePYgbPPh1o57vCHNu5QztokWUPsLjWzFqw== + version "0.5.16" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453" + integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg== dom-converter@^0.2: version "0.2.0" @@ -11449,7 +11447,7 @@ lolex@^5.0.0: dependencies: "@sinonjs/commons" "^1.7.0" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -11506,10 +11504,10 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" -lz-string@^1.4.4: - version "1.4.4" - resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" - integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY= +lz-string@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941" + integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ== macos-release@^2.2.0: version "2.3.0" @@ -14354,13 +14352,12 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@^18.0.0: - version "18.0.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023" - integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw== +react-dom@^19.0.0: + version "19.0.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57" + integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ== dependencies: - loose-envify "^1.1.0" - scheduler "^0.21.0" + scheduler "^0.25.0" react-draggable@^4.4.3: version "4.4.3" @@ -14472,12 +14469,10 @@ react-textarea-autosize@^8.3.0: use-composed-ref "^1.0.0" use-latest "^1.0.0" -react@^18.0.0: - version "18.0.0" - resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96" - integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A== - dependencies: - loose-envify "^1.1.0" +react@^19.0.0: + version "19.0.0" + resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd" + integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ== read-chunk@^1.0.1: version "1.0.1" @@ -15250,12 +15245,10 @@ saxes@^3.1.9: dependencies: xmlchars "^2.1.1" -scheduler@^0.21.0: - version "0.21.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820" - integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ== - dependencies: - loose-envify "^1.1.0" +scheduler@^0.25.0: + version "0.25.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015" + integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA== schema-utils@2.7.0: version "2.7.0"