Add sentry/react-native/playground export and tests

Author: Krystof Woldrich

packages/core/playground.js

@@ -0,0 +1 @@
+export * from './dist/js/playground';

packages/core/playground.ts

@@ -0,0 +1 @@
+export * from './dist/js/playground';

packages/core/src/js/index.ts

@@ -94,5 +94,3 @@ export { FeedbackWidget } from './feedback/FeedbackWidget';
 export { showFeedbackWidget, showFeedbackButton, hideFeedbackButton } from './feedback/FeedbackWidgetManager';
 
 export { getDataFromUri } from './wrapper';
-
-export { SentryPlayground as Wizard, withSentryPlayground } from './playground/modal';

packages/core/src/js/playground/index.ts

@@ -0,0 +1 @@
+export { withSentryPlayground } from './modal';

packages/core/src/js/playground/modal.tsx

@@ -20,6 +20,25 @@ import { hi as hiAnimation, bug as bugAnimation, thumbsup as thumbsupAnimation }
 import { hi as hiImage, bug as bugImage, thumbsup as thumbsupImage } from './images';
 import { nativeCrashExample, tryCatchExample, uncaughtErrorExample } from './examples';
 
+/**
+ * Wrapper to add Sentry Playground to your application
+ * to test your Sentry React Native SDK setup.
+ *
+ * @example
+ * ```tsx
+ * import * as Sentry from '@sentry/react-native';
+ * import { withSentryPlayground } from '@sentry/react-native/playground';
+ *
+ * function App() {
+ *   return <View>...</View>;
+ * }
+ *
+ * export default withSentryPlayground(Sentry.wrap(App), {
+ *   projectId: '123456',
+ *   organizationSlug: 'my-org'
+ * });
+ * ```
+ */
 export const withSentryPlayground = <P extends object>(
   Component: React.ComponentType<P>,
   options: { projectId?: string; organizationSlug?: string } = {},

packages/core/test/playground/__snapshots__/modal.test.tsx.snap

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+import { SentryPlayground } from '../../src/js/playground/modal';
+
+describe('PlaygroundComponent', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('matches the snapshot with no props', () => {
+    const { toJSON } = render(<SentryPlayground />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('matches the snapshot with project id and organization slug', () => {
+    const { toJSON } = render(<SentryPlayground projectId="test-project-1234" organizationSlug="test-org-slug-1234" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

packages/core/test/playground/modal.test.tsx

@@ -3,6 +3,8 @@
   "include": [
     "./src/js/*.ts",
     "./src/js/*.tsx",
+    "./src/js/playground/*.ts",
+    "./src/js/playground/*.tsx",
     "./src/js/**/*.web.ts",
     "./src/js/**/*.web.tsx",
     "./typings/react-native.d.ts"

packages/core/tsconfig.build.json

@@ -10,16 +10,13 @@ import React from 'react';
 import * as WebBrowser from 'expo-web-browser';
 import { useUpdates } from 'expo-updates';
 import { isWeb } from '../../utils/isWeb';
-import { Wizard } from '@sentry/react-native';
-import { Image } from 'react-native';
 
 const isRunningInExpoGo = Constants.appOwnership === 'expo';
 
 export default function TabOneScreen() {
   const { currentlyRunning } = useUpdates();
   return (
     <View style={styles.container}>
-      <Wizard />
       {/* <Image source={require('../..//hi.gif')} style={{ width: 100, height: 100 }} /> */}
       <Sentry.TimeToInitialDisplay record />
       <Text>Welcome to Sentry Expo Sample App!</Text>

samples/expo/app/(tabs)/index.tsx

@@ -11,6 +11,7 @@ import * as Sentry from '@sentry/react-native';
 import { LogBox } from 'react-native';
 import { isWeb } from '../utils/isWeb';
 import * as ImagePicker from 'expo-image-picker';
+import { withSentryPlayground } from '@sentry/react-native/playground';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -144,4 +145,9 @@ function RootLayoutNav() {
   );
 }
 
+// export default withSentryPlayground(Sentry.wrap(RootLayout), {
+//   projectId: '5428561',
+//   organizationSlug: 'sentry-sdks',
+// });
+
 export default Sentry.wrap(RootLayout);