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​

<Button 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(<Button ariaLabel="ARIA label" label="Label" data-testid="arc-Button-test" />);

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