A quick post about a problem: how to test if an element exists in a component. I omit the part relating to the configuration of Jest with SvelteKit, I talked about it a short time ago. I focus only on this problem.
I want to run 3 tests:
- if an element exists within a Svelte component
- if the element exists and contains a given text
- if the item does not exist on the page
I use as an example the tests I am implementing for my component svelte-component-info:
Check that an element exists in a Svelte component
The first is easy. After creating the component I use Jest to locate the element. In this case, I am looking for an element with tag
This way Jest checks if the Svelte component contains an element with the ARIA Role
heading. If it does not find it, the test fails.
Check that an element has specific text
If I want to check that an element has a specific property I use a different code. First I capture the element
const title = svelteInfo.getByRole("heading");
Then I check the text:
I recommend consulting the testing-library/jest-dom repository to know the other options available.
Check that an item does not exist in Svelte
Finally, the less intuitive thing: how to check that an element NOT is present in a WEB page or a Svelte element. In this case, I use code like the first one but instead of using
expect(..).toBeTruthy() I use
That’s all. As already mentioned, it’s a quick note to remind the future me how to test the existence or not of an element.