Can I test a function mapping data into a child component using Jest and Enzyme

I am making an API call which returns an array of objects. I am then mapping these objects onto a child component. My idea for how to test this would be to mock the API call using Jest and test to see if the number of child components rendered is equal to the number of objects. I'm not actually sure I need to mock the API call and think it may be simpler to just declare an array and use that.

Here is an example of the array I would be using for my API call return.

let organizationRoles = [
    {name : "2nd Project Manager", assigned : false}, 
    {name : "Executive Sponser", assigned: false}, 
    {name : "CFO or Finance Contact", assigned: false},
    {name : "OI&T Contact", assigned: false},
    {name : "Payroll Contact", assigned: false},
    {name : "HR Contact", assigned: false}
]

and here is the test I am trying to run.

it('renders the appropriate number of cards', () => {
    const wrapper = mount(<AssignRoles />);
    const cardHolder = wrapper.find('#assign-roles-roles-page');
    expect(cardHolder.children()).toHaveLength(organizationRoles.length)
})

My main issue is I haven't figured out where to inject the array.

Here is the code I want to test from my AssignRoles component.

<div className={styles.rolesPage} id="assign-roles-roles-page">
   {organizationRoles.map((roles, key)=> {
       return(<AssignRolesCard name={roles.name} assignee={roles.assignee} id={key} handleFormOpen={handleFormOpen}/>)
   })}
</div>

I am still fairly new to Jest testing and want to understand how to better use mocks in my testing.