Tengo una ventana emergente simple que quiero probar si el botón en el que se hizo clic cierra la ventana emergente usando testing-library/react. La forma que se muestra en los documentos no funciona para mí por alguna razón. Puedo consolar el registro del botón, por lo que la consulta funciona pero fireEvent no activa el botón.
test("close the popup", () => { render( <Popup> <div id="content"></div> </Popup> ); const button = screen.getByText("Got It"); fireEvent.click(button); expect(button).not.toBeInTheDocument(); }); import React, { useEffect, useState } from "react"; import PropTypes from "prop-types"; const Popup = (props) => { const id = "popup-active" const [popupActive, setPopupActive] = useState(() => { const value = window.localStorage.getItem(id); return value !== null ? JSON.parse(value) : true; }); useEffect(() => { window.localStorage.setItem(id, popupActive); }, [popupActive]); const handleX = () => { setPopupActive(!popupActive); }; return ( <div style={{ visibility: popupActive ? "visible" : "hidden", opacity: popupActive ? "1" : "0", }} className={popupStyles.overlay} > <div className={popupStyles.popup}> <div className={popupStyles.content}>{props.children}</div> <button data-testid="button-popup" className={popupStyles.button} onClick={handleX} > Got It </button> </div> </div> ); }; export default Popup;Debe usar el comparador toBeVisible .
Esto le permite verificar si un elemento está actualmente visible para el usuario. Un elemento es visible si se cumplen todas las condiciones siguientes:
- está presente en el documento
- no tiene su visualización de propiedad css establecida en ninguno
- no tiene la visibilidad de su propiedad css configurada como oculta o colapsada
- no tiene su propiedad css opacidad establecida en 0
- su elemento principal también es visible (y así sucesivamente hasta la parte superior del árbol DOM)
- no tiene el atributo oculto
- si
<details />tiene el atributo abierto
P.ej
index.tsx :
import React from 'react'; import { useEffect, useState } from 'react'; const id = 'popup-active'; const Popup = (props) => { const [popupActive, setPopupActive] = useState(() => { const value = window.localStorage.getItem(id); return value !== null ? JSON.parse(value) : true; }); useEffect(() => { window.localStorage.setItem(id, popupActive); }, [popupActive]); const handleX = () => { setPopupActive(!popupActive); }; return ( <div style={{ visibility: popupActive ? 'visible' : 'hidden', opacity: popupActive ? '1' : '0', }} > <div> <div>{props.children}</div> <button data-testid="button-popup" onClick={handleX}> Got It </button> </div> </div> ); }; export default Popup; index.test.tsx :
import { fireEvent, render, screen } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import React from 'react'; import Popup from './'; describe('73407176', () => { test('should pass', () => { render( <Popup> <div id="content"></div> </Popup> ); const button = screen.getByText('Got It'); fireEvent.click(button); expect(button).not.toBeVisible(); }); });Resultado de la prueba:
PASS stackoverflow/73407176/index.test.tsx (11.549 s) 73407176 ✓ should pass (73 ms) -----------|---------|----------|---------|---------|------------------- File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s -----------|---------|----------|---------|---------|------------------- All files | 100 | 83.33 | 100 | 100 | index.tsx | 100 | 83.33 | 100 | 100 | 8 -----------|---------|----------|---------|---------|------------------- Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 12.167 sTambién verifique esta pregunta: ¿Cuál es la diferencia entre toBeInTheDocument() y toBeVisible()?