fix(test): Upgrade framer motion, Disable animations in tests (#112270)

Skip all framer-motion animations in tests via
`MotionGlobalConfig.skipAnimations = true`
[docs](motiondivision/motion@3dffb40)
so components render immediately without waiting for animation frames or
transitions.

Also bumps framer-motion from 12.23.12 to 12.38.0.

## Drawer test benchmarks (before → after)

| Test suite | Before | After | Speedup |
|---|---|---|---|
| `globalDrawer/index.spec.tsx` | 3.01s | 1.20s | 2.5x |
| `eventFeatureFlagSection.spec.tsx` | 2.66s | 2.30s | 1.2x |
| `breadcrumbsDataSection.spec.tsx` | 1.95s | 1.58s | 1.2x |

This also benefits every other test that renders framer-motion
components (modals, tooltips, any `AnimatePresence` usage).

Author: scttcper

package.json

@@ -171,7 +171,7 @@
     "echarts-for-react": "3.0.6",
     "esbuild": "0.25.10",
     "focus-trap": "7.6.5",
-    "framer-motion": "12.23.12",
+    "framer-motion": "12.38.0",
     "fuse.js": "^6.6.2",
     "gettext-parser": "7.0.1",
     "gl-matrix": "3.4.4",

pnpm-lock.yaml

@@ -108,24 +108,24 @@ describe('IssueListActions', () => {
       expect(screen.queryByRole('button', {name: 'Archive'})).not.toBeInTheDocument();
     });
 
-    it('shows action buttons when any items are selected', () => {
+    it('shows action buttons when any items are selected', async () => {
       render(<WrappedComponent selectedIds={['1']} />);
 
-      expect(screen.getByRole('button', {name: 'Resolve'})).toBeEnabled();
+      expect(await screen.findByRole('button', {name: 'Resolve'})).toBeEnabled();
       expect(screen.getByRole('button', {name: 'Archive'})).toBeEnabled();
     });
 
-    it('shows select all checkbox as checked when all items are selected', () => {
+    it('shows select all checkbox as checked when all items are selected', async () => {
       render(<WrappedComponent selectedIds={['1', '2', '3']} />);
 
       // When all selected, label changes to "Deselect all"
-      expect(screen.getByRole('checkbox', {name: 'Deselect all'})).toBeChecked();
+      expect(await screen.findByRole('checkbox', {name: 'Deselect all'})).toBeChecked();
     });
 
-    it('shows select all checkbox as indeterminate when some items are selected', () => {
+    it('shows select all checkbox as indeterminate when some items are selected', async () => {
       render(<WrappedComponent selectedIds={['1']} />);
 
-      const checkbox = screen.getByRole('checkbox', {name: 'Select all'});
+      const checkbox = await screen.findByRole('checkbox', {name: 'Select all'});
       expect(checkbox).toBePartiallyChecked();
     });
   });

static/app/views/issueList/actions/index.spec.tsx

@@ -851,9 +851,8 @@ describe('desktop navigation', () => {
 
           await userEvent.hover(screen.getByRole('link', {name: 'Explore'}));
 
-          expect(
-            await within(secondaryNav).findByRole('link', {name: 'Traces'})
-          ).toBeInTheDocument();
+          // Re-query secondary nav because AnimatePresence remounts it with a new key
+          expect(await screen.findByRole('link', {name: 'Traces'})).toBeInTheDocument();
         });
 
         it('shows hovered group content in the peek view when sidebar is collapsed', async () => {

static/app/views/navigation/index.desktop.spec.tsx

@@ -125,15 +125,15 @@ describe('ExplorerPanel', () => {
   });
 
   describe('Feature Flag and Organization Checks', () => {
-    it('renders when feature flag and open membership are enabled', () => {
+    it('renders when feature flag and open membership are enabled', async () => {
       renderWithPanelContext(<ExplorerPanel />, true, {organization});
 
       expect(
-        screen.getByText(/Ask Seer anything about your application./)
+        await screen.findByText(/Ask Seer anything about your application./)
       ).toBeInTheDocument();
     });
 
-    it('does not render when feature flag is disabled', () => {
+    it('does not render when feature flag is disabled', async () => {
       const disabledOrg = OrganizationFixture({
         features: [],
         hideAiFeatures: false,
@@ -144,10 +144,10 @@ describe('ExplorerPanel', () => {
         organization: disabledOrg,
       });
 
-      expect(container).toBeEmptyDOMElement();
+      await waitFor(() => expect(container).toBeEmptyDOMElement());
     });
 
-    it('does not render when AI features are hidden', () => {
+    it('does not render when AI features are hidden', async () => {
       const disabledOrg = OrganizationFixture({
         features: ['seer-explorer'],
         hideAiFeatures: true,
@@ -158,10 +158,10 @@ describe('ExplorerPanel', () => {
         organization: disabledOrg,
       });
 
-      expect(container).toBeEmptyDOMElement();
+      await waitFor(() => expect(container).toBeEmptyDOMElement());
     });
 
-    it('does not render when open membership is disabled', () => {
+    it('does not render when open membership is disabled', async () => {
       const disabledOrg = OrganizationFixture({
         features: ['seer-explorer'],
         hideAiFeatures: false,
@@ -172,28 +172,30 @@ describe('ExplorerPanel', () => {
         organization: disabledOrg,
       });
 
-      expect(container).toBeEmptyDOMElement();
+      await waitFor(() => expect(container).toBeEmptyDOMElement());
     });
   });
 
   describe('Empty State', () => {
-    it('shows empty state when no messages exist', () => {
+    it('shows empty state when no messages exist', async () => {
       renderWithPanelContext(<ExplorerPanel />, true, {organization});
 
       expect(
-        screen.getByText(/Ask Seer anything about your application./)
+        await screen.findByText(/Ask Seer anything about your application./)
       ).toBeInTheDocument();
     });
 
-    it('shows input section in empty state', () => {
+    it('shows input section in empty state', async () => {
       renderWithPanelContext(<ExplorerPanel />, true, {organization});
 
       expect(
-        screen.getByPlaceholderText('Type your message or / command and press Enter ↵')
+        await screen.findByPlaceholderText(
+          'Type your message or / command and press Enter ↵'
+        )
       ).toBeInTheDocument();
     });
 
-    it('shows error when hook returns isError=true', () => {
+    it('shows error when hook returns isError=true', async () => {
       const useSeerExplorerSpy = jest
         .spyOn(useSeerExplorerModule, 'useSeerExplorer')
         .mockReturnValue({
@@ -220,7 +222,7 @@ describe('ExplorerPanel', () => {
       renderWithPanelContext(<ExplorerPanel />, true, {organization});
 
       expect(
-        screen.getByText('Error loading this session (ID=123).')
+        await screen.findByText('Error loading this session (ID=123).')
       ).toBeInTheDocument();
       expect(
         screen.queryByText(/Ask Seer anything about your application./)
@@ -231,7 +233,7 @@ describe('ExplorerPanel', () => {
   });
 
   describe('Messages Display', () => {
-    it('renders messages when session data exists', () => {
+    it('renders messages when session data exists', async () => {
       const mockSessionData = {
         blocks: [
           {
@@ -283,7 +285,7 @@ describe('ExplorerPanel', () => {
 
       renderWithPanelContext(<ExplorerPanel />, true, {organization});
 
-      expect(screen.getByText('What is this error?')).toBeInTheDocument();
+      expect(await screen.findByText('What is this error?')).toBeInTheDocument();
       expect(
         screen.getByText('This error indicates a null pointer exception.')
       ).toBeInTheDocument();
@@ -533,19 +535,21 @@ describe('ExplorerPanel', () => {
       openMembership: true,
     });
 
-    it('does not render the toggle when the feature flag is disabled', () => {
+    it('does not render the toggle when the feature flag is disabled', async () => {
       renderWithPanelContext(<ExplorerPanel />, true, {organization});
 
+      // Wait for effects to settle before asserting absence
+      await screen.findByTestId('seer-explorer-input');
       expect(
         screen.queryByRole('checkbox', {name: 'Toggle context engine'})
       ).not.toBeInTheDocument();
     });
 
-    it('renders the toggle when the feature flag is enabled', () => {
+    it('renders the toggle when the feature flag is enabled', async () => {
       renderWithPanelContext(<ExplorerPanel />, true, {organization: orgWithFlag});
 
       expect(
-        screen.getByRole('checkbox', {name: 'Toggle context engine'})
+        await screen.findByRole('checkbox', {name: 'Toggle context engine'})
       ).toBeInTheDocument();
     });
 
@@ -623,20 +627,20 @@ describe('ExplorerPanel', () => {
   });
 
   describe('Visibility Control', () => {
-    it('renders when isVisible=true', () => {
+    it('renders when isVisible=true', async () => {
       renderWithPanelContext(<ExplorerPanel />, true, {organization});
 
-      expect(screen.getByTestId('seer-explorer-input')).toBeInTheDocument();
+      expect(await screen.findByTestId('seer-explorer-input')).toBeInTheDocument();
     });
 
-    it('can handle visibility changes', () => {
+    it('can handle visibility changes', async () => {
       const {rerenderWithOpen} = renderWithPanelContext(<ExplorerPanel />, false, {
         organization,
       });
 
       rerenderWithOpen(true);
 
-      expect(screen.getByTestId('seer-explorer-input')).toBeInTheDocument();
+      expect(await screen.findByTestId('seer-explorer-input')).toBeInTheDocument();
     });
   });
 });

static/app/views/seerExplorer/explorerPanel.spec.tsx

@@ -12,6 +12,7 @@ import {
 
 import {type ReactElement} from 'react';
 import {configure as configureRtl} from '@testing-library/react'; // eslint-disable-line no-restricted-imports
+import {MotionGlobalConfig} from 'framer-motion';
 import {enableFetchMocks} from 'jest-fetch-mock';
 import {ConfigFixture} from 'sentry-fixture/config';
 
@@ -41,6 +42,12 @@ enableFetchMocks();
 // See https://github.com/jsdom/jsdom/issues/1330
 SVGElement.prototype.getTotalLength ??= () => 1;
 
+/**
+ * Skip all framer-motion animations in tests so components render immediately
+ * without waiting for animation frames or transitions.
+ */
+MotionGlobalConfig.skipAnimations = true;
+
 /**
  * React Testing Library configuration to override the default test id attribute
  *