|
| 1 | +# Testing Setup |
| 2 | + |
| 3 | +This document describes the testing setup for the WalletConnect AppKit React Native project. |
| 4 | + |
| 5 | +## Shared Jest Setup |
| 6 | + |
| 7 | +To avoid duplication and ensure consistency across packages, we use a shared Jest setup approach: |
| 8 | + |
| 9 | +### Structure |
| 10 | + |
| 11 | +- `jest-shared-setup.ts`: Contains common mocks used across all packages |
| 12 | +- Package-specific `jest-setup.ts` files: Import the shared setup and add package-specific mocks |
| 13 | + |
| 14 | +### How it works |
| 15 | + |
| 16 | +1. The root `jest.config.ts` defines a moduleNameMapper that maps `@shared-jest-setup` to the shared setup file: |
| 17 | + |
| 18 | +```js |
| 19 | +moduleNameMapper: { |
| 20 | + '^@shared-jest-setup$': '<rootDir>/jest-shared-setup.ts' |
| 21 | +} |
| 22 | +``` |
| 23 | + |
| 24 | +2. Each package's `jest.config.ts` overrides this mapping to use a relative path: |
| 25 | + |
| 26 | +```js |
| 27 | +moduleNameMapper: { |
| 28 | + '^@shared-jest-setup$': '../../jest-shared-setup.ts' |
| 29 | +} |
| 30 | +``` |
| 31 | + |
| 32 | +3. Each package has its own `jest-setup.ts` file that imports the shared setup and only adds package-specific mocks: |
| 33 | + |
| 34 | +```js |
| 35 | +// Import shared setup |
| 36 | +import '@shared-jest-setup'; |
| 37 | + |
| 38 | +// Import helper functions from shared setup (if needed) |
| 39 | +import { mockThemeContext, mockUseTheme } from '@shared-jest-setup'; |
| 40 | + |
| 41 | +// Apply package-specific mocks |
| 42 | +mockThemeContext('../src/context/ThemeContext'); |
| 43 | +mockUseTheme('../src/hooks/useTheme'); |
| 44 | + |
| 45 | +// Add any other package-specific mocks here if needed |
| 46 | +``` |
| 47 | + |
| 48 | +### Shared Mocks |
| 49 | + |
| 50 | +The shared setup includes mocks for: |
| 51 | + |
| 52 | +- `@react-native-async-storage/async-storage` |
| 53 | +- React Native components and APIs (StyleSheet, Dimensions, Platform, etc.) |
| 54 | +- `react-native-svg` components |
| 55 | +- Helper functions for mocking package-specific modules |
| 56 | + |
| 57 | +All common mocks are centralized in the shared setup file, eliminating duplication across packages. This makes the testing setup more maintainable and consistent. |
| 58 | + |
| 59 | +### Adding New Mocks |
| 60 | + |
| 61 | +To add a new mock that should be shared across packages: |
| 62 | + |
| 63 | +1. Add it to `jest-shared-setup.ts` |
| 64 | +2. If it's a function that needs to be imported by packages, export it from `jest-shared-setup.ts` |
| 65 | + |
| 66 | +For package-specific mocks, add them to the package's `jest-setup.ts` file. |
| 67 | + |
| 68 | +### Type Declarations |
| 69 | + |
| 70 | +Each package includes a type declaration file for the shared setup module: |
| 71 | + |
| 72 | +```ts |
| 73 | +// types/shared-jest-setup.d.ts |
| 74 | +declare module '@shared-jest-setup' { |
| 75 | + export function mockThemeContext(modulePath: string): void; |
| 76 | + export function mockUseTheme(modulePath: string): void; |
| 77 | +} |
| 78 | +``` |
| 79 | + |
| 80 | +## Running Tests |
| 81 | + |
| 82 | +To run tests for all packages: |
| 83 | + |
| 84 | +```bash |
| 85 | +yarn test |
| 86 | +``` |
| 87 | + |
| 88 | +To run tests for a specific package: |
| 89 | + |
| 90 | +```bash |
| 91 | +yarn workspace @reown/appkit-[package-name]-react-native test |
| 92 | +``` |
| 93 | + |
| 94 | +## Playwright Testing |
| 95 | + |
| 96 | +For end-to-end testing of web interfaces (such as the web demo or web views within the React Native app), we use Playwright. |
| 97 | + |
| 98 | +### Setup |
| 99 | + |
| 100 | +1. Install Playwright: |
| 101 | + |
| 102 | +```bash |
| 103 | +# Install Playwright and browsers |
| 104 | +npx playwright install |
| 105 | +``` |
| 106 | + |
| 107 | +2. Playwright tests are located in the `e2e` directory at the root of the project. |
| 108 | + |
| 109 | +### Writing Tests |
| 110 | + |
| 111 | +Playwright tests are written using the Playwright Test framework. Here's a basic example: |
| 112 | + |
| 113 | +```typescript |
| 114 | +import { test, expect } from '@playwright/test'; |
| 115 | + |
| 116 | +test('basic test', async ({ page }) => { |
| 117 | + // Navigate to the page |
| 118 | + await page.goto('https://your-app-url.com'); |
| 119 | + |
| 120 | + // Interact with the page |
| 121 | + await page.click('text=Sign In'); |
| 122 | + await page. fill( 'input[name="email"]', '[email protected]'); |
| 123 | + await page.fill('input[name="password"]', 'password'); |
| 124 | + await page.click('button[type="submit"]'); |
| 125 | + |
| 126 | + // Assert the result |
| 127 | + await expect(page.locator('.welcome-message')).toContainText('Welcome'); |
| 128 | +}); |
| 129 | +``` |
| 130 | + |
| 131 | +### Running Playwright Tests |
| 132 | + |
| 133 | +To run all Playwright tests: |
| 134 | + |
| 135 | +```bash |
| 136 | +yarn playwright:test |
| 137 | +``` |
| 138 | + |
| 139 | +To run a specific test file: |
| 140 | + |
| 141 | +```bash |
| 142 | +yarn playwright:test tests/basic-tests.spec.ts |
| 143 | +``` |
| 144 | + |
| 145 | +### Debugging Playwright Tests |
| 146 | + |
| 147 | +To debug tests: |
| 148 | + |
| 149 | +1. Run with the `--debug` flag: |
| 150 | + |
| 151 | +```bash |
| 152 | +yarn playwright:test --debug |
| 153 | +``` |
| 154 | + |
| 155 | +2. Use the Playwright Inspector to step through the test. |
| 156 | + |
| 157 | +3. Add `await page.pause()` in your test to pause at a specific point. |
| 158 | + |
| 159 | +### Generating Test Reports |
| 160 | + |
| 161 | +To generate an HTML report: |
| 162 | + |
| 163 | +```bash |
| 164 | +yarn playwright:test --reporter=html |
| 165 | +``` |
| 166 | + |
| 167 | +Then open the report: |
| 168 | + |
| 169 | +```bash |
| 170 | +yarn playwright:test show-report |
| 171 | +``` |
| 172 | + |
| 173 | +For more information, refer to the [Playwright documentation](https://playwright.dev/docs/intro). |
0 commit comments