Using testIDs as action name attributes

[imalgrab]

Hey, we're using "@datadog/mobile-react-native-babel-plugin": "2.14.9" in our React Native app and want to make testIDs appear in TAP actions on RUM tab.
As babel plugin documentation does not exist, would you mind guiding us on how to achieve it?

This is our current stage of babel.config.js:

plugins: [
      "transform-inline-environment-variables",
      "module:react-native-dotenv",
      "@babel/plugin-transform-export-namespace-from",
      [
        "@datadog/mobile-react-native-babel-plugin",
        {
          actionNameAttribute: "testID",
          components: {
            useContent: true,
            useNamePrefix: true,
            tracked: [
              {
                name: "Button",
                handlers: [{ event: "onPress", action: "TAP" }],
              },
              {
                name: "TextButton",
                handlers: [{ event: "onPress", action: "TAP" }],
              },
              { name: "FAB", handlers: [{ event: "onPress", action: "TAP" }] },
              {
                name: "Checkbox",
                handlers: [{ event: "onPress", action: "TAP" }],
              },
              {
                name: "ListItem",
                handlers: [{ event: "onPress", action: "TAP" }],
              },
            ],
          },
        },
      ]

Is there anything else required?

[Mahiisss]

I think the actionNameAttribute: "testID" line is the problem — as far as I can tell it's a browser RUM option, not something the React Native plugin reads, so it's silently doing nothing.

There's an open request asking for exactly this on the RN side, from 2023, still unresolved: #490

What React Native actually uses is accessibilityLabel. From the advanced configuration docs, there's a useAccessibilityLabel setting described as "determines whether the accessibility labels are used to name RUM actions (default is true)". So the SDK is already naming your actions — just from accessibilityLabel rather than testID.

Which means you don't really need the plugin to change behaviour. You just need both props to carry the same value:

const tracked = (id) => ({
  testID: id,
  accessibilityLabel: id,
});

<Button {...tracked('login-submit')} onPress={handleSubmit} />

Your test suite keeps using testID, and Datadog picks up the same string through accessibilityLabel. One helper, no per-component boilerplate.

Worth checking useAccessibilityLabel hasn't been set to false in your RUM config, since that would suppress naming entirely.

Two caveats, since I'm going off docs rather than the plugin source:

• If accessibilityLabel is already being used for genuine screen reader text somewhere, you don't want to overwrite it with a test id — those users get read a slug instead of a label. Worth keeping the helper for components where the label is currently empty.
• I couldn't find published docs for the babel plugin's own options either, so it's possible actionNameAttribute does something undocumented. If you want to confirm, the quickest check is to drop it from babel.config.js and see whether anything in RUM changes. My guess is nothing does.

Docs: https://docs.datadoghq.com/real_user_monitoring/application_monitoring/react_native/advanced_configuration/

[NhanDuong21]

Your actionNameAttribute: "testID" option is supported by plugin 2.14.9. Its docs are in the plugin README at that tag; you do not need to replace a screen-reader label with a test ID.

One limitation worth checking is how the prop is written. I tested the published 2.14.9 plugin:

<Button testID="login-submit" onPress={handleSubmit}>Login</Button>

This produces testID: ["login-submit"] in the action metadata. However, testID={id} and {...props} do not produce that metadata: this version's transform only reads string-literal JSX attribute values.

Put the literal on the tracked JSX component that carries onPress. With your useNamePrefix: true, the SDK names it Button ("login-submit"); use false if you want just login-submit. Also check that interaction tracking is enabled in the SDK configuration, then rebuild with the Metro cache cleared after changing Babel config.

These checks were an isolated Babel transform and the 2.14.9 SDK naming logic, not a native-device/RUM ingestion test. If the literal example still fails, could you share the smallest affected JSX example and your @datadog/mobile-react-native version?