Tengo un componente React que genera un botón cuyo contenido contiene un elemento <span> como este:
function Click(props) { return ( <button disable={props.disable}> <span>Click me</span> </button> ); } Quiero probar la lógica de este componente con el uso de react-testing-library y mocha + chai .
El problema en el que me quedé estancado en este momento es que el getByText("Click me") devuelve el nodo DOM <span> , pero para las pruebas, necesito verificar el atributo de disable del nodo <button> . ¿Cuál es la mejor práctica para manejar tales casos de prueba? Veo un par de soluciones, pero todas suenan un poco mal:
data-test-id para el elemento <button><Click /> y luego seleccione el botón within(...) este ámbitofireEvent y comprueba que no ha pasado nada¿Puedes sugerir un mejor enfoque?
Afirmar si el botón está deshabilitado
Puede usar toHaveAttribute y el closest para probarlo.
import { render } from '@testing-library/react'; const { getByText } = render(Click); expect(getByText(/Click me/i).closest('button')).toHaveAttribute('disabled'); o toBeDisabled
expect(getByText(/Click me/i).closest('button')).toBeDisabled();Afirmar si el botón está habilitado
Para verificar si el botón está habilitado, use not de la siguiente manera
expect(getByText(/Click me/i).closest('button')).not.toBeDisabled();Puede usar toBeDisabled() de @testing-library/jest-dom , es un comparador de bromas personalizado para probar el estado del DOM:
https://github.com/testing-library/jest-dom
Ejemplo:
<button>Submit</button> expect(getByText(/submit/i)).toBeDisabled()Para alguien que está buscando la prueba en la que el botón no está deshabilitado .
import { render } from '@testing-library/react'; const { getByText } = render(Click); expect(getByText(/Click me/i).getAttribute("disabled")).toBe(null)