Skip to content

Commit da5d7f4

Browse files
leecalcoteCopilot
leecalcote
and
Copilot
authored
test(deps): make suite pass on React 19 / MUI 9 / chai 6 (#56)
* test(deps): make suite pass on React 19 / MUI 9 / chai 6 The dep upgrade left the test stack split between two React eras: enzyme + react-shallow-renderer + the cfaester adapter were built for the React 17/18 internals, while React 19 ships a different shared-internals shape, removed findDOMNode and Simulate, and freezes elements with a fiber back-reference that breaks circular-graph assertions. Reconstruct the legacy surface from inside the test setup, migrate the two components whose APIs broke, and externalize runtime deps in rollup so the bundle stops warning about subpath imports it shouldn't be inlining. - test/setup-mocha-env.js: stub `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`, route React.use* through the shallow renderer's dispatcher, polyfill findDOMNode by walking the fiber tree, rebuild Simulate as native event dispatch (with input-tracker reset and checkbox-via-click handling), and skip Object.freeze for React elements so `_owner` can be cleared at creation time. - src/components/TablePagination.js: migrate `backIconButtonProps`/`nextIconButtonProps`/`SelectProps` to MUI v9's `slotProps.actions.{previousButton,nextButton}` / `slotProps.select`. - src/components/TableToolbar.js: replace the dropped `<ReactToPrint>` / `<PrintContextConsumer>` pair with a `useReactToPrint` hook wrapper. - rollup.config.js: derive externals from package.json so peerDeps and `@babel/runtime-corejs3/*` subpaths don't trigger "Unresolved dependencies". - package.json: pin react-is to ^19.2.5 via overrides so the adapter's isElement check recognizes React 19's `react.transitional.element` symbol. Signed-off-by: Lee Calcote <lee.calcote@layer5.io> * fix(test): tighten findDOMNode polyfill and Simulate alias map - findDOMNode: walk the BFS queue with an index pointer instead of array shift so traversal stays O(n) on larger fiber trees. - Simulate: map doubleClick -> dblclick (the actual DOM type) and route it through MouseEvent so onDoubleClick handlers fire. Signed-off-by: Lee Calcote <lee.calcote@layer5.io> * No new changes needed — re-reviewing latest state Agent-Logs-Url: https://github.com/layer5io/mui-datatables/sessions/b0c2f601-a18d-4cc1-a2e8-72245263a539 Co-authored-by: leecalcote <7570704+leecalcote@users.noreply.github.com> --------- Signed-off-by: Lee Calcote <lee.calcote@layer5.io> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
1 parent 025a496 commit da5d7f4

6 files changed

Lines changed: 351 additions & 111 deletions

File tree

‎package-lock.json‎

Lines changed: 34 additions & 61 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,8 @@
133133
"test-exclude": "^8.0.0",
134134
"diff": "^8.0.4",
135135
"minimatch": ">=3.1.4",
136-
"serialize-javascript": "^7.0.4"
136+
"serialize-javascript": "^7.0.4",
137+
"react-is": "^19.2.5"
137138
},
138139
"side-effects": false,
139140
"nyc": {

‎rollup.config.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,24 @@ import babel from '@rollup/plugin-babel';
22
import commonjs from '@rollup/plugin-commonjs';
33
import replace from '@rollup/plugin-replace';
44
import uglify from '@lopatnov/rollup-plugin-uglify';
5+
import { createRequire } from 'module';
6+
7+
const pkg = createRequire(import.meta.url)('./package.json');
8+
9+
// Treat anything declared as a dependency or peerDependency as external —
10+
// including subpath imports like `@babel/runtime-corejs3/helpers/extends` —
11+
// since they belong to the consumer's resolution graph, not our bundle.
12+
const externals = [
13+
...Object.keys(pkg.dependencies || {}),
14+
...Object.keys(pkg.peerDependencies || {}),
15+
];
16+
const externalRegex = new RegExp(
17+
'^(' + externals.map((d) => d.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&')).join('|') + ')(/|$)',
18+
);
519

620
export default {
721
input: 'src/index.js',
22+
external: (id) => externalRegex.test(id),
823
plugins: [
924
replace({
1025
'process.env.NODE_ENV': JSON.stringify('production'),

‎src/components/TablePagination.js‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -75,25 +75,29 @@ function TablePagination(props) {
7575
page={getPageValue(count, rowsPerPage, page)}
7676
labelRowsPerPage={textLabels.rowsPerPage}
7777
labelDisplayedRows={({ from, to, count }) => `${from}-${to} ${textLabels.displayRows} ${count}`}
78-
backIconButtonProps={{
79-
id: 'pagination-back',
80-
'data-testid': 'pagination-back',
81-
'aria-label': textLabels.previous,
82-
title: textLabels.previous || '',
83-
}}
84-
nextIconButtonProps={{
85-
id: 'pagination-next',
86-
'data-testid': 'pagination-next',
87-
'aria-label': textLabels.next,
88-
title: textLabels.next || '',
89-
}}
90-
SelectProps={{
91-
id: 'pagination-input',
92-
SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' },
93-
MenuProps: {
94-
id: 'pagination-menu',
95-
'data-testid': 'pagination-menu',
96-
MenuListProps: { id: 'pagination-menu-list', 'data-testid': 'pagination-menu-list' },
78+
slotProps={{
79+
actions: {
80+
previousButton: {
81+
id: 'pagination-back',
82+
'data-testid': 'pagination-back',
83+
'aria-label': textLabels.previous,
84+
title: textLabels.previous || '',
85+
},
86+
nextButton: {
87+
id: 'pagination-next',
88+
'data-testid': 'pagination-next',
89+
'aria-label': textLabels.next,
90+
title: textLabels.next || '',
91+
},
92+
},
93+
select: {
94+
id: 'pagination-input',
95+
SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' },
96+
MenuProps: {
97+
id: 'pagination-menu',
98+
'data-testid': 'pagination-menu',
99+
MenuListProps: { id: 'pagination-menu-list', 'data-testid': 'pagination-menu-list' },
100+
},
97101
},
98102
}}
99103
rowsPerPageOptions={options.rowsPerPageOptions}

‎src/components/TableToolbar.js‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Popover from './Popover';
1111
import TableFilter from './TableFilter';
1212
import TableViewCol from './TableViewCol';
1313
import TableSearch from './TableSearch';
14-
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
14+
import { useReactToPrint } from 'react-to-print';
1515
import find from 'lodash.find';
1616
import { withStyles } from 'tss-react/mui';
1717
import { createCSVDownload, downloadCSV } from '../utils';
@@ -103,6 +103,27 @@ export const defaultToolbarStyles = (theme) => ({
103103

104104
const RESPONSIVE_FULL_WIDTH_NAME = 'scrollFullHeightFullWidth';
105105

106+
const PrintButton = ({ getContent, classes, IconComponent, options, print, Tooltip }) => {
107+
const contentRef = React.useRef(null);
108+
const handlePrint = useReactToPrint({ contentRef });
109+
const onClick = () => {
110+
contentRef.current = getContent();
111+
handlePrint();
112+
};
113+
return (
114+
<Tooltip title={print}>
115+
<IconButton
116+
data-testid={print + '-iconButton'}
117+
aria-label={print}
118+
disabled={options.print === 'disabled'}
119+
onClick={onClick}
120+
classes={{ root: classes.icon }}>
121+
<IconComponent />
122+
</IconButton>
123+
</Tooltip>
124+
);
125+
};
126+
106127
class TableToolbar extends React.Component {
107128
state = {
108129
iconActive: null,
@@ -379,24 +400,14 @@ class TableToolbar extends React.Component {
379400
)}
380401
{!(options.print === false || options.print === 'false') && (
381402
<span>
382-
<ReactToPrint content={() => this.props.tableRef()}>
383-
<PrintContextConsumer>
384-
{({ handlePrint }) => (
385-
<span>
386-
<Tooltip title={print}>
387-
<IconButton
388-
data-testid={print + '-iconButton'}
389-
aria-label={print}
390-
disabled={options.print === 'disabled'}
391-
onClick={handlePrint}
392-
classes={{ root: classes.icon }}>
393-
<PrintIconComponent />
394-
</IconButton>
395-
</Tooltip>
396-
</span>
397-
)}
398-
</PrintContextConsumer>
399-
</ReactToPrint>
403+
<PrintButton
404+
getContent={() => this.props.tableRef()}
405+
classes={classes}
406+
IconComponent={PrintIconComponent}
407+
options={options}
408+
print={print}
409+
Tooltip={Tooltip}
410+
/>
400411
</span>
401412
)}
402413
{!(options.viewColumns === false || options.viewColumns === 'false') && (

0 commit comments

Comments
 (0)