找不到占位符文本为“Search…”reactjs-jest的元素

我有一个使用 async 和 await 。

我正在尝试测试输入的占位符是否呈现。

然而,我总是会犯以上错误。

这是组件:

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
}
/>
   

这是测试

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