Refactor test to minimally depende on JS SDK internals #3572

Description

Currently, we use a lot of mocked classes and we depend on the internal structure of the JS SDK, this leads to several tests breaking when we upgrade to a newer JS SDK.

• This should not happen unintentionally, if the test intention was to test RN SDK implementation it should not depend on JS internals.

• In cases where the JS SDK internal is crucial to RN SDK and its change would break RN we should add a separate test.

Example of tests to change:

• Should not mock the Hub and Scope

  sentry-react-native/test/tracing/gesturetracing.test.ts

  Lines 31 to 70 in 27ab160

  	const getMockScope = () => {
  	let scopeTransaction: unknown;
  	let scopeUser: User | undefined;
  	return {
  	getTransaction: () => scopeTransaction,
  	setSpan: jest.fn((span: unknown) => {
  	scopeTransaction = span;
  	}),
  	setTag(_tag: unknown) {
  	// Placeholder
  	},
  	setContext(_context: unknown) {
  	// Placeholder
  	},
  	addBreadcrumb(_breadcrumb: unknown) {
  	// Placeholder
  	},
  	getUser: () => scopeUser,
  	};
  	};
  	const mockAddBreadcrumb = jest.fn();
  	const getMockHub = () => {
  	const mockHub = new Hub(new BrowserClient({ tracesSampleRate: 1 } as BrowserClientOptions));
  	const mockScope = getMockScope();
  	// eslint-disable-next-line @typescript-eslint/no-explicit-any
  	mockHub.getScope = () => mockScope as any;
  	// eslint-disable-next-line @typescript-eslint/no-explicit-any
  	mockHub.configureScope = jest.fn(callback => callback(mockScope as any));
  	mockHub.addBreadcrumb = mockAddBreadcrumb;
  	return mockHub;
  	};
  	interface MockGesture {
  	handlers?: {

• The same

  sentry-react-native/test/tracing/reactnativetracing.test.ts

  Lines 56 to 102 in 27ab160

  	const getMockScope = () => {
  	let scopeTransaction: Transaction | undefined;
  	let scopeUser: User | undefined;
  	return {
  	getTransaction: () => scopeTransaction,
  	// eslint-disable-next-line @typescript-eslint/no-explicit-any
  	setSpan: jest.fn((span: any) => {
  	scopeTransaction = span;
  	}),
  	setTag(_tag: any) {
  	// Placeholder
  	},
  	setContext(_context: any) {
  	// Placeholder
  	},
  	addBreadcrumb(_breadcrumb: any) {
  	// Placeholder
  	},
  	getUser: () => scopeUser,
  	};
  	};
  	const getMockHub = () => {
  	const mockHub = new Hub(
  	new BrowserClient({
  	tracesSampleRate: 1,
  	integrations: [],
  	transport: () => ({
  	send: jest.fn(),
  	flush: jest.fn(),
  	}),
  	stackParser: () => [],
  	}),
  	);
  	const mockScope = getMockScope();
  	// eslint-disable-next-line @typescript-eslint/no-explicit-any
  	mockHub.getScope = () => mockScope as any;
  	// eslint-disable-next-line @typescript-eslint/no-explicit-any
  	mockHub.configureScope = jest.fn(callback => callback(mockScope as any));
  	return mockHub;
  	};
  	import type { Event, Scope } from '@sentry/types';
  	import type { AppState, AppStateStatus } from 'react-native';