Trying to carry out a simple unit test, but it is failing, and expecting a different result

I am writing tests for a component that will render on one of my pages. Most of the html elements contain keys. The code is:

const Recipe = ({ title, image, calories, ingredients, preparation, url }) => {
  return (
    <div>
      <h1>{title}</h1>
      <img src={image} alt="pic of recipe" />
      <ol>
        {ingredients.map((ingredient) => (
          <li>{ingredient.text}</li>
        ))}
      </ol>
      <p>Calories: {calories}</p>
      {/* <p>{preparation}</p> */}
      <a href={url}> Hungry? Go to the recipe</a>
    </div>
  );
};

I have 7 tests, 6 of which pass, they are very simple, but one line is bringing down the coverage because it states my tests are not covering the line.

I have the following test:

test('renders a list', () => {
        expect(component.find('li')).toHaveLength(1);
    })

this is merely testing the piece of code:

<li>{ingredient.text}</li>

When npm test is run, the test fails because it is expecting a length of 1, but is receiving 0. enter image description here above is a picture of the error. Why am I getting this error? Does it have something to do with the keys inside the list tag?