From d96cc4aa40cf661d23684a902ce46259f9daa7fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Mon, 30 Mar 2026 17:44:51 -0400
Subject: [PATCH] fix(test): Fix flaky React Native metrics onboarding test

Replace heavy MetricsTabOnboarding render with lightweight
renderWithOnboardingLayout helper, matching the pattern used by
other metrics spec files. The full component render included page
filters and dynamic imports that could exceed the 5s timeout under
load.

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
Made-with: Cursor
---
 .../react-native/metrics.spec.tsx             | 67 ++++++-------------
 1 file changed, 19 insertions(+), 48 deletions(-)

diff --git a/static/app/gettingStartedDocs/react-native/metrics.spec.tsx b/static/app/gettingStartedDocs/react-native/metrics.spec.tsx
index 50e20da6be7405..d47759a22ae698 100644
--- a/static/app/gettingStartedDocs/react-native/metrics.spec.tsx
+++ b/static/app/gettingStartedDocs/react-native/metrics.spec.tsx
@@ -1,61 +1,32 @@
-import {OrganizationFixture} from 'sentry-fixture/organization';
-import {ProjectFixture} from 'sentry-fixture/project';
-import {ProjectKeysFixture} from 'sentry-fixture/projectKeys';
+import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
+import {screen} from 'sentry-test/reactTestingLibrary';
+import {textWithMarkupMatcher} from 'sentry-test/utils';
 
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {ProductSolution} from 'sentry/components/onboarding/gettingStartedDoc/types';
 
-import type {Organization} from 'sentry/types/organization';
-import type {Project} from 'sentry/types/project';
-import {MetricsTabOnboarding} from 'sentry/views/explore/metrics/metricsOnboarding';
-
-function renderMockRequests({
-  organization,
-  project,
-}: {
-  organization: Organization;
-  project: Project;
-}) {
-  MockApiClient.addMockResponse({
-    url: `/projects/${organization.slug}/${project.slug}/keys/`,
-    method: 'GET',
-    body: [ProjectKeysFixture()[0]],
-  });
-  MockApiClient.addMockResponse({
-    url: `/organizations/${organization.slug}/sdks/`,
-    method: 'GET',
-    body: [],
-  });
-}
+import {docs} from '.';
 
 describe('getting started with react-native', () => {
-  it('shows React Native metrics onboarding content', async () => {
-    const organization = OrganizationFixture();
-    const project = ProjectFixture({platform: 'react-native'});
-    renderMockRequests({organization, project});
-
-    render(
-      <MetricsTabOnboarding
-        datePageFilterProps={{}}
-        organization={organization}
-        project={project}
-      />
-    );
+  it('shows React Native metrics onboarding content', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.METRICS],
+    });
 
     expect(
-      await screen.findByRole('heading', {name: /install sentry/i})
+      screen.getByText(textWithMarkupMatcher(/Sentry\.metrics\.count/))
     ).toBeInTheDocument();
-    expect(screen.getByRole('heading', {name: /configure sentry/i})).toBeInTheDocument();
     expect(
-      screen.getByRole('heading', {name: /send metrics and verify/i})
+      screen.getByText(textWithMarkupMatcher(/Sentry\.metrics\.gauge/))
     ).toBeInTheDocument();
+  });
 
-    // Goes to the configure step
-    await userEvent.click(screen.getByRole('button', {name: 'Next'}));
-    expect(await screen.findByText(/Metrics are enabled by default/)).toBeInTheDocument();
+  it('does not render metrics content when metrics is not enabled', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [],
+    });
 
-    // Goes to the verify step
-    await userEvent.click(screen.getByRole('button', {name: 'Next'}));
-    expect(await screen.findByText(/Sentry\.metrics\.count/)).toBeInTheDocument();
-    expect(screen.getByText(/Sentry\.metrics\.gauge/)).toBeInTheDocument();
+    expect(
+      screen.queryByText(textWithMarkupMatcher(/Sentry\.metrics\.count/))
+    ).not.toBeInTheDocument();
   });
 });