Fix flaky JS tests (2/2).

[techanvil]

Feature Description

This is an issue to address the latest round of JS tests which are failing sporadically. The task has been split into two issues in order to make it easier to investigate and fix. See #10085.

The tests listed in this issue are all failing due an update to a component not being wrapped in act().

EnhancedMeasurementActivationBanner › should render the in progress step when enhanced measurement is being enabled after the user returns from the OAuth flow

Example: https://github.com/google/site-kit-wp/actions/runs/12874436082/job/35893852218?pr=9941#step:7:702

Details

FAIL assets/js/modules/analytics-4/components/dashboard/EnhancedMeasurementActivationBanner/index.test.js
  ● EnhancedMeasurementActivationBanner › should render the in progress step when enhanced measurement is being enabled after the user returns from the OAuth flow

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: An update to %s inside a test was not wrapped in act(...).·
    When testing, code that causes React state updates should be wrapped into act(...):·
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */·
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act%s", "EnhancedMeasurementActivationBanner", "
        in EnhancedMeasurementActivationBanner (created by WhenAnalytics4Active(EnhancedMeasurementActivationBanner))
        in WhenAnalytics4Active(EnhancedMeasurementActivationBanner)
        in Router (created by Wrapper)
        in Wrapper"]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

useEnableAudienceGroup › should automatically call onEnableGroups function when user returns from the OAuth screen

Example: https://github.com/google/site-kit-wp/actions/runs/12794669197/job/35670303767#step:7:765

Details

FAIL assets/js/modules/analytics-4/hooks/useEnableAudienceGroup.test.js
  ● useEnableAudienceGroup › should automatically call `onEnableGroups` function when user returns from the OAuth screen

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: An update to %s inside a test was not wrapped in act(...).·
    When testing, code that causes React state updates should be wrapped into act(...):·
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */·
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s", "TestHook", "

      at fn (node_modules/@testing-library/react-hooks/lib/pure.js:39:23)
          at Suspense
      at construct (node_modules/react-router/cjs/react-router.js:99:30)
      at fn (tests/js/test-utils.js:182:22)"],["Warning: An update to %s inside a test was not wrapped in act(...).·
      When testing, code that causes React state updates should be wrapped into act(...):·
      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */·
      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s", "TestHook", "
      at fn (node_modules/@testing-library/react-hooks/lib/pure.js:39:23)
          at Suspense
      at construct (node_modules/react-router/cjs/react-router.js:99:30)
      at fn (tests/js/test-utils.js:182:22)"],["Warning: An update to %s inside a test was not wrapped in act(...).·
      When testing, code that causes React state updates should be wrapped into act(...):·
      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */·
      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s", "TestHook", "
      at fn (node_modules/@testing-library/react-hooks/lib/pure.js:39:23)
          at Suspense
      at construct (node_modules/react-router/cjs/react-router.js:99:30)
      at fn (tests/js/test-utils.js:182:22)"]

DashboardSharingSettings › Single Admin Environment › should not render sharing management for a single admin environment

Example: https://github.com/google/site-kit-wp/actions/runs/12632804329/job/35197172249#step:7:744

Details

FAIL assets/js/components/dashboard-sharing/DashboardSharingSettings/index.test.js
  ● DashboardSharingSettings › Single Admin Environment › should not render sharing management for a single admin environment

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: An update to %s inside a test was not wrapped in act(...).·
    When testing, code that causes React state updates should be wrapped into act(...):·
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */·
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act%s", "ForwardRef(Tooltip)", "
        in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
        in WithStyles(ForwardRef(Tooltip)) (created by Tooltip)
        in Tooltip (created by Button)
        in Button (created by ForwardRef)
        in div (created by ForwardRef)
        in ForwardRef (created by Module)
        in div (created by Module)
        in div (created by Module)
        in Module (created by DashboardSharingSettings)
        in div (created by DashboardSharingSettings)
        in div (created by DashboardSharingSettings)
        in DashboardSharingSettings
        in Router (created by Wrapper)
        in Wrapper"],["Warning: An update to %s inside a test was not wrapped in act(...).·
    When testing, code that causes React state updates should be wrapped into act(...):·
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */·
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act%s", "ForwardRef(Popper)", "
        in ForwardRef(Popper) (created by ForwardRef(Tooltip))
        in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
        in WithStyles(ForwardRef(Tooltip)) (created by Tooltip)
        in Tooltip (created by Button)
        in Button (created by ForwardRef)
        in div (created by ForwardRef)
        in ForwardRef (created by Module)
        in div (created by Module)
        in div (created by Module)
        in Module (created by DashboardSharingSettings)
        in div (created by DashboardSharingSettings)
        in div (created by DashboardSharingSettings)
        in DashboardSharingSettings
        in Router (created by Wrapper)
        in Wrapper"]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

SettingsCardVisitorGroups › the "Display visitor groups in dashboard" switch › should track an event when toggled

Example: https://github.com/google/site-kit-wp/actions/runs/12598816789/job/35114468658#step:7:813

Details

FAIL assets/js/modules/analytics-4/components/audience-segmentation/settings/SettingsCardVisitorGroups/index.test.js
  ● SettingsCardVisitorGroups �� the "Display visitor groups in dashboard" switch › should track an event when toggled

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: An update to %s inside a test was not wrapped in act(...).·
    When testing, code that causes React state updates should be wrapped into act(...):·
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */·
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act%s", "SetupSuccess", "
        in SetupSuccess (created by SettingsCardVisitorGroups)
        in div (created by Cell)
        in Cell (created by SettingsCardVisitorGroups)
        in div (created by Row)
        in Row (created by SettingsCardVisitorGroups)
        in div (created by Grid)
        in Grid (created by SettingsCardVisitorGroups)
        in div (created by SettingsCardVisitorGroups)
        in div (created by Layout)
        in Layout (created by SettingsCardVisitorGroups)
        in SettingsCardVisitorGroups
        in Router (created by Wrapper)
        in Wrapper"],["Warning: An update to %s inside a test was not wrapped in act(...).·
    When testing, code that causes React state updates should be wrapped into act(...):·
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */·
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act%s", "SettingsCardVisitorGroups", "
        in SettingsCardVisitorGroups
        in Router (created by Wrapper)
        in Wrapper"]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

CurrentSurvey › should render the share icon button if there are shareableRoles

Example: https://github.com/google/site-kit-wp/actions/runs/12905555016/job/35984998955?pr=10055#step:7:802

Details

FAIL assets/js/components/dashboard-sharing/UserRoleSelect.test.js
  ● CurrentSurvey › should render the share icon button if there are shareableRoles

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: An update to %s inside a test was not wrapped in act(...).·
    When testing, code that causes React state updates should be wrapped into act(...):·
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */·
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act%s", "ForwardRef(Tooltip)", "
        in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
        in WithStyles(ForwardRef(Tooltip)) (created by Tooltip)
        in Tooltip (created by Button)
        in Button (created by ForwardRef)
        in div (created by ForwardRef)
        in ForwardRef
        in Router (created by Wrapper)
        in Wrapper"],["Warning: An update to %s inside a test was not wrapped in act(...).·
    When testing, code that causes React state updates should be wrapped into act(...):·
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */·
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act%s", "ForwardRef(Popper)", "
        in ForwardRef(Popper) (created by ForwardRef(Tooltip))
        in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
        in WithStyles(ForwardRef(Tooltip)) (created by Tooltip)
        in Tooltip (created by Button)
        in Button (created by ForwardRef)
        in div (created by ForwardRef)
        in ForwardRef
        in Router (created by Wrapper)
        in Wrapper"]

      at Object.assertExpectedCalls (node_modules/@wordpress/jest-preset-default/node_modules/@wordpress/jest-console/build/@wordpress/jest-console/src/index.js:36:4)

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The tests listed above should be assessed for failures in CI and locally and fixed where possible.

Implementation Brief

Test Coverage

QA Brief

Changelog entry