test(ui): Reset api mocks between EventDetails tests (#53497)

Author: scttcper

static/app/views/performance/transactionDetails/index.spec.tsx

@@ -1,41 +1,46 @@
-import {act, cleanup, render, screen} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
-import {OrganizationContext} from 'sentry/views/organizationContext';
 import EventDetails from 'sentry/views/performance/transactionDetails';
 
 const alertText =
   'You are viewing a sample transaction. Configure performance to start viewing real transactions.';
 
 describe('EventDetails', () => {
-  afterEach(cleanup);
+  const project = TestStubs.Project();
+  const organization = TestStubs.Organization({
+    features: ['performance-view'],
+    projects: [project],
+  });
 
-  it('renders alert for sample transaction', async () => {
-    const project = TestStubs.Project();
+  beforeEach(() => {
     ProjectsStore.loadInitialData([project]);
-    const organization = TestStubs.Organization({
-      features: ['performance-view'],
-      projects: [project],
-    });
-    const event = TestStubs.Event();
-    event.tags.push({key: 'sample_event', value: 'yes'});
-    const routerContext = TestStubs.routerContext([]);
-
     MockApiClient.addMockResponse({
-      url: `/projects/${organization.slug}/latest/events/1/grouping-info/`,
+      url: `/organizations/${organization.slug}/projects/`,
       statusCode: 200,
-      body: {},
+      body: [],
     });
     MockApiClient.addMockResponse({
-      url: `/organizations/${organization.slug}/projects/`,
+      url: `/projects/${organization.slug}/latest/events/1/grouping-info/`,
       statusCode: 200,
-      body: [],
+      body: {},
     });
     MockApiClient.addMockResponse({
       url: `/projects/${organization.slug}/latest/events/1/committers/`,
       statusCode: 200,
       body: [],
     });
+  });
+
+  afterEach(() => {
+    ProjectsStore.reset();
+    MockApiClient.clearMockResponses();
+  });
+
+  it('renders alert for sample transaction', async () => {
+    const event = TestStubs.Event();
+    event.tags.push({key: 'sample_event', value: 'yes'});
+
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/events/latest/`,
       statusCode: 200,
@@ -45,14 +50,10 @@ describe('EventDetails', () => {
     });
 
     render(
-      <OrganizationContext.Provider value={organization}>
-        <EventDetails
-          {...TestStubs.routeComponentProps()}
-          organization={organization}
-          params={{eventSlug: 'latest'}}
-          location={routerContext.context.location}
-        />
-      </OrganizationContext.Provider>
+      <EventDetails
+        {...TestStubs.routeComponentProps({params: {eventSlug: 'latest'}})}
+      />,
+      {organization}
     );
     expect(screen.getByText(alertText)).toBeInTheDocument();
 
@@ -61,14 +62,7 @@ describe('EventDetails', () => {
   });
 
   it('does not reender alert if already received transaction', async () => {
-    const project = TestStubs.Project();
-    ProjectsStore.loadInitialData([project]);
-    const organization = TestStubs.Organization({
-      features: ['performance-view'],
-      projects: [project],
-    });
     const event = TestStubs.Event();
-    const routerContext = TestStubs.routerContext([]);
 
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/events/latest/`,
@@ -80,11 +74,9 @@ describe('EventDetails', () => {
 
     render(
       <EventDetails
-        {...TestStubs.routeComponentProps()}
-        organization={organization}
-        params={{eventSlug: 'latest'}}
-        location={routerContext.context.location}
-      />
+        {...TestStubs.routeComponentProps({params: {eventSlug: 'latest'}})}
+      />,
+      {organization}
     );
     expect(screen.queryByText(alertText)).not.toBeInTheDocument();