Tengo un proyecto Vue 2 que usa v-calendar y me gustaría probarlo usando @testing-library/vue. La biblioteca lo alienta a usar getByRole
y especificar un nombre para reducir los resultados, pero aquí no puedo porque el DOM proviene de una biblioteca externa. Tampoco puedo usar getByTestId
por la misma razón. El contenido del botón es un SVG, por lo que getByText
tampoco es posible.
¿Está bien en este caso específico usar el container
devuelto por el método de render
y hacer 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>