React Testing Library触发FireEvent.click后screen未更新，查看更多功能测试失败

核心问题根因 #

你遇到的测试不通过问题，本质是业务代码里的列表拼接逻辑存在错误，导致第二页数据无法正常渲染：

1. 博客列表拼接错误 #

当前代码加载第二页内容时，直接把返回的博客数组作为单个元素插入原有列表，导致blogPosts变成二维数组，第二页内容无法被正常遍历渲染：
原错误代码：

if (blogPosts.length !== 0) {
  // 这里response本身是数组，直接插入会让blogPosts变成二维结构
  setBlogPosts([...blogPosts, response]);
}

修复方案：
将返回的response也做展开处理，更建议使用状态的函数式更新写法，避免闭包捕获旧状态的问题，同时可以移除不合理的eslint忽略注释：

fetchApi(options).then((response) => {
  if (response?.length > 0) {
    // 函数式更新不需要依赖blogPosts，自动获取最新状态
    setBlogPosts(prev => [...prev, ...response])
  } else {
    setShouldFetchMoreBlogs(false);
  }
});

测试用例修正 #

1. 按钮文本匹配修正 #

业务代码里的按钮实际文本是Veja Mais，你测试中使用的/See More/i无法匹配对应元素，需要调整匹配规则：

const seeMoreButton = await screen.findByRole('button', {
  name: /Veja Mais/i,
});

2. 断言逻辑修正 #

你测试中出现的/NaN de undefined de NaN/是模拟数据缺少BlogPreview组件依赖的字段导致的，建议两种处理方式：

• 补全generateBlogs生成的模拟数据，填充BlogPreview需要的日期等字段
• 调整断言逻辑，直接统计博客项的数量，比如给BlogPreview加上data-testid="blog-preview"属性后断言：

await waitFor(() => expect(screen.getAllByTestId('blog-preview')).toHaveLength(22))

可选优化建议 #

你当前判断是否展示「查看更多」按钮的逻辑blogPosts?.length % 12 === 0存在边缘问题：如果后端最后一页刚好返回12条数据，按钮会被错误展示。建议改用response.length < pageSize判断是否还有更多数据，准确性更高。

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