Skip to main content

Data Attributes

latest

Arc React components pass all data attributes through to their underlying DOM nodes, which allows you to use custom data- attributes to identify particular instances of a component.

For example, you could add test ids to Button components and use them to identify the button within testing enviroments:

React Component​

<ButtonV2 label="Button" data-testid="arc-Button-test" />

HTML​

<button class="arc-Button" data-testid="arc-Button-test">
  <span class="arc-Button-inner">
    <span class="arc-Button-text">Button</span>
  </span>
</button>

React Testing Library - Test Case​

This can be used within React Testing Library to test arc components.

test("Arc component renders correctly", () => {
  render(
    <ButtonV2
      ariaLabel="ARIA label"
      label="Label"
      data-testid="arc-Button-test"
    />,
  );

  expect(screen.getByTestId("arc-Button-test").toBeInTheDocument());
});