Using animation prop removes testID prop on web platform when using @tamagui/animations-moti

[smrubin]

Current Behavior

On the web platform, when adding the animation prop to a component, the testID prop is removed. It appears to specifically be an issue if using @tamagui/animations-moti for animations. Testing with @tamagui/animations-css package, it worked as expected.

Expected Behavior

The testID prop should remain on the rendered component on web.

Tamagui Version

1.86.6

Platform (Web, iOS, Android)

Web

Reproduction

<Stack testID="testID" animation="quick">
    Hello world
</Stack>

### System Info

```markdown
System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.22 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 17.4.1
  npmPackages:
    @awesome.me/kit-e00b2acf97: ^1.0.14 => 1.0.14
    @babel/core: ^7.20.0 => 7.23.7
    @config-plugins/detox: ^7.0.0 => 7.0.0
    @datadog/browser-logs: ^5.14.0 => 5.14.0
    @datadog/browser-rum: ^5.14.0 => 5.14.0
    @datadog/mobile-react-native: ^2.1.1 => 2.1.1
    @dev-plugins/react-navigation: ^0.0.5 => 0.0.5
    @dev-plugins/react-query: ^0.0.5 => 0.0.5
    @dotlottie/react-player: ^1.6.19 => 1.6.19
    @expo/config-plugins: ~7.9.1 => 7.9.1
    @expo/metro-config: ~0.17.1 => 0.17.7
    @expo/react-native-action-sheet: ^4.0.1 => 4.0.1
    @fortawesome/fontawesome-svg-core: ^6.4.2 => 6.5.1
    @fortawesome/pro-light-svg-icons: ^6.4.2 => 6.5.1
    @fortawesome/pro-regular-svg-icons: ^6.4.2 => 6.5.1
    @fortawesome/pro-solid-svg-icons: ^6.4.2 => 6.5.1
    @fortawesome/react-native-fontawesome: ^0.3.0 => 0.3.0
    @gorhom/bottom-sheet: ^4.6.1 => 4.6.1
    @hookform/resolvers: ^3.3.4 => 3.3.4
    @jest/globals: ^29.7.0 => 29.7.0
    @kanelloc/react-native-animated-header-scroll-view: 1.0.0 => 1.0.0
    @logrocket/react-native: ^1.30.3 => 1.33.1
    @lottiefiles/react-lottie-player: ^3.5.3 => 3.5.3
    @moneykit/connect: ^0.3.12 => 0.3.12
    @moneykit/connect-react-native: 1.7.0 => 1.7.0
    @react-native-async-storage/async-storage: 1.21.0 => 1.21.0
    @react-native-clipboard/clipboard: ^1.13.2 => 1.13.2
    @react-native-community/datetimepicker: 7.6.2 => 7.6.2
    @react-native-community/netinfo: 11.1.0 => 11.1.0
    @react-native-picker/picker: 2.6.1 => 2.6.1
    @react-navigation/elements: ^1.3.21 => 1.3.21
    @react-navigation/native: ^6.1.6 => 6.1.9
    @sendbird/chat: ^4.10.3 => 4.12.0
    @sendbird/uikit-chat-hooks: 3.3.0 => 3.3.0
    @sendbird/uikit-react: ^3.14.0 => 3.14.0
    @sendbird/uikit-react-native: 3.3.0 => 3.3.0
    @sendbird/uikit-react-native-foundation: 3.3.0 => 3.3.0
    @sendbird/uikit-utils: 3.3.0 => 3.3.0
    @sentry/browser: ^7.101.0 => 7.101.0
    @sentry/react-native: ~5.20.0 => 5.20.0
    @stytch/react: ^15.0.0 => 15.0.0
    @stytch/react-native: ^0.21.0 => 0.21.0
    @stytch/react-native-inappbrowser-reborn: ^3.7.2 => 3.7.2
    @stytch/vanilla-js: ^4.3.1 => 4.4.0
    @tamagui/animations-css: 1.86.6 => 1.96.0
    @tamagui/animations-moti: 1.86.6 => 1.96.0
    @tamagui/core: 1.86.6 => 1.96.0
    @tamagui/create-theme: 1.86.6 => 1.96.0
    @tamagui/react-native-media-driver: 1.86.6 => 1.96.0
    @tamagui/shorthands: 1.86.6 => 1.96.0
    @tamagui/theme-builder: 1.86.6 => 1.96.0
    @tamagui/toast: 1.86.6 => 1.96.0
    @tanstack/react-query: ^5.4.3 => 5.17.19
    @types/jscodeshift: ^0.11.11 => 0.11.11
    @types/lodash: ^4.14.199 => 4.14.202
    @types/mixpanel-browser: ^2.47.3 => 2.48.1
    @types/node: ^20.8.6 => 20.11.26
    @types/react: ~18.2.14 => 18.2.48
    @types/uuid: ^9.0.7 => 9.0.7
    @typescript-eslint/eslint-plugin: ^6.7.0 => 6.19.1
    @typescript-eslint/parser: ^6.7.0 => 6.19.1
    burnt: ^0.12.2 => 0.12.2
    calver: ^22.9.1 => v22.9.1
    cypress: ^13.8.0 => 13.8.0
    date-fns: ^2.30.0 => 2.30.0
    date-fns-tz: ^2.0.0 => 2.0.0
    detox: ^20.17.0 => 20.17.0
    dotenv: ^16.4.5 => 16.4.5
    eslint-config-prettier: ^9.0.0 => 9.1.0
    eslint-config-standard-with-typescript: ^43.0.0 => 43.0.1
    eslint-plugin-import: ^2.29.1 => 2.29.1
    eslint-plugin-jsx-a11y: ^6.7.1 => 6.8.0
    eslint-plugin-n: ^16.6.2 => 16.6.2
    eslint-plugin-no-only-tests: ^3.1.0 => 3.1.0
    eslint-plugin-promise: ^6.1.1 => 6.1.1
    eslint-plugin-react: ^7.33.2 => 7.33.2
    eslint-plugin-simple-import-sort: ^10.0.0 => 10.0.0
    expo: ~50.0.17 => 50.0.17
    expo-application: ~5.8.4 => 5.8.4
    expo-av: ~13.10.5 => 13.10.5
    expo-blur: ~12.9.2 => 12.9.2
    expo-build-properties: ~0.11.1 => 0.11.1
    expo-clipboard: ~5.0.1 => 5.0.1
    expo-constants: ~15.4.6 => 15.4.6
    expo-dev-client: ~3.3.11 => 3.3.11
    expo-device: ~5.9.4 => 5.9.4
    expo-document-picker: ~11.10.1 => 11.10.1
    expo-file-system: ~16.0.6 => 16.0.9
    expo-font: ~11.10.2 => 11.10.3
    expo-image-manipulator: ~11.8.0 => 11.8.0
    expo-image-picker: ~14.7.1 => 14.7.1
    expo-linear-gradient: ~12.7.2 => 12.7.2
    expo-linking: ~6.2.2 => 6.2.2
    expo-local-authentication: ~13.8.0 => 13.8.0
    expo-media-library: ~15.9.2 => 15.9.2
    expo-notifications: ~0.27.7 => 0.27.7
    expo-router: ~3.4.8 => 3.4.8
    expo-splash-screen: ~0.26.4 => 0.26.4
    expo-status-bar: ~1.11.1 => 1.11.1
    expo-updates: ~0.24.12 => 0.24.12
    expo-video-thumbnails: ~7.9.0 => 7.9.0
    fast-text-encoding: ^1.0.6 => 1.0.6
    jest: ^29.7.0 => 29.7.0
    jotai: ^2.5.1 => 2.6.2
    jscodeshift: ^0.15.2 => 0.15.2
    lodash: ^4.17.21 => 4.17.21
    logrocket: ^7.0.0 => 7.0.0
    lottie-react-native: 6.5.1 => 6.5.1
    minimatch: ^8.0.4 => 8.0.4
    mixpanel-browser: ^2.47.0 => 2.48.1
    mixpanel-react-native: ^2.3.1 => 2.4.0
    msw: ^2.2.3 => 2.2.3
    netlify-cli: ^17.15.1 => 17.15.2
    patch-package: ^8.0.0 => 8.0.0
    prettier: ^3.2.4 => 3.2.4
    promise.allsettled: ^1.0.7 => 1.0.7
    react: 18.2.0 => 18.2.0
    react-calendly: ^4.3.0 => 4.3.0
    react-dom: 18.2.0 => 18.2.0
    react-hook-form: ^7.49.3 => 7.49.3
    react-native: 0.73.6 => 0.73.6
    react-native-blob-util: ^0.19.8 => 0.19.8
    react-native-circular-progress-indicator: ^4.4.2 => 4.4.2
    react-native-confetti-cannon: ^1.5.2 => 1.5.2
    react-native-gesture-handler: ~2.14.0 => 2.14.1
    react-native-get-random-values: ~1.8.0 => 1.8.0
    react-native-ios-context-menu: ^2.5.1 => 2.5.1
    react-native-launch-arguments: ^4.0.2 => 4.0.2
    react-native-mmkv: ^2.11.0 => 2.11.0
    react-native-pager-view: 6.2.3 => 6.2.3
    react-native-pdf: ^6.7.4 => 6.7.4
    react-native-pkce-challenge: 5.3.1 => 5.3.1
    react-native-plaid-link-sdk: ^11.7.1 => 11.8.0
    react-native-reanimated: ~3.6.2 => 3.6.2
    react-native-reanimated-carousel: ^3.5.1 => 3.5.1
    react-native-safe-area-context: 4.8.2 => 4.8.2
    react-native-screens: ~3.29.0 => 3.29.0
    react-native-select-dropdown: ^3.4.0 => 3.4.0
    react-native-svg: 14.1.0 => 14.1.0
    react-native-svg-transformer: ^1.1.0 => 1.3.0
    react-native-tab-view: ^3.5.2 => 3.5.2
    react-native-web: ~0.19.6 => 0.19.10
    react-native-webview: 13.6.4 => 13.6.4
    source-map-explorer: ^2.5.3 => 2.5.3
    statsig-react-native-expo: ~4.7.0 => 4.7.0
    tamagui: 1.86.6 => 1.96.0
    ts-jest: ^29.1.1 => 29.1.2
    ts-node: ^10.9.1 => 10.9.2
    typescript: ^5.1.3 => 5.3.3
    use-count-up: ^3.0.1 => 3.0.1
    use-debounce: ^10.0.0 => 10.0.0
    uuid: ^9.0.1 => 9.0.1
    zod: ^3.22.4 => 3.22.4

[jacobffl]

Looking at the animations-moti code, it is hard to see anything that could indicate a bug or gap in that package.

So perhaps this is an issue in that package's core dependency, moti. Maybe within moti, the testID is being overwritten/removed unintentionally, or perhaps it needs to be explicitly passed to an inner element?

@nandorojo, what would be your guess? Or your recommendation for how to handle this issue?

[nandorojo]

Moti definitely isn't involved with that prop. My guess is that this happens since tamagui gets raw props from the component, passes them to moti, gets the style back, but then isn't spreading the test id onto the component it's wrapping

[natew]

I've attempted a fix for this, we basically have to create our own custom reanimated underling view rather than using their View, and then make it support applying the various web-only tamagui features. It's very doable but when I tried last I ran into various issues. cc @ehxxn

[ehxxn]

yeah having our own layer should make it easier to manage