Test Helpers

Usage

In order to use Pluma test helpers, start by importing them in your project like so:

import { PlumaTestHelpers } from '@customerio/pluma-components/react/test-helpers/pluma-test-helpers';

From there, you can use retrieve a particular component's test helpers by specifying the component name in the extract function, as the first parameter and passing the element as the second parameter. This is the recommended way to retrieve test helpers.

const icon = PlumaTestHelpers.extract('Icon', screen.getByTestId('data-test-icon'));

This will return all the test helpers for the Icon component, and as long as you're working in a TypeScript compatible file, you'll also get autocomplete on the returned helpers. Alternatively, you can always see available test helpers under a given component's "Test Helpers" tab.

Expanded examples

Using extract

const { container } = render(
	<TestWrapper>
		<Icon data-test-icon name="check-circle" label="test" color="critical" />
	</TestWrapper>
);
		
const icon = PlumaTestHelpers.extract('Icon', container.querySelector('[data-test-icon]')!);

expect(icon.isLabel('test')).toBe(true);

Retrieving test helpers with find

Instead of extract, you can find test helpers for a component from a containing element. find takes in the component name as the first parameter, and the container as the second, like so:

const icon = PlumaTestHelpers.find('Icon', screen.getByTestId('data-test-container'));

The container parameter is optional, and if a container isn't specified, it will search the available rendered DOM. Note however that the less specific you get, the more likely it is for the proper test helpers to not be found. Therefore, the extract function is most recommended.

const icon = PlumaTestHelpers.find('Icon');

For more information on what components have test helpers, see the test helper statuses, and see individual components for their available test helper functions.