** Unable to find an element by: [data-testid="reload-button"]**
Facing issues when testing a create-react-app using RTL.
I've a simple react project wherein I'm making a call over the internet to display a list of users. While writing a testcase for the same, I'm trying to mock a fetch call and provide dummy data as well so that my app doesn't increase load on the server.
But I'm facing issues in this.
I get an error saying:
`Unable to find an element by: [data-testid="reload-button"]
Ignored nodes: comments, script, style
<body>
<div />
</body>
15 | render(<Body />)
16 |
> 17 | await waitFor(()=>expect(screen.getByTestId("reload-button")))
| ^
18 | const usersArray = screen.getAllByTestId("users-list")
19 | expect(usersArray.length).toBe(5)
20 | })
at waitForWrapper (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:166:27)
at Object.<anonymous> (src/components/__tests___/Body.test.js:17:18)`
My code is as follows:
The component where an api call is made, using which the state is changed and data is passed on to the as props
//Body.js
const Body = () => {
const [ users, setUsers ] = useState([])
const [ reloadUsers , setReloadUsers] = useState(false)
useEffect(() =>{
fetchUsers()
},[reloadUsers])
const fetchUsers = async () => {
const data = await fetch(`https://randomuser.me/api/?results=5`)
const jsonData = await data.json()
setUsers(jsonData?.results)
}
if(!users)return null
return users.length===0 ? <p>Loading...</p> : (
<div>
<button
data-testid='reload-button'
onClick={()=> setReloadUsers(prev => !prev) } >
Load different users
</button>
<UserList users={users} />
</div>
)
}
The component receiveing the data as props and then mapping over it to display the data
//UserList.js
const UserList = ({users}) => {
const displayList = users.map(user=>(
<li data-testid="users-list"
style={{'display' : 'flex' , 'alignItems' : 'center' , 'margin' : '20px'}}
key={user?.login?.uuid}
>
<img
style={{'borderRadius':'30px' , 'marginRight' : '20px'}}
src={user?.picture?.thumbnail} alt='thumbnail' />
<span>{user?.name?.first} {user?.name?.last} </span>
</li>
))
return (
<div>
<h5>UserList</h5>
<ul style={{ 'listStyleType' : 'none' }} >
{displayList}
</ul>
</div>
)
}
My test file is as follows where I'm testing if the mock data is getting populated
//Body.test.js
import { render, screen, waitFor } from "@testing-library/react"
import Body from "../Body"
import { usersList } from "../utils/constants";
test('user list should appear on screen', async ()=>{
global.fetch = jest.fn(()=>{
return Promise.resolve({
json : () => {
return Promise.resolve(usersList)
}
})
})
render(<Body />)
await waitFor(()=>expect(screen.getByTestId("reload-button")))
const usersArray = screen.getAllByTestId("users-list")
expect(usersArray.length).toBe(5)
})
What is the mistake that I'm doing?
