MetaMask / MetaMask/metamask-design-system
Add CI testing for React Native Storybook to prevent import errors
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
## Problem
Currently, the React Native Storybook app (`@metamask/storybook-react-native`) has **no automated testing in CI**. This allows import errors, missing dependencies, and compilation issues to slip through PR reviews undetected.
**Example:** PR #933 merged with broken Box imports in `BottomSheetFooter.stories.tsx`, discovered only when running Storybook locally.
## Current State
### React Storybook (Web) ✅
- Has `test-storybook` workflow with Vitest + Playwright
- Runs accessibility tests with axe-playwright
- Validates compilation before merge
### React Native Storybook ❌
- No CI validation
- No compilation checks
- No Metro bundler validation
- Import errors go undetected
## Proposed Solution
Add **Metro bundler compilation check** to CI:
```yaml
# .github/workflows/test-storybook-react-native.yml
name: Test Storybook React Native
on:
pull_request:
push:
branches: [main]
jobs:
test-storybook-native:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20.x
cache: yarn
- name: Install dependencies
run: yarn install --immutable
- name: Build packages
run: yarn build
- name: Validate Metro bundler compilation
run: yarn workspace @metamask/storybook-react-native run export
# Or: yarn workspace @metamask/storybook-react-native run build
```
### Benefits
- ✅ Catches import errors before merge
- ✅ Validates Metro bundler configuration
- ✅ Fast runtime (~2-3 minutes)
- ✅ No external services needed
- ✅ Prevents broken Storybook deploys
### Alternative Options
1. **TypeScript-only check**: Lightweight but may miss Metro-specific issues
2. **Full EAS build**: Most thorough but slower and requires EAS setup
3. **Combination approach**: TypeScript + Metro compilation for best coverage
## Implementation Checklist
- [ ] Add Metro compilation script to `apps/storybook-react-native/package.json`
- [ ] Create `.github/workflows/test-storybook-react-native.yml`
- [ ] Update root `package.json` with `test:storybook:react-native` script
- [ ] Add workflow to `.github/workflows/main.yml` orchestrator
- [ ] Test on sample PR with intentional import error
- [ ] Document in `docs/contributing.md`
## Related
- Current React Storybook testing: `.github/workflows/test-storybook.yml`
- Root orchestrator: `.github/workflows/main.yml`
- Discovered in PR: #933
Contributor guide
Research direction
Compare .github/workflows/test-storybook.yml with .github/workflows/main.yml, then inspect apps/storybook-react-native/package.json and the root package.json. Confirm the appropriate Metro command, add the workflow and orchestration entries, update docs/contributing.md, and validate it with a sample PR containing an intentional import error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- github-actions, react-native, typescript
- Domain
- build-system, ci-cd, testing-qa
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100