chore: enable React StrictMode for tests and Storybook

.storybook/preview.tsx

@@ -5,7 +5,7 @@ import { setLanguage } from '@ui5/webcomponents-base/dist/config/Language.js';
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
 import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.js';
 import { ContentDensity, Modals, ThemeProvider } from '@ui5/webcomponents-react';
-import { useEffect } from 'react';
+import { StrictMode, useEffect } from 'react';
 import 'tocbot/dist/tocbot.css';
 import '../packages/main/dist/Assets.js';
 import languages from './components/languageCodes.json';
@@ -56,10 +56,12 @@ const preview: Preview = {
       }, [theme]);
 
       return (
-        <ThemeProvider>
-          {viewMode !== 'docs' && <Modals />}
-          <Story />
-        </ThemeProvider>
+        <StrictMode>
+          <ThemeProvider>
+            {viewMode !== 'docs' && <Modals />}
+            <Story />
+          </ThemeProvider>
+        </StrictMode>
       );
     }
   ],

cypress/support/commands.tsx

@@ -8,7 +8,9 @@ declare global {
   namespace Cypress {
     interface Chainable {
       /**
-       * Cypress mount with ThemeProvider
+       * Cypress mount with ThemeProvider.
+       *
+       * __Note:__ Per default `options.strict` is enabled
        */
       mount: (
         jsx: ReactNode,
@@ -43,7 +45,7 @@ declare global {
  * Cypress mount with ThemeProvider
  */
 Cypress.Commands.add('mount', (component, { themeProviderProps = {}, ...options } = {}) => {
-  return mount(<ThemeProvider {...themeProviderProps}>{component}</ThemeProvider>, options);
+  return mount(<ThemeProvider {...themeProviderProps}>{component}</ThemeProvider>, { strict: true, ...options });
 });
 
 // copied from https://github.com/cypress-io/cypress/discussions/21150#discussioncomment-2620947 and edited slightly

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

@@ -141,7 +141,7 @@ describe('Toolbar', () => {
   it('overflow menu', () => {
     const onOverflowChange = cy.spy().as('overflowChangeSpy');
     cy.viewport(300, 500);
-    cy.mount(<OverflowTestComponent onOverflowChange={onOverflowChange} />);
+    cy.mount(<OverflowTestComponent onOverflowChange={onOverflowChange} />, { strict: false });
     cy.get('@overflowChangeSpy').should('have.been.calledOnce');
     cy.findByTestId('toolbarElements').should('have.text', 2);
     cy.findByTestId('overflowElements').should('have.text', 3);
@@ -159,7 +159,7 @@ describe('Toolbar', () => {
 
     // flaky - remount component instead
     // cy.get(`[ui5-toggle-button]`).click();
-    cy.mount(<OverflowTestComponent onOverflowChange={onOverflowChange} />);
+    cy.mount(<OverflowTestComponent onOverflowChange={onOverflowChange} />, { strict: false });
     cy.get('[ui5-popover]').should('not.have.attr', 'open');
 
     cy.get('@overflowChangeSpy').should('have.callCount', 2);
@@ -324,7 +324,8 @@ describe('Toolbar', () => {
         <Toolbar data-testid="tb" design={design}>
           <Text>Item1</Text>
           <Text>Item2</Text>
-        </Toolbar>
+        </Toolbar>,
+        { strict: false }
       );
       let height = '44px'; //2.75rem
       let background = 'rgba(0, 0, 0, 0)'; // transparent
@@ -371,7 +372,8 @@ describe('Toolbar', () => {
         <Text data-testid="tbi" style={{ width: '100px' }}>
           Item3
         </Text>
-      </Toolbar>
+      </Toolbar>,
+      { strict: false }
     );
     cy.wait(200);
     cy.findAllByTestId('tbi').each(($el) => {
@@ -395,7 +397,8 @@ describe('Toolbar', () => {
         <Text data-testid="tbi" style={{ width: '100px' }}>
           Item3
         </Text>
-      </Toolbar>
+      </Toolbar>,
+      { strict: false }
     );
     cy.wait(200);
     cy.findAllByTestId('tbiV').each(($el) => {
@@ -529,7 +532,7 @@ describe('Toolbar', () => {
       );
     };
     const overflowChange = cy.spy().as('overflowChange');
-    cy.mount(<TestComp onOverflowChange={overflowChange} style={{ width: '200px' }} />);
+    cy.mount(<TestComp onOverflowChange={overflowChange} style={{ width: '200px' }} />, { strict: false });
 
     cy.get('[ui5-toggle-button]').should('not.exist');
     cy.findByText('add').click();
@@ -573,7 +576,8 @@ describe('Toolbar', () => {
         <div id="1">Text1</div>
         <div>Text2 no id</div>
         <Button id="3">Text4</Button>
-      </Toolbar>
+      </Toolbar>,
+      { strict: false }
     );
 
     cy.get('#1').should('have.length', 1);
@@ -590,7 +594,8 @@ describe('Toolbar', () => {
         <div>Text1</div>
         <div>Text2</div>
         <Button>Text4</Button>
-      </Toolbar>
+      </Toolbar>,
+      { strict: false }
     );
     cy.get('section[role="alertdialog"]').should('exist');
 
@@ -599,7 +604,8 @@ describe('Toolbar', () => {
         <div>Text1</div>
         <div>Text2</div>
         <Button>Text4</Button>
-      </Toolbar>
+      </Toolbar>,
+      { strict: false }
     );
     cy.get('section').should('not.have.attr', 'role');
     cy.get('[data-component-name="ToolbarOverflowPopoverContent"]').should('have.attr', 'role', 'menu');
@@ -609,7 +615,8 @@ describe('Toolbar', () => {
         <div>Text1</div>
         <div>Text2</div>
         <Button>Text4</Button>
-      </Toolbar>
+      </Toolbar>,
+      { strict: false }
     );
     cy.get('section').should('not.have.attr', 'role');
     cy.get('[data-component-name="ToolbarOverflowPopoverContent"]').should('have.attr', 'role', 'menu');

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

@@ -813,13 +813,15 @@ describe('AnalyticalTable', () => {
       const { onRowSelect } = props;
       const [relevantPayload, setRelevantPayload] = useState<Record<string, any>>({});
       const tableInstance = useRef<Record<string, any>>(null);
+      // strict mode
+      const hasRun = useRef(false);
 
       useEffect(() => {
-        if (tableInstance.current) {
-          tableInstance.current.setGroupBy(['name']);
+        if (tableInstance.current && !hasRun.current) {
           setTimeout(() => {
-            tableInstance.current.toggleAllRowsExpanded();
+            tableInstance.current.toggleAllRowsExpanded(true);
           }, 100);
+          hasRun.current = true;
         }
       }, []);
 
@@ -850,6 +852,7 @@ describe('AnalyticalTable', () => {
               onRowSelect(e);
             }}
             data={groupableData}
+            reactTableOptions={{ initialState: { groupBy: ['name'] } }}
             selectionMode="Multiple"
           />
           <div data-testid="selectedFlatRowsLength">

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

@@ -348,16 +348,18 @@ describe('ObjectPage', () => {
       </ObjectPage>
     );
 
+    cy.wait(200);
+
     cy.findByText('Goals').should('not.be.visible');
     cy.findByText('Employment').should('not.be.visible');
     cy.findByText('Test').should('be.visible');
 
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
-    //fallback
-    cy.wait(50);
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
     cy.findByText('Employment').should('be.visible');
-    cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
+
+    cy.wait(200);
+
+    cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').realClick();
     cy.findByText('Test').should('be.visible');
 
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus();
@@ -377,6 +379,7 @@ describe('ObjectPage', () => {
         {OPContent}
       </ObjectPage>
     );
+    cy.wait(100);
 
     cy.findByText('Employment').should('not.be.visible');
     cy.findByText('Test').should('be.visible');
@@ -1034,6 +1037,8 @@ describe('ObjectPage', () => {
     };
 
     cy.mount(<TestComp />);
+    cy.wait(200);
+
     cy.get('[ui5-tabcontainer]').findUi5TabByText('test2').realClick();
     cy.findByText('Content1').should('not.be.visible');
     cy.findByText('Content2').should('be.visible');

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

@@ -76,7 +76,8 @@ describe('I18nProvider', () => {
         </>
       );
     };
-    cy.mount(<TranslationComponent />);
+    // strict mode disabled, otherwise counter is incremented twice on each render
+    cy.mount(<TranslationComponent />, { strict: false });
     cy.findByTestId('counter').should('have.text', 1);
     cy.findByText('Please wait')
       .then(() => {

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

@@ -52,7 +52,8 @@ describe('VariantManagement', () => {
             VariantItem 3
           </VariantItem>
         ]}
-      </VariantManagement>
+      </VariantManagement>,
+      { strict: false }
     );
 
     cy.contains('VariantItem 2').click();
@@ -66,7 +67,7 @@ describe('VariantManagement', () => {
 
     cy.findByText('Save').click();
     cy.get('@onSaveManageViews').should('have.been.calledOnce');
-
+    //todo: investigate why this matcher fails in React strict mode
     cy.get('@onSaveManageViews').should(
       'have.been.calledWith',
       Cypress.sinon.match({