Intento probar este componente:

 import React, { useState } from "react"; import { FaShareAlt, FaAt, FaFacebook, FaInstagram, FaTwitter, FaWhatsapp } from "react-icons/fa"; import ButtonShareModal from "./ButtonShareModal"; import "./ButtonShare.css"; function ButtonShare(props) { const [open, setOpen] = useState(false); return ( <div> {open && (<ButtonShareModal closeShareModal={() => setOpen(false)}> <div className="share-lodging"> <h3 className="share-lodging-title">Comparte en redes sociales!</h3> <div className="share-social-media"> <FaFacebook className="share-social-icon" /> <FaInstagram className="share-social-icon" /> <FaTwitter className="share-social-icon" /> <FaWhatsapp className="share-social-icon" /> <FaAt className="share-social-icon" /> </div> </div> </ButtonShareModal>)} <button className="share" onClick={() => setOpen(true)}> <FaShareAlt className="share-icon" /> </button> </div> ); } export default ButtonShare;

Pero solo obtenga falla, esta es mi prueba:

 import React from 'react' import {render, screen} from '@testing-library/react' import ButtonShare from './ButtonShare' beforeEach(() => render(<ButtonShare />)); test('must display a button share', () => { expect(screen.getByText('Comparte en redes sociales!')).toBeInTheDocument(); })

Error en getByText. TestingLibraryElementError: No se pudo encontrar un elemento con el texto: Comparte en redes sociales!.

Esto podría deberse a que el texto está dividido en varios elementos. En este caso, puede proporcionar una función para que su comparador de texto lo haga más flexible.