If you haven't already, create a new app in the Developer Portal⁠(opens in a new tab or window). For more information, refer to our Quickstart guide.
In your app's configuration on the Developer Portal⁠(opens in a new tab or window), ensure the "Development URL" is set to http://localhost:8080.

Clone the starter kit:

git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
cd canva-apps-sdk-starter-kit

SHELL

Install dependencies:
```
npm install
```
SHELL
Run the example:
```
npm run start ui_test
```
SHELL
Click the Preview URL link shown in the terminal to open the example in the Canva editor.

Example app source code

// For usage information, see the README.md file.
import { Button, Rows, Text } from "@canva/app-ui-kit";
import * as styles from "styles/components.css";

export const App = (props: { onClick(): void }) => {
  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="2u">
        <Text>This example demonstrates how to test your App's UI.</Text>
        <Text>
          Checkout <code>examples/testing/ui_test/tests/app.tests.tsx</code> to
          learn how to start testing.
        </Text>
        <Button variant="primary" onClick={props.onClick}>
          Do something cool
        </Button>
      </Rows>
    </div>
  );
};

TYPESCRIPT

import { createRoot } from "react-dom/client";
import { App } from "./app";
import "@canva/app-ui-kit/styles.css";
import { AppUiProvider } from "@canva/app-ui-kit";
import { addElementAtPoint } from "@canva/design";

const root = createRoot(document.getElementById("root") as Element);
function render() {
  root.render(
    <AppUiProvider>
      {/* Any Apps SDK method needs to be injected to the component, to avoid the need to mock it in tests */}
      <App
        onClick={() =>
          addElementAtPoint({
            type: "text",
            children: ["Hello world!"],
          })
        }
      />
    </AppUiProvider>,
  );
}

render();

if (module.hot) {
  module.hot.accept("./app", render);
}

TYPESCRIPT

// Import testing sub-packages
import * as asset from "@canva/asset/test";
import * as design from "@canva/design/test";
import * as error from "@canva/error/test";
import * as platform from "@canva/platform/test";
import * as user from "@canva/user/test";

// Initialize the test environments
asset.initTestEnvironment();
design.initTestEnvironment();
error.initTestEnvironment();
platform.initTestEnvironment();
user.initTestEnvironment();

// Once they're initialized, mock the SDKs
jest.mock("@canva/asset");
jest.mock("@canva/design");
jest.mock("@canva/platform");
jest.mock("@canva/user");
// n.b. @canva/error should not be mocked - use it to simulate API error responses from other mocks by throwing CanvaError

TYPESCRIPT

import { fireEvent, render } from "@testing-library/react";
import { TestAppUiProvider } from "@canva/app-ui-kit";
import { App } from "../app";

describe("app", () => {
  let addElementAtPoint: jest.Mock;

  beforeEach(() => {
    addElementAtPoint = jest.fn();
  });

  it("calls addElementAtPoint onClick", async () => {
    const result = render(
      // In a test environment, you should wrap your apps in `TestAppUiProvider`, rather than `AppUiProvider`
      <TestAppUiProvider theme="dark">
        <App onClick={addElementAtPoint} />
      </TestAppUiProvider>,
    );

    // get a reference to the button element
    const button = result.getByRole("button");

    // assert its label matches what we expect
    expect(button.textContent).toEqual("Do something cool");
    // assert our callback has not yet been called
    expect(addElementAtPoint).not.toHaveBeenCalled();

    // programmatically simulate clicking the button
    fireEvent.click(button);

    // assert our callback was called
    expect(addElementAtPoint).toHaveBeenCalledTimes(1);
  });

  it("Renders 🎉", () => {
    const result = render(
      // In a test environment, you should wrap your apps in `TestAppUiProvider`, rather than `AppUiProvider`
      <TestAppUiProvider theme="dark">
        <App onClick={addElementAtPoint} />
      </TestAppUiProvider>,
    );

    expect(result.container).toMatchSnapshot();
  });
});

TYPESCRIPT

# UI testing

Demonstrates how to set up and write tests for app UI components using standard testing frameworks. Shows basic component testing patterns and provides a foundation for testing user interactions.

For API reference docs and instructions on running this example, see: https://www.canva.dev/docs/apps/examples/ui-test/.

Related example: See testing/unit_test for testing app logic and business functions separately from UI.

NOTE: This example differs from what is expected for public apps to pass a Canva review:

- Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
- Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements

MARKDOWN

API Reference

Need Help?

Join our Community Forum⁠(opens in a new tab or window)
Report issues with this example on GitHub⁠(opens in a new tab or window)