Skip to content

Commit 3360bc8

Browse files
bernardobelchiorbernardobelchior
committed
Fix tests. Do not expose reactStrictMode.
1 parent cc99bf6 commit 3360bc8

File tree

17 files changed

+74
-34
lines changed

17 files changed

+74
-34
lines changed

‎.mocharc.js

+3
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,7 @@ module.exports = {
2020
'**/build/**',
2121
'docs/.next/**',
2222
],
23+
// detect-modules doesn't work with @babel/register
24+
// https://github.com/babel/babel/issues/6737
25+
'node-option': ['no-experimental-detect-module'],
2326
};

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@
132132
"@pigment-css/react": "0.0.30",
133133
"@playwright/test": "1.51.1",
134134
"@types/babel__core": "^7.20.5",
135+
"@types/babel__register": "^7.17.3",
135136
"@types/fs-extra": "^11.0.4",
136137
"@types/lodash": "^4.17.16",
137138
"@types/mocha": "^10.0.10",

‎packages-internal/test-utils/src/createRenderer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ interface ServerRenderConfiguration extends RenderConfiguration {
233233
container: HTMLElement;
234234
}
235235

236-
export type RenderOptions = Partial<RenderConfiguration>;
236+
export type RenderOptions = Omit<Partial<RenderConfiguration>, 'reactStrictMode'>;
237237

238238
export interface MuiRenderResult extends RenderResult<typeof queries & typeof customQueries> {
239239
user: ReturnType<typeof userEvent.setup>;

‎packages-internal/test-utils/src/setupBabel.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
require('@babel/register')({
2-
extensions: ['.js', '.mjs', '.ts', '.tsx'],
2+
extensions: ['.js', '.mjs', '.cjs', '.jsx', '.ts', '.tsx'],
33
});

‎packages/mui-base/src/Input/Input.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
3-
import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils';
3+
import { createRenderer, fireEvent, screen, act, reactMajor } from '@mui/internal-test-utils';
44
import { expect } from 'chai';
55
import { spy } from 'sinon';
66
import { Input, inputClasses, InputOwnerState } from '@mui/base/Input';
@@ -281,8 +281,8 @@ describe('<Input />', () => {
281281
);
282282
}).toErrorDev([
283283
'MUI: You have provided a `slots.input` to the input component\nthat does not correctly handle the `ref` prop.\nMake sure the `ref` prop is called with a HTMLInputElement.',
284-
// React 18 Strict Effects run mount effects twice
285-
React.version.startsWith('18') &&
284+
// React Strict Mode runs mount effects twice
285+
reactMajor >= 18 &&
286286
'MUI: You have provided a `slots.input` to the input component\nthat does not correctly handle the `ref` prop.\nMake sure the `ref` prop is called with a HTMLInputElement.',
287287
]);
288288
});

‎packages/mui-base/src/Portal/Portal.test.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { expect } from 'chai';
33
import { spy } from 'sinon';
4-
import { createRenderer } from '@mui/internal-test-utils';
4+
import { createRenderer, reactMajor } from '@mui/internal-test-utils';
55
import { Portal, PortalProps } from '@mui/base/Portal';
66

77
describe('<Portal />', () => {
@@ -44,6 +44,7 @@ describe('<Portal />', () => {
4444
<Portal disablePortal ref={refSpy}>
4545
<h1 className="woofPortal">Foo</h1>
4646
</Portal>,
47+
{ strict: reactMajor <= 18 },
4748
);
4849
const mountNode = document.querySelector('.woofPortal');
4950
expect(refSpy.args).to.deep.equal([[mountNode]]);
@@ -57,6 +58,7 @@ describe('<Portal />', () => {
5758
<Portal disablePortal ref={refSpy}>
5859
<h1 className="woofPortal">Foo</h1>
5960
</Portal>,
61+
{ strict: reactMajor <= 18 },
6062
);
6163
const mountNode = document.querySelector('.woofPortal');
6264
expect(refSpy.args).to.deep.equal([[mountNode]]);

‎packages/mui-base/src/useAutocomplete/useAutocomplete.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,14 @@ describe('useAutocomplete', () => {
313313
aboveErrorTestComponentMessage,
314314
aboveErrorTestComponentMessage,
315315
],
316+
19: [
317+
muiErrorMessage,
318+
muiErrorMessage,
319+
nodeErrorMessage,
320+
nodeErrorMessage,
321+
nodeErrorMessage,
322+
nodeErrorMessage,
323+
],
316324
};
317325

318326
const devErrorMessages = errorMessagesByReactMajor[reactMajor] || defaultErrorMessages;

‎packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -1931,7 +1931,8 @@ describe('Joy <Autocomplete />', () => {
19311931

19321932
await user.click(screen.getByText('Reset'));
19331933

1934-
const expectedCallCount = reactMajor === 18 ? 4 : 2;
1934+
// eslint-disable-next-line no-nested-ternary
1935+
const expectedCallCount = reactMajor >= 19 ? 3 : reactMajor === 18 ? 4 : 2;
19351936

19361937
expect(handleInputChange.callCount).to.equal(expectedCallCount);
19371938
expect(handleInputChange.args[expectedCallCount - 1][1]).to.equal(options[1].name);
@@ -2209,7 +2210,8 @@ describe('Joy <Autocomplete />', () => {
22092210

22102211
expect(handleHighlightChange.callCount).to.equal(
22112212
// FIXME: highlighted index implementation should be implemented using React not the DOM.
2212-
reactMajor >= 18 ? 4 : 3,
2213+
// eslint-disable-next-line no-nested-ternary
2214+
reactMajor >= 19 ? 5 : reactMajor >= 18 ? 4 : 3,
22132215
);
22142216
if (reactMajor >= 18) {
22152217
expect(handleHighlightChange.args[2][0]).to.equal(undefined);
@@ -2223,7 +2225,8 @@ describe('Joy <Autocomplete />', () => {
22232225
fireEvent.keyDown(textbox, { key: 'ArrowDown' });
22242226
expect(handleHighlightChange.callCount).to.equal(
22252227
// FIXME: highlighted index implementation should be implemented using React not the DOM.
2226-
reactMajor >= 18 ? 5 : 4,
2228+
// eslint-disable-next-line no-nested-ternary
2229+
reactMajor >= 19 ? 6 : reactMajor >= 18 ? 5 : 4,
22272230
);
22282231
expect(handleHighlightChange.lastCall.args[0]).not.to.equal(undefined);
22292232
expect(handleHighlightChange.lastCall.args[1]).to.equal(options[1]);
@@ -2240,7 +2243,8 @@ describe('Joy <Autocomplete />', () => {
22402243
fireEvent.mouseMove(firstOption);
22412244
expect(handleHighlightChange.callCount).to.equal(
22422245
// FIXME: highlighted index implementation should be implemented using React not the DOM.
2243-
reactMajor >= 18 ? 4 : 3,
2246+
// eslint-disable-next-line no-nested-ternary
2247+
reactMajor >= 19 ? 5 : reactMajor >= 18 ? 4 : 3,
22442248
);
22452249
if (reactMajor >= 18) {
22462250
expect(handleHighlightChange.args[2][0]).to.equal(undefined);

‎packages/mui-material/src/InputBase/InputBase.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ describe('<InputBase />', () => {
282282

283283
let expectedOccurrences = 1;
284284

285-
if (reactMajor === 18) {
285+
if (reactMajor >= 18) {
286286
expectedOccurrences = 2;
287287
}
288288

@@ -507,7 +507,7 @@ describe('<InputBase />', () => {
507507

508508
let expectedOccurrences = 1;
509509

510-
if (reactMajor === 18) {
510+
if (reactMajor >= 18) {
511511
expectedOccurrences = 2;
512512
}
513513
expect(() => {

‎packages/mui-material/src/Portal/Portal.test.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { expect } from 'chai';
33
import { spy } from 'sinon';
4-
import { createRenderer } from '@mui/internal-test-utils';
4+
import { createRenderer, reactMajor } from '@mui/internal-test-utils';
55
import Portal, { PortalProps } from '@mui/material/Portal';
66

77
describe('<Portal />', () => {
@@ -44,6 +44,7 @@ describe('<Portal />', () => {
4444
<Portal disablePortal ref={refSpy}>
4545
<h1 className="woofPortal">Foo</h1>
4646
</Portal>,
47+
{ strict: reactMajor <= 18 },
4748
);
4849
const mountNode = document.querySelector('.woofPortal');
4950
expect(refSpy.args).to.deep.equal([[mountNode]]);
@@ -57,6 +58,7 @@ describe('<Portal />', () => {
5758
<Portal disablePortal ref={refSpy}>
5859
<h1 className="woofPortal">Foo</h1>
5960
</Portal>,
61+
{ strict: reactMajor <= 18 },
6062
);
6163
const mountNode = document.querySelector('.woofPortal');
6264
expect(refSpy.args).to.deep.equal([[mountNode]]);

‎packages/mui-material/src/Select/Select.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -380,7 +380,7 @@ describe('<Select />', () => {
380380

381381
let expectedOccurrences = 2;
382382

383-
if (reactMajor === 18) {
383+
if (reactMajor >= 18) {
384384
expectedOccurrences = 3;
385385
}
386386

‎packages/mui-material/src/Tabs/Tabs.test.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -372,11 +372,11 @@ describe('<Tabs />', () => {
372372
);
373373
}).toErrorDev([
374374
'You can provide one of the following values: 1, 3',
375-
// React 18 Strict Effects run mount effects twice
376-
reactMajor === 18 && 'You can provide one of the following values: 1, 3',
375+
// React Strict Mode runs mount effects twice
376+
reactMajor >= 18 && 'You can provide one of the following values: 1, 3',
377377
'You can provide one of the following values: 1, 3',
378-
// React 18 Strict Effects run mount effects twice
379-
reactMajor === 18 && 'You can provide one of the following values: 1, 3',
378+
// React Strict Mode runs mount effects twice
379+
reactMajor >= 18 && 'You can provide one of the following values: 1, 3',
380380
'You can provide one of the following values: 1, 3',
381381
'You can provide one of the following values: 1, 3',
382382
]);

‎packages/mui-material/src/styles/ThemeProviderWithVars.test.js

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { expect } from 'chai';
3-
import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
3+
import { createRenderer, screen, fireEvent, reactMajor } from '@mui/internal-test-utils';
44
import Box from '@mui/material/Box';
55
import {
66
CssVarsProvider,
@@ -470,11 +470,11 @@ describe('[Material UI] ThemeProviderWithVars', () => {
470470
}
471471
const { container } = render(<App />);
472472

473-
expect(container).to.have.text('1 light');
473+
expect(container).to.have.text(`${reactMajor >= 19 ? 2 : 1} light`);
474474

475475
fireEvent.click(screen.getByRole('button'));
476476

477-
expect(container).to.have.text('1 light');
477+
expect(container).to.have.text(`${reactMajor >= 19 ? 2 : 1} light`);
478478
});
479479

480480
it('palette mode should change if not using CSS variables', () => {
@@ -505,12 +505,14 @@ describe('[Material UI] ThemeProviderWithVars', () => {
505505
}
506506
const { container } = render(<App />);
507507

508-
expect(container).to.have.text(`1 light ${createTheme().palette.primary.main}`);
508+
expect(container).to.have.text(
509+
`${reactMajor >= 19 ? 2 : 1} light ${createTheme().palette.primary.main}`,
510+
);
509511

510512
fireEvent.click(screen.getByRole('button'));
511513

512514
expect(container).to.have.text(
513-
`2 dark ${createTheme({ palette: { mode: 'dark' } }).palette.primary.main}`,
515+
`${reactMajor >= 19 ? 3 : 2} dark ${createTheme({ palette: { mode: 'dark' } }).palette.primary.main}`,
514516
);
515517
});
516518

@@ -542,10 +544,10 @@ describe('[Material UI] ThemeProviderWithVars', () => {
542544
}
543545
const { container } = render(<App />);
544546

545-
expect(container).to.have.text('1 light');
547+
expect(container).to.have.text(`${reactMajor >= 19 ? 2 : 1} light`);
546548

547549
fireEvent.click(screen.getByRole('button'));
548550

549-
expect(container).to.have.text('2 dark');
551+
expect(container).to.have.text(`${reactMajor >= 19 ? 3 : 2} dark`);
550552
});
551553
});

‎packages/mui-material/src/useAutocomplete/useAutocomplete.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,14 @@ describe('useAutocomplete', () => {
313313
aboveErrorTestComponentMessage,
314314
aboveErrorTestComponentMessage,
315315
],
316+
19: [
317+
muiErrorMessage,
318+
muiErrorMessage,
319+
nodeErrorMessage,
320+
nodeErrorMessage,
321+
nodeErrorMessage,
322+
nodeErrorMessage,
323+
],
316324
};
317325

318326
const devErrorMessages = errorMessagesByReactMajor[reactMajor] || defaultErrorMessages;

‎packages/mui-system/src/cssVars/useCurrentColorScheme.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ describe('useCurrentColorScheme', () => {
111111
const { container } = render(<Data />);
112112

113113
expect(container.firstChild.textContent).to.equal('light');
114-
expect(effectRunCount).to.equal(reactMajor >= 19 ? 2 : 3);
114+
expect(effectRunCount).to.equal(3);
115115
});
116116

117117
it('[noSsr] does not trigger a re-render', () => {

‎packages/mui-utils/src/useForkRef/useForkRef.test.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { expect } from 'chai';
33
import { spy } from 'sinon';
4-
import { createRenderer, MuiRenderResult, screen } from '@mui/internal-test-utils';
4+
import { createRenderer, reactMajor, MuiRenderResult, screen } from '@mui/internal-test-utils';
55
import useForkRef from './useForkRef';
66
import getReactElementRef from '../getReactElementRef';
77

@@ -156,20 +156,20 @@ describe('useForkRef', () => {
156156
const { unmount } = render(<App />);
157157

158158
expect(setup.args[0][0]).to.equal('test');
159-
expect(setup.callCount).to.equal(1);
160-
expect(cleanUp.callCount).to.equal(0);
159+
expect(setup.callCount).to.equal(reactMajor >= 19 ? 2 : 1);
160+
expect(cleanUp.callCount).to.equal(reactMajor >= 19 ? 1 : 0);
161161

162162
expect(setup2.args[0][0]).to.equal('test');
163-
expect(setup2.callCount).to.equal(1);
163+
expect(setup2.callCount).to.equal(reactMajor >= 19 ? 2 : 1);
164164

165165
unmount();
166166

167-
expect(setup.callCount).to.equal(1);
168-
expect(cleanUp.callCount).to.equal(1);
167+
expect(setup.callCount).to.equal(reactMajor >= 19 ? 2 : 1);
168+
expect(cleanUp.callCount).to.equal(reactMajor >= 19 ? 2 : 1);
169169

170170
// Setup was not called again
171-
expect(setup2.callCount).to.equal(1);
171+
expect(setup2.callCount).to.equal(reactMajor >= 19 ? 2 : 1);
172172
// Null handler hit because no cleanup is returned
173-
expect(nullHandler.callCount).to.equal(1);
173+
expect(nullHandler.callCount).to.equal(reactMajor >= 19 ? 2 : 1);
174174
});
175175
});

‎pnpm-lock.yaml

+10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)