I have a component that uses async and await.

I am trying to test whether the placeholder for the input renders.

However, I always get the above error.

This is component:

const [Loading, setLoading] = useState(false)
const [name, setName] = useState('');
const [options, setOptions] = useState([])
const [data, setData] = useState(false)

useEffect(() => {
  setLoading(true)
  const newUsers = async() => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
      });

  };
  newUsers();
}, [])

if (!data) return <p className = 'text-center font-bold text-6xl' > Loading... < /p>
if (!Loading) return <p className = 'text-center font-bold text-6xl' > Data loaded < /p>

<input id = "input"
className = 'w-96  h-16 border-1 shadow-lg rounded-lg'
placeholder = "Search..."

onChange = {
  e => handleChange(e.target.value)
}
value = {
  name
}
/>
   

This is the test

test('input appears', async () => {
    await waitFor(() => {
        expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
      })
})