React测试时无法找到data-testid为movieList的元素该如何解决？

报错原因分析 #

data-testid="movieList" 对应的ul元素仅在 isLoaded === true 且 items.length > 0 两个条件同时满足时才会渲染，其余场景下该元素不存在。
你的测试用例校验的是App刚渲染的初始状态，此时两个触发条件都不满足：

• 初始状态下数据请求尚未完成，isLoaded 默认值为false，只会渲染data-testid="no-result"的加载占位元素
• 即使你默认把isLoaded设为true，初始状态下items是空数组，也只会渲染「No Results Found」提示，不会渲染ul
  getByTestId 方法找不到元素时会直接抛出错误，因此出现你遇到的报错。

解决方案 #

根据你的测试目的选择对应修改方案：

方案1：校验初始状态下不存在movieList元素 #

把断言语句修改为用queryByTestId查询，queryBy系列方法找不到元素时会返回null，适配判断元素不存在的场景：

// 把原来的expect(screen.getByTestId('movieList').childNodes).toHaveLength(0)替换为下面的语句
expect(queryByTestId('movieList')).toBeNull()

同时注意初始加载状态下no-result元素是存在的，你的原有断言expect(queryByTestId('no-result')).toBe(null)不符合逻辑，需要修改为：

expect(getByTestId('no-result')).toBeInTheDocument()

方案2：校验数据加载完成后movieList的渲染逻辑 #

需要先Mock接口返回数据，触发搜索操作后等待元素渲染再做断言，示例代码：

test('movie list renders correctly after data loaded', async () => {
  // 替换成你的实际请求接口地址，Mock返回测试数据
  fetchMock.get('你的请求接口', {
    items: [{id: 1, Title: '测试电影1'}, {id: 2, Title: '测试电影2'}]
  })
  renderApp()
  // 模拟用户输入、点击搜索按钮的操作
  fireEvent.change(screen.getByTestId('app-input'), {target: {value: '测试关键词'}})
  fireEvent.click(screen.getByTestId('submit-button'))
  // 用findBy异步等待movieList元素渲染完成
  const movieList = await screen.findByTestId('movieList')
  expect(movieList.childNodes).toHaveLength(2)
})

内容的提问来源于stack exchange，提问作者Namazzi mercy