♾️ Unstable Rendering

Common Problems

Some stories may not render identically each time due to:

• Moving elements (animations, videos, loading states)
• Dynamic data (dates, counters, randomized content)

Solution

Use isRunningVisualTests to control component behavior during tests:

isRunningVisualTests()

import { isRunningVisualTests } from "@sherlo/react-native-storybook";

function UnstableComponent() {
  return (
    <>
      {/* For moving elements */}
      <Loader animated={!isRunningVisualTests} />
      
      {/* For dynamic data */}
      <Text>{isRunningVisualTests ? "$99.99" : getPrice()}</Text>
    </>
  );
}

tip

For components that can't be stabilized, consider excluding them from testing