feat: upgrade to React 18.3.1

.github/workflows/ci.yml

@@ -58,7 +58,8 @@ jobs:
           start: yarn start-e2e-test-app
           working-directory: js
           record: true
-          spec: cypress/integration/e2e-test/*.js
+          spec: cypress/e2e/e2e-test/*.js
+          config: baseUrl=http://localhost:8887
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
       - name: Run Cypress on example Dashboard
@@ -68,7 +69,8 @@ jobs:
           start: yarn start-e2e-router-app
           working-directory: js
           record: true
-          spec: cypress/integration/dashboard/*.js
+          spec: cypress/e2e/dashboard/*.js
+          config: baseUrl=http://localhost:8886
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
 

js/.eslintrc.js

@@ -22,7 +22,11 @@ module.exports = {
   ],
   rules: {},
   settings: {
-    'import/resolver': 'webpack',
+    'import/resolver': {
+      webpack: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+      }
+    },
     react: { version: '17' }
   },
 };

js/cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  projectId: 'pm6grv',
+  e2e: {
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    defaultCommandTimeout: 10000,
+  },
+})

js/cypress/e2e/dashboard/dashboard.cy.js

@@ -0,0 +1,17 @@
+describe('Dashboard', () => {
+  it('Slider', () => {
+    cy.visit('/#!/Slider');
+    const steps = 15;
+    const arrows = '{rightarrow}'.repeat(steps);
+
+    cy.get('#Slider .ms-Slider-slideBox').type(arrows);
+    cy.contains('Value: 15');
+  });
+
+  it('Dropdown', () => {
+    cy.visit('/#!/Dropdown');
+    cy.get('#Dropdown-dropdown-option').click();
+    cy.get('#Dropdown-dropdown-list2').click();
+    cy.contains('Value: C');
+  });
+});

js/cypress/integration/e2e-test/actionButtons.js → js/cypress/e2e/e2e-test/actionButtons.cy.js

@@ -1,61 +1,44 @@
-function test() {
-  let clicks = 1;
-  return (name) => {
-    cy.get(`#actionButtons-${name}`).click();
-    cy.get('#actionButtons-clicks').should('contain', `Number of clicks: ${clicks}`);
-    clicks += 1;
-  };
+function testButtonClick(name) {
+  cy.get(`#actionButtons-${name}`).click();
+  cy.get('#actionButtons-clicks').should('contain', 'Number of clicks: 1');
 }
-const testButtonClick = test();
 
-describe('DefaultButton.shinyInput()', () => {
-  before(() => {
+describe('Clicking buttons', () => {
+  beforeEach(() => {
     cy.visit('/');
   });
 
-  it('click works', () => {
+  it('DefaultButton.shinyInput()', () => {
     testButtonClick('defaultButton');
   });
-});
 
-describe('PrimaryButton.shinyInput()', () => {
-  it('click works', () => {
+  it('PrimaryButton.shinyInput()', () => {
     testButtonClick('primaryButton');
   });
-});
 
-describe('CompoundButton.shinyInput()', () => {
-  it('click works', () => {
+  it('CompoundButton.shinyInput()', () => {
     testButtonClick('compoundButton');
   });
-});
 
-describe('ActionButton.shinyInput()', () => {
-  it('click works', () => {
+  it('ActionButton.shinyInput()', () => {
     testButtonClick('actionButton');
   });
-});
 
-describe('CommandBarButton.shinyInput()', () => {
-  it('click works', () => {
+  it('CommandBarButton.shinyInput()', () => {
     testButtonClick('actionButton');
   });
-});
 
-describe('CommandButton.shinyInput()', () => {
-  it('click works', () => {
+  it('CommandButton.shinyInput()', () => {
     testButtonClick('actionButton');
   });
-});
 
-describe('IconButton.shinyInput()', () => {
-  it('click works', () => {
+  it('IconButton.shinyInput()', () => {
     testButtonClick('actionButton');
   });
 });
 
 describe('Updating buttons', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/');
     cy.get('#actionButtons-update').click();
   });

js/cypress/integration/e2e-test/deepMixing.js → js/cypress/e2e/e2e-test/deepMixing.cy.js

@@ -1,5 +1,5 @@
 describe('Fluent components inside Shiny tabset', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/');
     cy.get('#deepMixing-tabs1').within(() => {
       cy.get('a[data-value=JSX]').click();
@@ -16,8 +16,10 @@ describe('Fluent components inside Shiny tabset', () => {
 });
 
 describe('JSX inside uiOutput inside JSX', () => {
-  before(() => {
-    cy.get('[data-cy=deepMixing-pivot] > .ms-Pivot > button[name="Leaflet inside a Pivot"]').click();
+  beforeEach(() => {
+    cy.visit('/');
+    cy.reload();
+    cy.contains('Leaflet inside a Pivot').click();
   });
 
   it('Leaflet inside Pivot is visible', () => {
@@ -28,9 +30,10 @@ describe('JSX inside uiOutput inside JSX', () => {
 });
 
 describe('Leaflet in Pivot in uiOutput in Pivot in uiOutput in JSX', () => {
-  before(() => {
-    cy.get('[data-cy=deepMixing-pivot] > .ms-Pivot > button[name="Another level of nesting"]').click();
-    cy.get('[data-cy=deepMixing-nestedPivot] > .ms-Pivot > button[name="Leaflet inside a Pivot"]').click();
+  beforeEach(() => {
+    cy.visit('/');
+    cy.get('[data-cy=deepMixing-pivot] [data-content="Another level of nesting"]').click();
+    cy.get('[data-cy=deepMixing-nestedPivot] [data-content="Leaflet inside a Pivot"]').click();
   });
 
   it('Leaflet inside nested Pivot is visible', () => {