Tengo una prueba como esta:
it('Side effect should trigger', async ()=>{ await act(async () => { let container = render(<Grandparent/>); const btn = container.findByTestId('childBtn'); fireEvent.click(btn) }); const changedMsg = await container.findByText('Changed'); expect(changedMsg).toBeInTheDocument(); })Mis componentes se ven así:
Abuelo:
const Grandparent = ()=>{ const [labelText, setLabelText] = useState('Unchanged'); return (<Parent labelText={labelText} setLabelText={setLabelText}/>); }Padre:
const Parent = ({labelText, setLabelText})=>{ return (<div> <label>{labelText}</label> <Child setLabelText={setLabelText} /> </div>) }Niño:
const Child = ({setLabelText}) =>{ return(<div> <Button data-testid='childBtn' onClick={()=>setLabelText('Changed')}/> </div>) } Mi problema es que la afirmación en mi prueba unitaria falla. He registrado el valor de retorno de findByTextId('childBtn') y de hecho obtengo un botón (algo así como <button class='MuiButtonBase-root' data-testid='childBtn'></button> ), pero el lado el efecto de hacer clic en él no está pasando. Agregué algunos registros en la función onClick y nunca apareció cuando volví a ejecutar la prueba, por lo que el problema es que el controlador onClick no se activa en absoluto.
¿Cómo puedo solucionar esto? ¿Intentar probar algo que involucra efectos secundarios de un montón de componentes anidados como este no es factible en primer lugar?
EDITAR: creo que tiene algunos errores de código en la prueba de su unidad ya que está mezclando la API de la biblioteca de pruebas de reacción y la biblioteca de pruebas, intente esto:
it("Side effect should trigger", async () => { const {findByTestId, findByText} = render(<Grandparent />); fireEvent.click(await findByTestId("childBtn")); const changedMsg = await findByText("Changed"); expect(changedMsg).toBeInTheDocument(); }); });No lo probé, pero debería funcionar. El envoltorio act() no es necesario en react-testing-library ya que el método render lo usa internamente.
Con react-testing-library, no tiene que preocuparse por los detalles de implementación de sus componentes, ni por probar el estado interno, etc. Simplemente prueba "Lo que el usuario final ve en la pantalla en respuesta a ciertos eventos". Si necesita probar funciones, como buscar, interacciones con objetos globales, etc., debe burlarse de todos esos métodos.
La filosofía de este enfoque es hacer que sus pruebas unitarias (que nunca son divertidas de escribir) para que no tengan que cambiar con demasiada frecuencia, incluso si va a refactorizar sus componentes React. Solo le importa lo que se representa como nodos DOM y eso es lo que tiene que probar.
NOTA: En el código que pegó hay errores tipográficos por cierto, los accesorios deben desestructurarse en su código si desea usarlos directamente sin hacer props.prop, como: const Child = ({setLabelText}) =>{ .