使用MSW测试React-query时无法找到接收父组件数据的子组件测试元素

核心错误点 #

• 请求地址不匹配：你父组件中axios.get(xxxxxxx})的请求地址多了一个冗余的右大括号，且和MSW handler中配置的https://xxxxxxxx完全不一致，导致MSW无法拦截请求，请求一直处于pending状态，组件永远停留在loading阶段，自然找不到目标元素。
• data-testid绑定无效：你将data-testid属性加在了自定义组件ChildComponent上，React默认不会将这类属性透传到子组件渲染的DOM节点上，测试库无法识别对应元素。
• 数据逻辑断层：useQuery请求拿到的result数据没有同步到本地的fetchData状态中，就算请求成功，传递给子组件的永远是初始空数组。
• 超时风险：你在请求函数中手动加了1秒的延迟，而findByTestId默认超时时间为1000ms，极易触发超时失败。
• 组件引用错误：测试代码中渲染的是<Component />，但实际导出的父组件名为Component1，属于笔误。

修正方案 #

1. 修正请求地址：将axios.get的参数调整为和MSW handler中完全一致的地址，删除多余的右大括号，确保域名、路径完全匹配。
2. 修复data-testid：要么将data-testid移到父组件的<div className="row dashboard">DOM元素上，要么在ChildComponent内部将接收的data-testid props显式挂载到内部的根DOM节点上。
3. 同步数据：新增useEffect监听result变化，请求成功后更新本地状态：

useEffect(() => {
  if (result) setFetchData(result)
}, [result])

或者直接把result传递给ChildComponent，无需额外维护本地状态。
4. 调整超时配置：查询时延长超时时间，比如await screen.findByTestId('test-data', { timeout: 3000 })，或者删除请求函数中不必要的setTimeout延迟。
5. 修正组件引用：测试代码中渲染的组件改为<Component1 />，和实际导出组件名保持一致。
6. 额外优化：将queryClient的实例化放到每个测试用例内部，避免多个测试用例共享实例导致缓存互相干扰。

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