Skip to content

Commit e36505b

Browse files
antonisantonis
authored
test(react-native): Add E2E Tests for React Native and Expo projects (#884)
* Adds Expo 52 test application * Adds React Native 0.78 test application * Rename test app folders for consistency * Add missing folders to readme structure section * Add react native folders to readme structure section * Add simple package.json check for React Native and Expo * Adds changelog * Run Expo and React Native E2E tests on CI * Add accidentally ignored ios folder to react native test app * Adds react native file diff tests * Adds expo tests * Update expo app.json checks * Update expo app.json checks to consider CI environment variables * Optionally skip podinstall if prompted * Enable debug output on CI * Optionally skip prettier if prompted * Try running react native tests on macos * Revert "Optionally skip prettier if prompted" This reverts commit 94b38d3. * Revert "Optionally skip podinstall if prompted" This reverts commit 765fb79. * Try setting iOS env for react native * Increase wait timeout * Check sentry.properties for RN project * Try running pod install * Add extra logging before addBuildPhase * Revert "Add extra logging before addBuildPhase" This reverts commit 6ca5dae. * Run expo on ubuntu * Revert "Try running pod install" This reverts commit 23111d6. * Disable React Native iOS Checks * Set correct path for Android sentry.properties * Default on ubuntu for all jobs since ios is disabled * Disable xcode selection * Undo unneeded constants change * disable debug logging * Align changes with merged code * Add session replay step in Expo e2e tests * Rename Expo test file * Add session replay step in React-Native e2e tests * Remove pod-install step
1 parent c29b8ee commit e36505b

File tree

86 files changed

+2442
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+2442
-2
lines changed

‎.github/workflows/build.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,12 +114,14 @@ jobs:
114114
strategy:
115115
matrix:
116116
wizard:
117+
- Expo
117118
- Flutter
118119
- Nuxt-3
119120
- Nuxt-4
120121
- NextJS-14
121122
- NextJS-15
122123
- Remix
124+
- React-Native
123125
- Sveltekit
124126
- Help
125127
env:

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ docs/doctrees
1313
build
1414
node_modules
1515
npm-debug.log
16+
1617
ios
18+
# Except the one inside e2e-tests/test-applications/react-native-test-app/
19+
!e2e-tests/test-applications/react-native-test-app/ios/
20+
1721
./android
1822
yarn-error.log
1923
.node-cache

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
## Unreleased
4+
5+
- test(react-native): Add E2E Tests for React Native and Expo projects ([#884](https://github.com/getsentry/sentry-wizard/pull/884))
6+
37
## 4.7.0
48

59
- feat: Add `deno` as a package manager ([#905](https://github.com/getsentry/sentry-wizard/pull/905))

‎e2e-tests/README.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,22 @@
55
```
66
test-applications/
77
|---- flutter-test-app/
8-
|---- nextjs-test-app/
8+
|---- nextjs-14-test-app/
9+
|---- nextjs-15test-app/
10+
|---- nuxt-3-test-app/
11+
|---- nuxt-4-test-app/
12+
|---- react-native-test-app/
13+
|---- react-native-expo-test-app/
914
|---- remix-test-app/
1015
|---- sveltekit-test-app/
1116
tests/
1217
|---- flutter.test.ts
13-
|---- nextjs.test.ts
18+
|---- nextjs.14.test.ts
19+
|---- nextjs.15.test.ts
20+
|---- nuxt.3.test.ts
21+
|---- nuxt.4.test.ts
22+
|---- react-native.test.ts
23+
|---- react-native-expo.test.ts
1424
|---- remix.test.ts
1525
|---- sveltekit.test.ts
1626
```

‎e2e-tests/test-applications/react-native-expo-test-app/.gitignore

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
expo-env.d.ts
11+
12+
# Native
13+
*.orig.*
14+
*.jks
15+
*.p8
16+
*.p12
17+
*.key
18+
*.mobileprovision
19+
20+
# Metro
21+
.metro-health-check*
22+
23+
# debug
24+
npm-debug.*
25+
yarn-debug.*
26+
yarn-error.*
27+
28+
# macOS
29+
.DS_Store
30+
*.pem
31+
32+
# local env files
33+
.env*.local
34+
35+
# typescript
36+
*.tsbuildinfo
37+
38+
app-example

‎e2e-tests/test-applications/react-native-expo-test-app/README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Welcome to your Expo app 👋
2+
3+
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
4+
5+
## Get started
6+
7+
1. Install dependencies
8+
9+
```bash
10+
npm install
11+
```
12+
13+
2. Start the app
14+
15+
```bash
16+
npx expo start
17+
```
18+
19+
In the output, you'll find options to open the app in a
20+
21+
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
22+
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
23+
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
24+
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
25+
26+
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
27+
28+
## Get a fresh project
29+
30+
When you're ready, run:
31+
32+
```bash
33+
npm run reset-project
34+
```
35+
36+
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
37+
38+
## Learn more
39+
40+
To learn more about developing your project with Expo, look at the following resources:
41+
42+
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
43+
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
44+
45+
## Join the community
46+
47+
Join our community of developers creating universal apps.
48+
49+
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
50+
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

‎e2e-tests/test-applications/react-native-expo-test-app/app.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"expo": {
3+
"name": "react-native-expo-52",
4+
"slug": "react-native-expo-52",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "myapp",
9+
"userInterfaceStyle": "automatic",
10+
"newArchEnabled": true,
11+
"ios": {
12+
"supportsTablet": true
13+
},
14+
"android": {
15+
"adaptiveIcon": {
16+
"foregroundImage": "./assets/images/adaptive-icon.png",
17+
"backgroundColor": "#ffffff"
18+
}
19+
},
20+
"web": {
21+
"bundler": "metro",
22+
"output": "static",
23+
"favicon": "./assets/images/favicon.png"
24+
},
25+
"plugins": [
26+
"expo-router",
27+
[
28+
"expo-splash-screen",
29+
{
30+
"image": "./assets/images/splash-icon.png",
31+
"imageWidth": 200,
32+
"resizeMode": "contain",
33+
"backgroundColor": "#ffffff"
34+
}
35+
]
36+
],
37+
"experiments": {
38+
"typedRoutes": true
39+
}
40+
}
41+
}

‎e2e-tests/test-applications/react-native-expo-test-app/app/(tabs)/_layout.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Tabs } from 'expo-router';
2+
import React from 'react';
3+
import { Platform } from 'react-native';
4+
5+
import { HapticTab } from '@/components/HapticTab';
6+
import { IconSymbol } from '@/components/ui/IconSymbol';
7+
import TabBarBackground from '@/components/ui/TabBarBackground';
8+
import { Colors } from '@/constants/Colors';
9+
import { useColorScheme } from '@/hooks/useColorScheme';
10+
11+
export default function TabLayout() {
12+
const colorScheme = useColorScheme();
13+
14+
return (
15+
<Tabs
16+
screenOptions={{
17+
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
18+
headerShown: false,
19+
tabBarButton: HapticTab,
20+
tabBarBackground: TabBarBackground,
21+
tabBarStyle: Platform.select({
22+
ios: {
23+
// Use a transparent background on iOS to show the blur effect
24+
position: 'absolute',
25+
},
26+
default: {},
27+
}),
28+
}}>
29+
<Tabs.Screen
30+
name="index"
31+
options={{
32+
title: 'Home',
33+
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
34+
}}
35+
/>
36+
<Tabs.Screen
37+
name="explore"
38+
options={{
39+
title: 'Explore',
40+
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
41+
}}
42+
/>
43+
</Tabs>
44+
);
45+
}

‎e2e-tests/test-applications/react-native-expo-test-app/app/(tabs)/explore.tsx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { StyleSheet, Image, Platform } from 'react-native';
2+
3+
import { Collapsible } from '@/components/Collapsible';
4+
import { ExternalLink } from '@/components/ExternalLink';
5+
import ParallaxScrollView from '@/components/ParallaxScrollView';
6+
import { ThemedText } from '@/components/ThemedText';
7+
import { ThemedView } from '@/components/ThemedView';
8+
import { IconSymbol } from '@/components/ui/IconSymbol';
9+
10+
export default function TabTwoScreen() {
11+
return (
12+
<ParallaxScrollView
13+
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
14+
headerImage={
15+
<IconSymbol
16+
size={310}
17+
color="#808080"
18+
name="chevron.left.forwardslash.chevron.right"
19+
style={styles.headerImage}
20+
/>
21+
}>
22+
<ThemedView style={styles.titleContainer}>
23+
<ThemedText type="title">Explore</ThemedText>
24+
</ThemedView>
25+
<ThemedText>This app includes example code to help you get started.</ThemedText>
26+
<Collapsible title="File-based routing">
27+
<ThemedText>
28+
This app has two screens:{' '}
29+
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
30+
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
31+
</ThemedText>
32+
<ThemedText>
33+
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
34+
sets up the tab navigator.
35+
</ThemedText>
36+
<ExternalLink href="https://docs.expo.dev/router/introduction">
37+
<ThemedText type="link">Learn more</ThemedText>
38+
</ExternalLink>
39+
</Collapsible>
40+
<Collapsible title="Android, iOS, and web support">
41+
<ThemedText>
42+
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
43+
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
44+
</ThemedText>
45+
</Collapsible>
46+
<Collapsible title="Images">
47+
<ThemedText>
48+
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
49+
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
50+
different screen densities
51+
</ThemedText>
52+
<Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
53+
<ExternalLink href="https://reactnative.dev/docs/images">
54+
<ThemedText type="link">Learn more</ThemedText>
55+
</ExternalLink>
56+
</Collapsible>
57+
<Collapsible title="Custom fonts">
58+
<ThemedText>
59+
Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
60+
<ThemedText style={{ fontFamily: 'SpaceMono' }}>
61+
custom fonts such as this one.
62+
</ThemedText>
63+
</ThemedText>
64+
<ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
65+
<ThemedText type="link">Learn more</ThemedText>
66+
</ExternalLink>
67+
</Collapsible>
68+
<Collapsible title="Light and dark mode components">
69+
<ThemedText>
70+
This template has light and dark mode support. The{' '}
71+
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
72+
what the user's current color scheme is, and so you can adjust UI colors accordingly.
73+
</ThemedText>
74+
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
75+
<ThemedText type="link">Learn more</ThemedText>
76+
</ExternalLink>
77+
</Collapsible>
78+
<Collapsible title="Animations">
79+
<ThemedText>
80+
This template includes an example of an animated component. The{' '}
81+
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
82+
the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
83+
library to create a waving hand animation.
84+
</ThemedText>
85+
{Platform.select({
86+
ios: (
87+
<ThemedText>
88+
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
89+
component provides a parallax effect for the header image.
90+
</ThemedText>
91+
),
92+
})}
93+
</Collapsible>
94+
</ParallaxScrollView>
95+
);
96+
}
97+
98+
const styles = StyleSheet.create({
99+
headerImage: {
100+
color: '#808080',
101+
bottom: -90,
102+
left: -35,
103+
position: 'absolute',
104+
},
105+
titleContainer: {
106+
flexDirection: 'row',
107+
gap: 8,
108+
},
109+
});

0 commit comments

Comments
 (0)