Skip to content

Commit cdf7401

Browse files
Lukas742Lukas742
authored
chore: enable React StrictMode for tests and Storybook (#7061)
I've enabled the StrictMode for the Storybook inside the preview file instead of via [config option](https://storybook.js.org/docs/configure/integration/frameworks), as this way changes can be applied to it without having to restart the Storybook.
1 parent 9649fd5 commit cdf7401

File tree

7 files changed

+48
-27
lines changed

7 files changed

+48
-27
lines changed

‎.storybook/preview.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { setLanguage } from '@ui5/webcomponents-base/dist/config/Language.js';
55
import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
66
import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.js';
77
import { ContentDensity, Modals, ThemeProvider } from '@ui5/webcomponents-react';
8-
import { useEffect } from 'react';
8+
import { StrictMode, useEffect } from 'react';
99
import 'tocbot/dist/tocbot.css';
1010
import '../packages/main/dist/Assets.js';
1111
import languages from './components/languageCodes.json';
@@ -56,10 +56,12 @@ const preview: Preview = {
5656
}, [theme]);
5757

5858
return (
59-
<ThemeProvider>
60-
{viewMode !== 'docs' && <Modals />}
61-
<Story />
62-
</ThemeProvider>
59+
<StrictMode>
60+
<ThemeProvider>
61+
{viewMode !== 'docs' && <Modals />}
62+
<Story />
63+
</ThemeProvider>
64+
</StrictMode>
6365
);
6466
}
6567
],

‎cypress/support/commands.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ declare global {
88
namespace Cypress {
99
interface Chainable {
1010
/**
11-
* Cypress mount with ThemeProvider
11+
* Cypress mount with ThemeProvider.
12+
*
13+
* __Note:__ Per default `options.strict` is enabled
1214
*/
1315
mount: (
1416
jsx: ReactNode,
@@ -43,7 +45,7 @@ declare global {
4345
* Cypress mount with ThemeProvider
4446
*/
4547
Cypress.Commands.add('mount', (component, { themeProviderProps = {}, ...options } = {}) => {
46-
return mount(<ThemeProvider {...themeProviderProps}>{component}</ThemeProvider>, options);
48+
return mount(<ThemeProvider {...themeProviderProps}>{component}</ThemeProvider>, { strict: true, ...options });
4749
});
4850

4951
// copied from https://github.com/cypress-io/cypress/discussions/21150#discussioncomment-2620947 and edited slightly

‎packages/compat/src/components/Toolbar/Toolbar.cy.tsx

+17-10
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ describe('Toolbar', () => {
141141
it('overflow menu', () => {
142142
const onOverflowChange = cy.spy().as('overflowChangeSpy');
143143
cy.viewport(300, 500);
144-
cy.mount(<OverflowTestComponent onOverflowChange={onOverflowChange} />);
144+
cy.mount(<OverflowTestComponent onOverflowChange={onOverflowChange} />, { strict: false });
145145
cy.get('@overflowChangeSpy').should('have.been.calledOnce');
146146
cy.findByTestId('toolbarElements').should('have.text', 2);
147147
cy.findByTestId('overflowElements').should('have.text', 3);
@@ -159,7 +159,7 @@ describe('Toolbar', () => {
159159

160160
// flaky - remount component instead
161161
// cy.get(`[ui5-toggle-button]`).click();
162-
cy.mount(<OverflowTestComponent onOverflowChange={onOverflowChange} />);
162+
cy.mount(<OverflowTestComponent onOverflowChange={onOverflowChange} />, { strict: false });
163163
cy.get('[ui5-popover]').should('not.have.attr', 'open');
164164

165165
cy.get('@overflowChangeSpy').should('have.callCount', 2);
@@ -324,7 +324,8 @@ describe('Toolbar', () => {
324324
<Toolbar data-testid="tb" design={design}>
325325
<Text>Item1</Text>
326326
<Text>Item2</Text>
327-
</Toolbar>
327+
</Toolbar>,
328+
{ strict: false }
328329
);
329330
let height = '44px'; //2.75rem
330331
let background = 'rgba(0, 0, 0, 0)'; // transparent
@@ -371,7 +372,8 @@ describe('Toolbar', () => {
371372
<Text data-testid="tbi" style={{ width: '100px' }}>
372373
Item3
373374
</Text>
374-
</Toolbar>
375+
</Toolbar>,
376+
{ strict: false }
375377
);
376378
cy.wait(200);
377379
cy.findAllByTestId('tbi').each(($el) => {
@@ -395,7 +397,8 @@ describe('Toolbar', () => {
395397
<Text data-testid="tbi" style={{ width: '100px' }}>
396398
Item3
397399
</Text>
398-
</Toolbar>
400+
</Toolbar>,
401+
{ strict: false }
399402
);
400403
cy.wait(200);
401404
cy.findAllByTestId('tbiV').each(($el) => {
@@ -529,7 +532,7 @@ describe('Toolbar', () => {
529532
);
530533
};
531534
const overflowChange = cy.spy().as('overflowChange');
532-
cy.mount(<TestComp onOverflowChange={overflowChange} style={{ width: '200px' }} />);
535+
cy.mount(<TestComp onOverflowChange={overflowChange} style={{ width: '200px' }} />, { strict: false });
533536

534537
cy.get('[ui5-toggle-button]').should('not.exist');
535538
cy.findByText('add').click();
@@ -573,7 +576,8 @@ describe('Toolbar', () => {
573576
<div id="1">Text1</div>
574577
<div>Text2 no id</div>
575578
<Button id="3">Text4</Button>
576-
</Toolbar>
579+
</Toolbar>,
580+
{ strict: false }
577581
);
578582

579583
cy.get('#1').should('have.length', 1);
@@ -590,7 +594,8 @@ describe('Toolbar', () => {
590594
<div>Text1</div>
591595
<div>Text2</div>
592596
<Button>Text4</Button>
593-
</Toolbar>
597+
</Toolbar>,
598+
{ strict: false }
594599
);
595600
cy.get('section[role="alertdialog"]').should('exist');
596601

@@ -599,7 +604,8 @@ describe('Toolbar', () => {
599604
<div>Text1</div>
600605
<div>Text2</div>
601606
<Button>Text4</Button>
602-
</Toolbar>
607+
</Toolbar>,
608+
{ strict: false }
603609
);
604610
cy.get('section').should('not.have.attr', 'role');
605611
cy.get('[data-component-name="ToolbarOverflowPopoverContent"]').should('have.attr', 'role', 'menu');
@@ -609,7 +615,8 @@ describe('Toolbar', () => {
609615
<div>Text1</div>
610616
<div>Text2</div>
611617
<Button>Text4</Button>
612-
</Toolbar>
618+
</Toolbar>,
619+
{ strict: false }
613620
);
614621
cy.get('section').should('not.have.attr', 'role');
615622
cy.get('[data-component-name="ToolbarOverflowPopoverContent"]').should('have.attr', 'role', 'menu');

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -813,13 +813,15 @@ describe('AnalyticalTable', () => {
813813
const { onRowSelect } = props;
814814
const [relevantPayload, setRelevantPayload] = useState<Record<string, any>>({});
815815
const tableInstance = useRef<Record<string, any>>(null);
816+
// strict mode
817+
const hasRun = useRef(false);
816818

817819
useEffect(() => {
818-
if (tableInstance.current) {
819-
tableInstance.current.setGroupBy(['name']);
820+
if (tableInstance.current && !hasRun.current) {
820821
setTimeout(() => {
821-
tableInstance.current.toggleAllRowsExpanded();
822+
tableInstance.current.toggleAllRowsExpanded(true);
822823
}, 100);
824+
hasRun.current = true;
823825
}
824826
}, []);
825827

@@ -850,6 +852,7 @@ describe('AnalyticalTable', () => {
850852
onRowSelect(e);
851853
}}
852854
data={groupableData}
855+
reactTableOptions={{ initialState: { groupBy: ['name'] } }}
853856
selectionMode="Multiple"
854857
/>
855858
<div data-testid="selectedFlatRowsLength">

‎packages/main/src/components/ObjectPage/ObjectPage.cy.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -348,16 +348,18 @@ describe('ObjectPage', () => {
348348
</ObjectPage>
349349
);
350350

351+
cy.wait(200);
352+
351353
cy.findByText('Goals').should('not.be.visible');
352354
cy.findByText('Employment').should('not.be.visible');
353355
cy.findByText('Test').should('be.visible');
354356

355-
cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
356-
//fallback
357-
cy.wait(50);
358357
cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
359358
cy.findByText('Employment').should('be.visible');
360-
cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
359+
360+
cy.wait(200);
361+
362+
cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').realClick();
361363
cy.findByText('Test').should('be.visible');
362364

363365
cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus();
@@ -377,6 +379,7 @@ describe('ObjectPage', () => {
377379
{OPContent}
378380
</ObjectPage>
379381
);
382+
cy.wait(100);
380383

381384
cy.findByText('Employment').should('not.be.visible');
382385
cy.findByText('Test').should('be.visible');
@@ -1034,6 +1037,8 @@ describe('ObjectPage', () => {
10341037
};
10351038

10361039
cy.mount(<TestComp />);
1040+
cy.wait(200);
1041+
10371042
cy.get('[ui5-tabcontainer]').findUi5TabByText('test2').realClick();
10381043
cy.findByText('Content1').should('not.be.visible');
10391044
cy.findByText('Content2').should('be.visible');

‎packages/main/src/components/ThemeProvider/I18n.cy.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,8 @@ describe('I18nProvider', () => {
7676
</>
7777
);
7878
};
79-
cy.mount(<TranslationComponent />);
79+
// strict mode disabled, otherwise counter is incremented twice on each render
80+
cy.mount(<TranslationComponent />, { strict: false });
8081
cy.findByTestId('counter').should('have.text', 1);
8182
cy.findByText('Please wait')
8283
.then(() => {

‎packages/main/src/components/VariantManagement/VariantManagement.cy.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ describe('VariantManagement', () => {
5252
VariantItem 3
5353
</VariantItem>
5454
]}
55-
</VariantManagement>
55+
</VariantManagement>,
56+
{ strict: false }
5657
);
5758

5859
cy.contains('VariantItem 2').click();
@@ -66,7 +67,7 @@ describe('VariantManagement', () => {
6667

6768
cy.findByText('Save').click();
6869
cy.get('@onSaveManageViews').should('have.been.calledOnce');
69-
70+
//todo: investigate why this matcher fails in React strict mode
7071
cy.get('@onSaveManageViews').should(
7172
'have.been.calledWith',
7273
Cypress.sinon.match({

0 commit comments

Comments
 (0)