diff --git a/src/__tests__/native/reactivity-activity.test.tsx b/src/__tests__/native/reactivity-activity.test.tsx new file mode 100644 index 00000000..b17b4c5a --- /dev/null +++ b/src/__tests__/native/reactivity-activity.test.tsx @@ -0,0 +1,188 @@ +import { Activity } from "react"; + +import { act, render } from "@testing-library/react-native"; +import { View } from "react-native-css/components/View"; +import { registerCSS, testID } from "react-native-css/jest"; +import { colorScheme } from "react-native-css/runtime"; + +/** + * lifecycle regression tests for the subscription reconnect in + * useNativeCss. + * + * React 19.2's renders its children but does not + * mount their effects. When the boundary becomes visible, React re-renders + * the children, re-creates their effects, and — critically — does NOT re-run + * any state initializers. useNativeCss's state initializer (which runs + * updateRules and subscribes ruleEffect) therefore runs at a different time + * than the first effect setup, and observable conditions may have changed in + * between. + * + * The reconnect effect in useNativeCss must re-establish subscriptions + * against CURRENT observable state at the moment effects (re-)mount. + */ + +function Fixture({ className }: { className: string }) { + return ; +} + +function ActivityFixture({ + hidden, + className, +}: { + hidden: boolean; + className: string; +}) { + return ( + + + + ); +} + +test("pre-rendered hidden Activity shows current styles on first show and stays reactive", () => { + registerCSS(` +.audit-activity-prerender { color: blue; } + +@media (prefers-color-scheme: dark) { + .audit-activity-prerender { color: red; } +} +`); + + const screen = render( +