## UI Testing for Stripe Apps

This document outlines how to test the user interface (UI) of your Stripe app using the provided utilities and helpers within the Extension SDK. It's recommended to use Jest for running your tests, and the SDK includes custom matchers to simplify assertion writing.

### Conceptual Overview

When testing your Stripe app's UI, you are not directly testing the Document Object Model (DOM) tree. Instead, you are testing a remote rendering engine that displays your app. This is because, for security reasons, the React code in your Stripe app repository is serialized, sent through an extension loader via an iframe, and then translated into a DOM tree within the Stripe Dashboard. The testing tools provided by the Extension SDK interact with this remote rendering engine.

### Example

The following example demonstrates how to test a `Button` UI component that changes its text when clicked. The test involves rendering the component and simulating a click event to verify the text update.

```javascript
// Example test for a Button component
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from '@stripe/ui-extension-sdk/ui';

test('button text changes when clicked', () => {
  render(<Button onPress={() => console.log('Button clicked!')}>Click Me</Button>);
  const buttonElement = screen.getByText('Click Me');

  // Simulate a click event
  fireEvent.press(buttonElement);

  // Assert that the button text has changed (or any other expected outcome)
  // For this example, we'll just check if the element is still in the document
  expect(buttonElement).toBeInTheDocument();
});
```