Testing react component - reactjs

Question

I have a simple app where I use an axios to get UserList from the API.
Here is my App component:
import React,{useState,useEffect} from 'react';
import axios from 'axios';
import UserList from './components/Users/UserList';
function App() {
const [users,setUsers] = useState([]);
useEffect(()=>{
axios.get('https://reqres.in/api/users?page=2')
.then(response =>{
setUsers(response.data.data);
console.log(response.data);
})
.catch(error =>{
console.log(error)
})
}, [])
return (
<div>
<UserList users={users} />
</div>
);
}
export default App;
And I have the UserList component:
import React from 'react';
import classes from './UserList.module.css';
import Card from '../UI/Card';
const UserList = (props) => {
return (
<Card className={classes.users}>
<ul data-testid="ultest">
{props.users.map(user => <li key={user.id}>
<img src={user.avatar} alt={user.id}></img>
<div>{user.first_name} {user.last_name}
<p><a href={`mailto:${user.email}`}>{user.email}</a></p>
</div>
</li>)}
</ul>
</Card>
)
}
export default UserList;
I don't understand how to test UserList component. I want to test if it renders correctly but I always get:
TypeError: Cannot read property 'map' of undefined
When I use render.
What is the best way to test this component? Jest or testing library.
Any advice would be appreciated.
import React from 'react';
import { render} from '#testing-library/react';
import UserList from '../components/Users/UserList';
import '#testing-library/jest-dom/extend-expect';
test('to check if it renders', () => {
render (<UserList />)
});

Answer 1

Hey – You need to do it like so:
test('to check if it renders', () => {
render(<UserList users={someUsersDataHere}/>)
});
So your component can have users to map over. You will need to manually define some array of users or import the data from elsewhere if you have it already by any chance
const someUsersDataHere = [
{name: 'SomeName'},
....and so on
]