Teniendo el siguiente componente:
import { useState } from 'react'; export function MyComponent() { const [val, setVal] = useState(false); return ( <div> big container <button onClick={() => setVal(!val)}>click</button> {val && <div>small container</div>} </div> ); } export default MyComponent; Hay un div que contiene el texto "pequeño contenedor", que solo aparece cuando val es true .
Quiero escribir una prueba en broma para esto, pero no sé cómo burlarme del valor de val allí.
Aquí está mi código hasta ahora:
it('small container visible only when val is true', () => { const { queryByText } = render(<MyComponent />); const toTest = queryByText('small container'); expect(toTest).not.toBeInTheDocument(); }); esta prueba pasa, pero ¿cómo se puede agregar val establecido en true para probar que toTest está presente en el documento?
Puede hacer clic en el botón que establecerá el val en verdadero.
it('small container visible only when val is true', () => { const {queryByText, getByTestId} = render(<MyComponent />); const clickButton = getByTestId('your.button.test.id'); fireEvent.click(clickButton); expect(queryByText('small container')).toBeInDocument(); });La biblioteca de prueba de React no recomienda probar los detalles de implementación según lo documentado aquí. Es por eso que es posible que no desee acceder al estado interno del componente durante la prueba.