I have a Vue 2 project that uses v-calendar and I'd like to test it using @testing-library/vue.
The library encourages you to use getByRole
and specify a name to narrow down the results but here I can't since the DOM comes from an external library.
I can't either use getByTestId
for the same reason.
The content of the button is an SVG so getByText
is not possible neither.
Is it ok in this specific case to use the container
returned from the render
method and do container.querySelector('vc-nav-arrow is-left')
?
<div role="button" class="vc-arrow is-left">
<svg data-v-63f7b5ec="" width="26px" height="26px" viewBox="0 -1 16 34" class="vc-svg-icon"><path data-v-63f7b5ec="" d="M11.196 10c0 0.143-0.071 0.304-0.179 0.411l-7.018 7.018 7.018 7.018c0.107 0.107 0.179 0.268 0.179 0.411s-0.071 0.304-0.179 0.411l-0.893 0.893c-0.107 0.107-0.268 0.179-0.411 0.179s-0.304-0.071-0.411-0.179l-8.321-8.321c-0.107-0.107-0.179-0.268-0.179-0.411s0.071-0.304 0.179-0.411l8.321-8.321c0.107-0.107 0.268-0.179 0.411-0.179s0.304 0.071 0.411 0.179l0.893 0.893c0.107 0.107 0.179 0.25 0.179 0.411z"></path></svg>
</div>