Skip to content

Commit b42e4f7

Browse files
wcandillonwcandillon
authored
chore(🐙): more web e2e testing (#3474)
1 parent f14377d commit b42e4f7

File tree

6 files changed

+169
-89
lines changed

6 files changed

+169
-89
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ jobs:
115115
skia_version: artifact:${{ needs.build-library.outputs.run_id }}
116116
test_ios: true
117117
test_android: true
118+
test_web: true
118119

119120
build-windows-library:
120121
runs-on: windows-latest
@@ -432,64 +433,3 @@ jobs:
432433
- name: Build example for macOS Catalyst
433434
working-directory: apps/example/ios
434435
run: xcodebuild -workspace example.xcworkspace -scheme ReactTestApp -destination 'platform=macOS,arch=arm64,variant=Mac Catalyst' -configuration Debug build CODE_SIGN_IDENTITY="" CODE_SIGNING_REQUIRED=NO CODE_SIGNING_ALLOWED=NO
435-
436-
# test-web:
437-
# runs-on: macos-latest
438-
# steps:
439-
# - name: Checkout
440-
# uses: actions/checkout@ff7abcd0c3c05ccf6adc123a8cd1fd4fb30fb493 # v5.0.0
441-
# with:
442-
# submodules: recursive
443-
444-
# - name: Setup
445-
# uses: ./.github/actions/setup
446-
# with:
447-
# github_token: ${{ secrets.GITHUB_TOKEN }}
448-
449-
# - name: Update skia-web-app submodule to latest main
450-
# run: |
451-
# cd externals/skia-web-app
452-
# git checkout main
453-
# git pull origin main
454-
455-
# - name: Build and pack Skia package
456-
# working-directory: packages/skia
457-
# run: yarn build && yarn pack
458-
459-
# - name: Log package.json before change
460-
# working-directory: externals/skia-web-app
461-
# run: |
462-
# echo "=== package.json BEFORE change ==="
463-
# grep -n "@shopify/react-native-skia" package.json || echo "Pattern not found"
464-
# echo "=================================="
465-
466-
# - name: Update package.json to use local Skia package
467-
# working-directory: externals/skia-web-app
468-
# run: |
469-
# # More robust regex that handles different whitespace
470-
# sed -i '' 's/"@shopify\/react-native-skia"[[:space:]]*:[[:space:]]*"[^"]*"/"@shopify\/react-native-skia": "file:..\/..\/packages\/skia\/package.tgz"/' package.json
471-
472-
# - name: Log package.json after change
473-
# working-directory: externals/skia-web-app
474-
# run: |
475-
# echo "=== package.json AFTER change ==="
476-
# grep -n "@shopify/react-native-skia" package.json || echo "Pattern not found"
477-
# echo "================================="
478-
479-
# - name: Install dependencies for skia-web-app
480-
# working-directory: externals/skia-web-app
481-
# run: yarn install --no-immutable
482-
483-
# - name: Start web server
484-
# working-directory: externals/skia-web-app
485-
# run: |
486-
# yarn web &
487-
# sleep 30
488-
489-
# - name: Run tests
490-
# working-directory: externals/skia-web-app
491-
# run: yarn test --detectOpenHandles
492-
493-
# - name: Stop web server
494-
# working-directory: externals/skia-web-app
495-
# run: pkill -f "yarn web" || true

‎.github/workflows/test-skia-package.yml‎

Lines changed: 150 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ on:
3232
required: false
3333
default: 'Nexus 5X'
3434
type: string
35+
test_web:
36+
description: 'Run Web tests'
37+
required: false
38+
type: boolean
39+
default: true
3540

3641
jobs:
3742
test-skia-ios:
@@ -73,10 +78,15 @@ jobs:
7378
pwd
7479
7580
- name: Create Expo app with Skia template
76-
working-directory: /Users/runner/skia-test-app
77-
run: |
78-
echo "Creating Expo app with Skia template..."
79-
yarn create expo-app my-app -e with-skia
81+
uses: nick-fields/retry@v3
82+
with:
83+
timeout_minutes: 10
84+
max_attempts: 3
85+
retry_wait_seconds: 120
86+
command: |
87+
cd /Users/runner/skia-test-app
88+
echo "Creating Expo app with Skia template..."
89+
yarn create expo-app my-app -e with-skia
8090
8191
- name: Download artifact package if specified
8292
if: startsWith(inputs.skia_version, 'artifact:')
@@ -230,10 +240,15 @@ jobs:
230240
pwd
231241
232242
- name: Create Expo app with Skia template
233-
working-directory: /Users/runner/skia-test-app
234-
run: |
235-
echo "Creating Expo app with Skia template..."
236-
yarn create expo-app my-app -e with-skia
243+
uses: nick-fields/retry@v3
244+
with:
245+
timeout_minutes: 10
246+
max_attempts: 3
247+
retry_wait_seconds: 120
248+
command: |
249+
cd /Users/runner/skia-test-app
250+
echo "Creating Expo app with Skia template..."
251+
yarn create expo-app my-app -e with-skia
237252
238253
- name: Download artifact package if specified
239254
if: startsWith(inputs.skia_version, 'artifact:')
@@ -342,3 +357,130 @@ jobs:
342357
echo "✓ Installed expo-dev-client"
343358
echo "✓ Built and ran Android app on API level ${{ inputs.android_api_level }}"
344359
echo "================================================================"
360+
361+
test-skia-web:
362+
if: inputs.test_web
363+
runs-on: macos-latest-large
364+
timeout-minutes: 30
365+
366+
steps:
367+
- name: Checkout repository
368+
uses: actions/checkout@v4
369+
370+
- name: Setup Node.js
371+
uses: actions/setup-node@v4
372+
with:
373+
node-version: '20'
374+
375+
- name: Setup Yarn
376+
run: |
377+
corepack enable
378+
yarn --version
379+
380+
- name: Install Expo CLI
381+
run: |
382+
npm install -g expo-cli eas-cli
383+
expo --version
384+
385+
- name: Create test directory
386+
run: |
387+
mkdir -p /Users/runner/skia-test-app
388+
cd /Users/runner/skia-test-app
389+
pwd
390+
391+
- name: Create Expo app with Skia template
392+
uses: nick-fields/retry@v3
393+
with:
394+
timeout_minutes: 10
395+
max_attempts: 3
396+
retry_wait_seconds: 120
397+
command: |
398+
cd /Users/runner/skia-test-app
399+
echo "Creating Expo app with Skia template..."
400+
yarn create expo-app my-app -e with-skia
401+
402+
- name: Download artifact package if specified
403+
if: startsWith(inputs.skia_version, 'artifact:')
404+
run: |
405+
ARTIFACT_ID=$(echo "${{ inputs.skia_version }}" | sed 's/artifact://')
406+
echo "Downloading artifact ID: $ARTIFACT_ID"
407+
gh run download --repo Shopify/react-native-skia $ARTIFACT_ID -n package-tgz -D /tmp
408+
env:
409+
GH_TOKEN: ${{ github.token }}
410+
411+
- name: Install React Native Skia
412+
working-directory: /Users/runner/skia-test-app/my-app
413+
run: |
414+
VERSION="${{ inputs.skia_version }}"
415+
if [ "$VERSION" == "latest" ]; then
416+
echo "Installing @shopify/react-native-skia@latest..."
417+
yarn add @shopify/react-native-skia@latest
418+
elif [[ "$VERSION" == artifact:* ]]; then
419+
echo "Installing @shopify/react-native-skia from downloaded artifact..."
420+
yarn add @shopify/react-native-skia@file:/tmp/package.tgz
421+
elif [[ "$VERSION" == http* ]]; then
422+
echo "Installing @shopify/react-native-skia from URL: $VERSION"
423+
yarn add @shopify/react-native-skia@"$VERSION"
424+
else
425+
echo "Installing @shopify/react-native-skia@$VERSION..."
426+
yarn add @shopify/react-native-skia@"$VERSION"
427+
fi
428+
429+
- name: Show installed Skia version
430+
working-directory: /Users/runner/skia-test-app/my-app
431+
run: |
432+
echo "Installed React Native Skia version:"
433+
yarn list @shopify/react-native-skia --depth=0
434+
435+
- name: Install TypeScript dependencies
436+
working-directory: /Users/runner/skia-test-app/my-app
437+
run: |
438+
echo "Installing TypeScript dependencies..."
439+
npx expo install typescript @types/react
440+
441+
- name: Install Playwright dependencies
442+
run: |
443+
echo "Installing Playwright..."
444+
npm install -g playwright
445+
npx playwright install chromium
446+
npx playwright install-deps chromium
447+
448+
- name: Start web server
449+
working-directory: /Users/runner/skia-test-app/my-app
450+
run: |
451+
echo "Starting web server in background..."
452+
npx expo start --web &
453+
sleep 30
454+
455+
- name: Wait for web app to be ready
456+
run: |
457+
echo "Waiting for web app to be accessible..."
458+
timeout 60 bash -c 'until curl -s http://localhost:8081 > /dev/null; do sleep 2; done' || echo "Web server may not be fully ready"
459+
echo "Waiting additional time for app to fully render..."
460+
sleep 30
461+
462+
- name: Take screenshot
463+
if: always()
464+
run: |
465+
echo "Taking screenshot of web app..."
466+
npx playwright screenshot http://localhost:8081 /Users/runner/skia-test-screenshot-web.png || echo "Failed to capture screenshot"
467+
468+
- name: Upload screenshot
469+
if: always()
470+
uses: actions/upload-artifact@v4
471+
with:
472+
name: web-screenshot-${{ github.run_id }}
473+
path: /Users/runner/skia-test-screenshot-web.png
474+
if-no-files-found: ignore
475+
476+
- name: Print test summary
477+
if: always()
478+
run: |
479+
echo "================================================================"
480+
echo "Web Test Summary:"
481+
echo "================================================================"
482+
echo "✓ Created Expo app with Skia template"
483+
echo "✓ Installed @shopify/react-native-skia@${{ inputs.skia_version }}"
484+
echo "✓ Started web server"
485+
echo "✓ Web app accessible at http://localhost:8081"
486+
echo "================================================================"

‎.github/workflows/test-skia-release.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ on:
3333
required: false
3434
default: true
3535
type: boolean
36+
test_web:
37+
description: 'Run Web tests'
38+
required: false
39+
default: true
40+
type: boolean
3641

3742
jobs:
3843
test-skia:
@@ -41,6 +46,7 @@ jobs:
4146
skia_version: ${{ inputs.skia_version }}
4247
test_ios: ${{ inputs.test_ios }}
4348
test_android: ${{ inputs.test_android }}
49+
test_web: ${{ inputs.test_web }}
4450
simulator_device: ${{ inputs.simulator_device }}
4551
android_api_level: ${{ inputs.android_api_level }}
4652
android_device: ${{ inputs.android_device }}

‎.gitmodules‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,3 @@
55
[submodule "externals/depot_tools"]
66
path = externals/depot_tools
77
url = https://chromium.googlesource.com/chromium/tools/depot_tools.git
8-
[submodule "externals/skia-web-app"]
9-
path = externals/skia-web-app
10-
url = https://github.com/wcandillon/skia-web-app.git
11-
branch = master

‎apps/docs/docs/getting-started/web.mdx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,19 @@ It should also be mentionned that React Native Skia can be used on projects with
1818

1919
## Expo
2020

21-
:::info
21+
### Automatic configuration
2222

23-
Metro and expo-router support is available from v0.1.240 and onwards.
24-
If you are using v0.1.221 (recommended version for Expo SDK 50), you can use [this patch](https://github.com/Shopify/react-native-skia/files/14357144/%40shopify%2Breact-native-skia%2B0.1.221.patch) (using [`patch-package`](https://www.npmjs.com/package/patch-package).
23+
For new Expo Router projects, we recommend using the Expo Skia template which sets up web support automatically:
2524

26-
:::
25+
```bash
26+
yarn create expo-app my-app -e with-skia
27+
# or
28+
npx create-expo-app my-app -e with-skia
29+
```
30+
31+
This template includes the proper configuration for web support out of the box, so you don't need to manually configure loading methods.
32+
33+
### Manual configuration
2734

2835
Use the `setup-skia-web` script to ensure that the `canvaskit.wasm` file is accessible within your Expo project's public folder.
2936
If you're [loading CanvasKit from a CDN](#using-a-cdn), running the `setup-skia-web` script is unnecessary.
@@ -33,16 +40,12 @@ $ npx expo install @shopify/react-native-skia
3340
$ yarn setup-skia-web
3441
```
3542

36-
:::info
37-
3843
Run `yarn setup-skia-web` each time you upgrade the `@shopify/react-native-skia` package.
3944
Consider incorporating it into your `postinstall` script for convenience.
4045

41-
:::
42-
4346
After setup, choose your method to [Load Skia](#loading-skia).
4447

45-
For projects using Expo Router, you can use [code-splitting](#using-code-splitting) or [deferred component registration](#using-deferred-component-registration).
48+
For existing projects using Expo Router, you can use [code-splitting](#using-code-splitting) or [deferred component registration](#using-deferred-component-registration).
4649
If you wish to use deferred component registration with Expo Router, you need to create your own `main` property in `package.json`.
4750
For instance, if you've created `index.tsx` and `index.web.tsx` in your root directory, update your `package.json` accordingly:
4851
```patch
@@ -66,12 +69,6 @@ LoadSkiaWeb().then(async () => {
6669

6770
For the `index.tsx` file, directly invoke `renderRootComponent(App)`.
6871

69-
### Snack
70-
71-
Utilize the [code-splitting](#using-code-splitting) method for incorporating React Native Skia on [snack](https://snack.expo.dev/).
72-
73-
<Snack id="@wcandillon/hello-snack" />
74-
7572
## Remotion
7673

7774
Follow these [installation steps](https://remotion.dev/skia) to use React Native Skia with Remotion.

‎externals/skia-web-app‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)