Testing a const

I know this may sound like a silly question but it's really confusing me. I want to know how to test the following code:

const Recipe = ({title,calories,image, ingredients,preparation, url}) => {
    return(
        <div>
            <h1>{title}</h1>
            <ol>
                {ingredients.map(ingredient =>(
                    <li>{ingredient.text}</li>
                ))}
            </ol>
            <p>{calories}</p>
            {/* <p>{preparation}</p>
            <Link to={url}>Recipe</Link> */}
            <img src={image} alt=""/>
            
        </div>
    );
}

So far for my tests, I have the basic ones like:

 test('it renders the title', () => {
        expect(component.find('h1').text()).toContain('Welcome to idealMe');
        })

but I don't think that would work as it is not text inside inside the h1. So if someone could kindly show me how to integrate the title,calories,image etc into the tests that would be amazing!