Soy totalmente nuevo en las pruebas de JavaScript y estoy trabajando en una nueva base de código. Me gustaría escribir una prueba que busque un nombre de clase en el elemento. Estoy trabajando con Jest y React Testing Library . A continuación, tengo una prueba que generará un botón basado en la variant de apoyo. También contiene un nombre de clase y me gustaría probarlo.
it('Renders with a className equal to the variant', () => { const { container } = render(<Button variant="default" />) expect(container.firstChild) // Check for className here }) Traté de buscar en Google una propiedad como la que tiene Enzyme con hasClass , pero no pude encontrar nada. ¿Cómo puedo resolver esto con las bibliotecas actuales ( React Testing Library y Jest)?
Puede hacerlo fácilmente con react-testing-library.
Primero, debe comprender que el container o el resultado de getByText , etc., son simplemente nodos DOM. Puede interactuar con ellos de la misma manera que lo haría en un navegador.
Entonces, si desea saber qué clase se aplica a container.firstChild , puede hacerlo así container.firstChild.className .
Si lees más sobre className en MDN verás que devuelve todas las clases aplicadas a tu elemento separadas por un espacio, es decir:
<div class="foo"> => className === 'foo' <div class="foo bar"> => className === 'foo bar' Esta podría no ser la mejor solución dependiendo de su caso. No se preocupe, puede usar otra API de navegador, por ejemplo,classList .
expect(container.firstChild.classList.contains('foo')).toBe(true)¡Eso es todo! No es necesario aprender una nueva API que solo funciona para pruebas. Es como en el navegador.
Si verificar una clase es algo que hace con frecuencia, puede facilitar las pruebas agregando jest-dom a su proyecto.
La prueba entonces se convierte en:
expect(container.firstChild).toHaveClass('foo') Hay muchos otros métodos prácticos como toHaveStyle que podrían ayudarte.
Como nota al margen, react-testing-library es una utilidad de prueba de JavaScript adecuada. Tiene muchas ventajas sobre otras bibliotecas. Te animo a unirte al foro de espectro si eres nuevo en las pruebas de JavaScript.
La biblioteca da acceso a los selectores DOM normales, por lo que también podemos simplemente hacer esto:
it('Renders with a className equal to the variant', () => { const { container } = render(<Button variant="default" />) expect(container.getElementsByClassName('default').length).toBe(1); });Debe comprender la filosofía detrás de la biblioteca de pruebas de reacción para comprender lo que puede hacer y lo que no puede hacer con él;
El objetivo detrás de react-testing-library es que las pruebas eviten incluir detalles de implementación de sus componentes y, más bien, se centren en escribir pruebas que le brinden la confianza para la que están destinadas.
Por lo tanto, consultar el elemento por nombre de clase no está alineado con la filosofía de la biblioteca de pruebas de reacción, ya que incluye detalles de implementación. El nombre de clase es el detalle real de implementación de un elemento y no es algo que el usuario final verá, y está sujeto a cambios en cualquier momento del ciclo de vida del elemento.
Entonces, en lugar de buscar elementos por lo que el usuario no puede ver, y algo que puede cambiar en cualquier momento, simplemente intente buscar usando algo que el usuario pueda ver, como texto, etiqueta o algo que permanecerá constante en el ciclo de vida del elemento. como identificación de datos.
Entonces, para responder a su pregunta, no se recomienda probar classname y, por lo tanto, no puede hacerlo con react-testing-library . Pruebe con otras bibliotecas de prueba como Enzyme o react-dom test utils .