feat: Web StrictMode e2e test and playwright setup (#8715)

## Summary

This PR adds playwright setup for web e2e tests. It also adds the
example file for the fix implemented in #8567 and implements the first
e2e test that checks if the example works properly.

## Comparison

I compared test results for the working and non-working implementation
and all of them work as expected. To change the current working
implementation to non-working, you can simply remove the following lines
of code from the
`packages/react-native-reanimated/src/createAnimatedComponent/AnimatedComponent.tsx`:

```tsx
while (dummyClone?.firstChild) {
  element.appendChild(dummyClone.firstChild);
}
delete element.dummyClone;
```

### For incorrect implementation

<img width="591" height="176" alt="Screenshot 2025-12-07 at 01 10 21"
src="https://github.com/user-attachments/assets/aee28362-5df3-4198-8f70-1278f1fb9392"
/>

### For correct implementation

<img width="526" height="148" alt="Screenshot 2025-12-07 at 01 28 38"
src="https://github.com/user-attachments/assets/b794be89-c6a7-45d7-ac95-d889a03f97b6"
/>

Author: MatiPl01

.gitignore

@@ -75,3 +75,8 @@ CompilationDatabase
 compile_commands.json
 
 build/
+
+# Playwright
+test-results/
+playwright-report/
+playwright/.cache/

apps/common-app/src/apps/reanimated/examples/LayoutAnimations/StrictModeComparisonExample.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState, StrictMode } from 'react';
+import { StyleSheet, View, Text, Button } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+export default function LayoutAnimationsStrictMode() {
+  return (
+    <StrictComparison title="Strict Mode vs Non-Strict Mode">
+      <LayoutAnimations />
+    </StrictComparison>
+  );
+}
+
+function LayoutAnimations() {
+  const [hide, setHide] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setHide(false), 200);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Button
+        title={hide ? 'Show' : 'Hide'}
+        onPress={() => setHide((prev) => !prev)}
+      />
+
+      {hide ? null : (
+        <>
+          <Text>Entering</Text>
+          <Animated.View entering={FadeIn}>
+            <Square />
+          </Animated.View>
+
+          <Text>Entering and exiting</Text>
+          <Animated.View entering={FadeIn} exiting={FadeOut}>
+            <Square />
+          </Animated.View>
+
+          <Text>Exiting</Text>
+          <Animated.View exiting={FadeOut}>
+            <Square />
+          </Animated.View>
+        </>
+      )}
+    </View>
+  );
+}
+
+function StrictComparison({
+  children,
+  title,
+}: {
+  children: React.ReactNode;
+  title: string;
+}) {
+  return (
+    <View style={styles.wrapper}>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.descriptionText}>
+        This example demonstrates layout animations in React&apos;s Strict Mode
+        vs Non-Strict Mode. Both columns should behave identically - animations
+        should work the same regardless of Strict Mode.
+      </Text>
+
+      <View style={styles.columnsContainer}>
+        <View style={styles.column} testID="strict-mode-column">
+          <Text>Strict mode</Text>
+          <StrictMode>{children}</StrictMode>
+        </View>
+        <View style={styles.column} testID="non-strict-column">
+          <Text>Non-strict</Text>
+          {children}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function Square() {
+  return <View style={styles.square} testID="box" />;
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 12,
+    alignItems: 'center',
+    flex: 1,
+    padding: 16,
+  },
+  title: {
+    fontSize: 20,
+    alignSelf: 'center',
+  },
+  descriptionText: {
+    fontSize: 14,
+    textAlign: 'center',
+    color: '#666',
+    paddingHorizontal: 8,
+  },
+  columnsContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 20,
+  },
+  column: {
+    flex: 1,
+    alignItems: 'center',
+    gap: 8,
+  },
+  container: {
+    flex: 1,
+    gap: 20,
+    width: 200,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    padding: 12,
+  },
+  square: {
+    width: 50,
+    height: 50,
+    borderRadius: 10,
+    backgroundColor: 'red',
+  },
+});

apps/common-app/src/apps/reanimated/examples/index.ts

@@ -34,7 +34,7 @@ import DragAndSnapExample from './DragAndSnapExample';
 import DynamicColorIOSExample from './DynamicColorIOSExample';
 import PlatformColorExample from './PlatformColorExample';
 import EmojiWaterfallExample from './EmojiWaterfallExample';
-import EmptyExample from './EmptyExample';
+import StrictModeComparison from './LayoutAnimations/StrictModeComparisonExample';
 import ExtrapolationExample from './ExtrapolationExample';
 import FilterExample from './FilterExample';
 import FlatListWithLayoutAnimations from './FlatListWithLayoutAnimationsExample';
@@ -160,6 +160,7 @@ import WorkletFactoryCrash from './WorkletFactoryCrashExample';
 import WorkletRuntimeExample from './WorkletRuntimeExample';
 import InstanceDiscoveryExample from './InstanceDiscoveryExample';
 import ShadowNodesCloningExample from './ShadowNodesCloningExample';
+import EmptyExample from './EmptyExample';
 
 export const REAPlatform = {
   IOS: 'ios',
@@ -830,6 +831,10 @@ export const EXAMPLES: Record<string, Example> = {
     title: '[LA] Mounting Unmounting',
     screen: MountingUnmounting,
   },
+  StrictModeComparison: {
+    title: '[LA] Strict Mode Comparison',
+    screen: StrictModeComparison,
+  },
   ReactionsCounterExample: {
     title: '[LA] Reactions counter',
     screen: ReactionsCounterExample,

apps/web-example/.gitignore

@@ -13,3 +13,7 @@ web-build/
 # macOS
 .DS_Store
 
+# Playwright
+test-results/
+playwright-report/
+playwright/.cache/

apps/web-example/e2e/layout-animations-strict-mode.spec.ts

@@ -0,0 +1,74 @@
+import { expect, type Page, test } from '@playwright/test';
+
+// Wait time for exit animations to complete before checking box count
+const ANIMATION_WAIT_TIME = 500;
+
+const getColumnButton = (page: Page, label: string) =>
+  page
+    .getByTestId(
+      label === 'Strict mode' ? 'strict-mode-column' : 'non-strict-column'
+    )
+    .getByRole('button')
+    .filter({ hasText: /^(Show|Hide)$/i });
+
+const countBoxes = async (page: Page) => await page.getByTestId('box').count();
+
+const waitForBoxCount = async (
+  page: Page,
+  expectedCount: number,
+  timeout = 2000
+) => {
+  // Wait for exit animations to complete before checking
+  await page.waitForTimeout(ANIMATION_WAIT_TIME);
+  await expect(async () => {
+    expect(await countBoxes(page)).toBe(expectedCount);
+  }).toPass({ timeout: timeout - ANIMATION_WAIT_TIME });
+};
+
+test.describe('StrictModeComparison', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/Reanimated/StrictModeComparison');
+    await page.waitForSelector('text=Strict Mode vs Non-Strict Mode');
+
+    // Wait for the state change to make the boxes visible
+    await page.waitForTimeout(ANIMATION_WAIT_TIME);
+  });
+
+  test('displays 6 red boxes initially', async ({ page }) => {
+    await waitForBoxCount(page, 6);
+  });
+
+  test('hides and shows boxes in strict mode column', async ({ page }) => {
+    const button = getColumnButton(page, 'Strict mode');
+
+    await button.click();
+    await waitForBoxCount(page, 3);
+
+    await button.click();
+    await waitForBoxCount(page, 6);
+  });
+
+  test('hides and shows boxes in non-strict mode column', async ({ page }) => {
+    const button = getColumnButton(page, 'Non-strict');
+
+    await button.click();
+    await waitForBoxCount(page, 3);
+
+    await button.click();
+    await waitForBoxCount(page, 6);
+  });
+
+  test('toggles both columns independently', async ({ page }) => {
+    await getColumnButton(page, 'Strict mode').click();
+    await waitForBoxCount(page, 3);
+
+    await getColumnButton(page, 'Non-strict').click();
+    await waitForBoxCount(page, 0, 3000);
+
+    await getColumnButton(page, 'Strict mode').click();
+    await waitForBoxCount(page, 3);
+
+    await getColumnButton(page, 'Non-strict').click();
+    await waitForBoxCount(page, 6);
+  });
+});

apps/web-example/package.json

@@ -10,7 +10,10 @@
     "format": "prettier --write --list-different .",
     "build": "",
     "lint": "eslint . --max-warnings 0",
-    "type:check": "tsc --noEmit"
+    "type:check": "tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed"
   },
   "dependencies": {
     "common-app": "workspace:*",
@@ -23,6 +26,7 @@
   },
   "devDependencies": {
     "@expo/metro-runtime": "6.1.2",
+    "@playwright/test": "1.57.0",
     "@types/react": "19.2.2",
     "eslint": "9.37.0",
     "prettier": "3.6.2",

apps/web-example/playwright.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  use: {
+    baseURL: 'http://localhost:8081',
+  },
+  webServer: {
+    command: 'yarn start',
+    url: 'http://localhost:8081',
+    reuseExistingServer: true,
+  },
+  // Retry failed tests once in CI
+  retries: process.env.CI ? 1 : 0,
+});

yarn.lock

@@ -6757,6 +6757,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@playwright/test@npm:1.57.0":
+  version: 1.57.0
+  resolution: "@playwright/test@npm:1.57.0"
+  dependencies:
+    playwright: "npm:1.57.0"
+  bin:
+    playwright: cli.js
+  checksum: 10/07f5ba4841b2db1dea70d821004c5156b692488e13523c096ce3487d30f95f34ccf30ba6467ece60c86faac27ae382213b7eacab48a695550981b2e811e5e579
+  languageName: node
+  linkType: hard
+
 "@pnpm/config.env-replace@npm:^1.1.0":
   version: 1.1.0
   resolution: "@pnpm/config.env-replace@npm:1.1.0"
@@ -18082,6 +18093,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@npm:2.3.2":
+  version: 2.3.2
+  resolution: "fsevents@npm:2.3.2"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10/6b5b6f5692372446ff81cf9501c76e3e0459a4852b3b5f1fc72c103198c125a6b8c72f5f166bdd76ffb2fca261e7f6ee5565daf80dca6e571e55bcc589cc1256
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@npm:^2.3.2, fsevents@npm:^2.3.3, fsevents@npm:~2.3.2":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
@@ -18092,6 +18113,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>":
+  version: 2.3.2
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  dependencies:
+    node-gyp: "npm:latest"
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A^2.3.3#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
@@ -26583,6 +26613,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"playwright-core@npm:1.57.0":
+  version: 1.57.0
+  resolution: "playwright-core@npm:1.57.0"
+  bin:
+    playwright-core: cli.js
+  checksum: 10/ec066602f0196f036006caee14a30d0a57533a76673bb9a0c609ef56e21decf018f0e8d402ba2fb18251393be6a1c9e193c83266f1670fe50838c5340e220de0
+  languageName: node
+  linkType: hard
+
+"playwright@npm:1.57.0":
+  version: 1.57.0
+  resolution: "playwright@npm:1.57.0"
+  dependencies:
+    fsevents: "npm:2.3.2"
+    playwright-core: "npm:1.57.0"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    playwright: cli.js
+  checksum: 10/241559210f98ef11b6bd6413f2d29da7ef67c7865b72053192f0d164fab9e0d3bd47913b3351d5de6433a8aff2d8424d4b8bd668df420bf4dda7ae9fcd37b942
+  languageName: node
+  linkType: hard
+
 "plist@npm:^3.0.5":
   version: 3.1.0
   resolution: "plist@npm:3.1.0"
@@ -33139,6 +33193,7 @@ __metadata:
   resolution: "web-example@workspace:apps/web-example"
   dependencies:
     "@expo/metro-runtime": "npm:6.1.2"
+    "@playwright/test": "npm:1.57.0"
     "@types/react": "npm:19.2.2"
     common-app: "workspace:*"
     eslint: "npm:9.37.0"