Testing EuiCallOut
Quick reference
How to test EuiCallOut?
EuiCallOut adds simple wrapper elements to the rendered title, icon, and children. When testing, you should focus on the inner content that's being passed to the component instead of testing the exact DOM structure.
We recommend testing for the expected text to exist in the document or within a section of the document it's supposed
to be rendered in (e.g., by screen.getByText('Lorem ipsum')). In case there might be multiple EuiCallOuts rendered,
we recommend adding data-test-subj attributes to each of them and running queries within specific EuiCallOut
elements to ensure the test is running assertions on the right one.
Testing icon type
You can use the data-icon-type attribute of the .euiIcon element to check what icon type is rendered.
This level of detail in tests is often unnecessary, and we recommend having really good tests
for the inner data this component renders first before testing icon and callout types.
Available selectors
| Selector | Description |
|---|---|
.euiCallOut | Root element |
.euiCallOutHeader__title | Callout title |
.euiIcon | Callout header icon |
[data-test-subj="euiDismissCalloutButton"] | Dismiss button |