From 541567d250e737aed9ff45a5898bd22f4d58ac91 Mon Sep 17 00:00:00 2001 From: Seth Bertalotto Date: Mon, 9 Dec 2024 11:32:24 -0800 Subject: [PATCH] feat: support react 19 (#1040) --- package.json | 13 +-- tests/unit/Sticky.test.js | 187 +++++++++++++++++++++++++------------- 2 files changed, 130 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index 126a0e5e..1151f17e 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,8 @@ "@babel/preset-env": "^7.9.6", "@babel/preset-react": "^7.9.4", "@babel/register": "^7.9.0", - "@testing-library/react": "^16.0.0", + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/react": "^16.1.0", "@wdio/cli": "^9.4.1", "@wdio/local-runner": "^9.4.1", "@wdio/mocha-framework": "^9.2.8", @@ -78,17 +79,17 @@ "mocha": "^11.0.1", "pre-commit": "^1.0.0", "prettier": "^3.4.2", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "react-test-renderer": "^18.0.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "react-test-renderer": "^19.0.0", "wdio-chromedriver-service": "^8.0.0", "webpack": "^5.41.1", "webpack-cli": "^5.0.0", "webpack-dev-server": "^5.0.4" }, "peerDependencies": { - "react": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + "react": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^0.14.2 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "precommit": [ "lint", diff --git a/tests/unit/Sticky.test.js b/tests/unit/Sticky.test.js index dbcefcc0..9c9b4f3b 100644 --- a/tests/unit/Sticky.test.js +++ b/tests/unit/Sticky.test.js @@ -10,8 +10,9 @@ process.env.NODE_ENV = 'development'; +require('@testing-library/jest-dom'); const ee = require('subscribe-ui-event/dist/globalVars').EE; -const { act, render } = require('@testing-library/react'); +const { act, render, screen } = require('@testing-library/react'); const React = require('react'); const Sticky = require('../../dist/cjs/Sticky'); @@ -484,73 +485,131 @@ describe('Sticky', () => { */ }); - test('should allow the sticky functionality to be toggled off', () => { - var ReactTestUtils = require('react-dom/test-utils'); - var React = require('react'); - - // setup a wrapper to simulate the controlling of the sticky prop - class TestComponent extends React.Component { - constructor(props) { - super(props); - - this.sticky = null; - this.setTextInputRef = (element) => { - this.sticky = element; - }; - - this.state = { boundary: '', enabled: true, name: 'JOE' }; - } - - render() { - return ( + describe('should allow the sticky functionality to be toggled off', () => { + // eslint-disable-next-line react/prop-types + const TestComponent = ({ enabled, boundary, name }) => { + return ( + <> - {this.state.name} - {this.state.enabled &&
} + {name} + {enabled &&
} - ); - } - } - - var parent = ReactTestUtils.renderIntoDocument( - React.createElement(TestComponent, {}), - ); - - // toggle the enabled prop off - act(() => { - parent.setState({ enabled: false }); - }); - expect(parent.refs.sticky.props.enabled).toEqual(false); - expect(parent.refs.sticky.state.activated).toEqual(false); - expect(parent.refs.sticky.props.children).toContain('JOE'); - - // should not error while not enabled & other props changed - act(() => { - parent.setState({ name: 'JENKINS' }); - }); - expect(parent.refs.sticky.props.enabled).toEqual(false); - expect(parent.refs.sticky.props.children).toContain('JENKINS'); - - // should not error while not enabled & boundary changes - act(() => { - parent.setState({ boundary: '-not-present' }); - }); - expect(parent.refs.sticky.props.enabled).toEqual(false); - expect(parent.refs.sticky.props.children).toContain('JENKINS'); - act(() => { - parent.setState({ boundary: '' }); - }); - - // toggle the enabled prop on - act(() => { - parent.setState({ enabled: true }); + + ); + }; + + test('toggles the enabled prop off', () => { + const { rerender } = render( + React.createElement(TestComponent, { + enabled: true, + boundary: '', + name: 'JOE', + }), + ); + + // Assert initial state + expect(screen.getByText('JOE')).toBeInTheDocument(); + + // Use queryByTestId or queryById if 'boundary' refers to an element + const boundaryElement = + screen.queryByTestId('boundary') || + document.getElementById('boundary'); + expect(boundaryElement).toBeInTheDocument(); // This verifies the element exists + + // Toggle the enabled prop off + rerender( + React.createElement(TestComponent, { + enabled: false, + boundary: '', + name: 'JOE', + }), + ); + expect(screen.getByText('JOE')).toBeInTheDocument(); + expect(screen.queryByText('boundary')).toBeNull(); // No boundary div when disabled + }); + + test('updates name while not enabled', () => { + const { rerender } = render( + React.createElement(TestComponent, { + enabled: false, + boundary: '', + name: 'JOE', + }), + ); + + // Update the name prop + rerender( + React.createElement(TestComponent, { + enabled: false, + boundary: '', + name: 'JENKINS', + }), + ); + + // Assert updated state + expect(screen.getByText('JENKINS')).toBeInTheDocument(); + expect(screen.queryByText('boundary')).toBeNull(); // Still disabled + }); + + test('updates boundary while not enabled', () => { + const { rerender } = render( + React.createElement(TestComponent, { + enabled: false, + boundary: '', + name: 'JENKINS', + }), + ); + + // Update the boundary prop + rerender( + React.createElement(TestComponent, { + enabled: false, + boundary: '-not-present', + name: 'JENKINS', + }), + ); + expect(screen.getByText('JENKINS')).toBeInTheDocument(); + expect(screen.queryByText('boundary')).toBeNull(); // Still disabled + + // Reset the boundary + rerender( + React.createElement(TestComponent, { + enabled: false, + boundary: '', + name: 'JENKINS', + }), + ); + expect(screen.getByText('JENKINS')).toBeInTheDocument(); + expect(screen.queryByText('boundary')).toBeNull(); // Still disabled + }); + + test('toggles the enabled prop on', () => { + const { rerender } = render( + React.createElement(TestComponent, { + enabled: false, + boundary: '', + name: 'JENKINS', + }), + ); + + // Toggle the enabled prop on + rerender( + React.createElement(TestComponent, { + enabled: true, + boundary: '', + name: 'JENKINS', + }), + ); + expect(screen.getByText('JENKINS')).toBeInTheDocument(); + // Use queryByTestId or queryById if 'boundary' refers to an element + const boundaryElement = + screen.queryByTestId('boundary') || + document.getElementById('boundary'); + expect(boundaryElement).toBeInTheDocument(); // Boundary div appears }); - expect(parent.refs.sticky.props.enabled).toEqual(true); - expect(parent.refs.sticky.state.activated).toEqual(true); }); test('should apply custom class props', () => {