fix(test): Fix flaky React Native metrics onboarding test

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();
   });
 });