I try testing this component:

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;

But only obtain fail, this is my test:

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 in getByText. TestingLibraryElementError: Unable to find an element with the text: Comparte en redes sociales!.

This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.