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/