React主题切换组件单元测试失败：无法定位Sun图标

失败原因 #

测试代码中点击的是带有role="button"的父<div>，但主题切换的onClick事件实际绑定在子元素图标组件（BsMoonStarsFill/BsSunFill）上，父div没有处理点击事件的逻辑。当你用fireEvent.click(themeToggle)点击父div时，并不会触发子图标上的点击事件，导致theme状态未更新，太阳图标始终不会渲染，测试自然失败。

另外，fireEvent是模拟底层DOM事件，和真实用户点击行为有差异，它不会自动触发子元素的事件处理函数（除非点击区域精准覆盖子元素，但测试中直接点击父div的逻辑不符合真实交互逻辑）。

解决方案 #

方案1：直接点击图标元素（最快修复测试） #

既然点击事件绑定在图标上，测试里直接获取图标元素并点击即可：

test('toggles the theme', () => {
  render(<Header />)

  const moonIcon = screen.getByLabelText('Moon')
  expect(moonIcon).toBeInTheDocument()

  // 直接点击月亮图标触发切换
  fireEvent.click(moonIcon)

  const sunIcon = screen.getByLabelText('Sun')
  expect(sunIcon).toBeInTheDocument()
})

方案2：将点击事件移到父div（更符合语义与用户体验） #

从产品逻辑看，用户点击整个按钮区域（父div）都应该触发主题切换，所以把onClick事件移到父div上，同时保留图标的aria-label用于语义化：

const Header = () => {
  const [theme, setTheme] = React.useState<string>('light')

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light'
    setTheme(newTheme)
    document.body.classList.toggle('dark')
  }

  return (
    <header className="py-6 flex justify-between">
      <div className="flex flex-row gap-8">
        <div
          className="w-[2.5em] hover:cursor-pointer"
          role="button"
          aria-label="Theme Toggle"
          onClick={toggleTheme} // 点击事件移到父div
        >
          {theme === 'light' ? (
            <BsMoonStarsFill
              size={26}
              aria-label="Moon"
            />
          ) : (
            <BsSunFill
              size={32}
              aria-label="Sun"
            />
          )}
        </div>
      </div>
    </header>
  )
}

此时原测试代码无需修改就能通过，因为点击父div会直接触发切换逻辑。

方案3：使用user-event替代fireEvent（更贴近真实用户行为） #

@testing-library/user-event模拟真实用户的交互行为，比fireEvent更准确，能自动处理事件冒泡等场景：
首先安装依赖（如果未安装）：

npm install --save-dev @testing-library/user-event

然后修改测试代码：

import userEvent from '@testing-library/user-event'

test('toggles the theme', async () => {
  const user = userEvent.setup()
  render(<Header />)

  const themeToggle = screen.getByRole('button', { name: 'Theme Toggle' })
  const moonIcon = screen.getByLabelText('Moon')

  expect(moonIcon).toBeInTheDocument()

  await user.click(themeToggle) // 使用user-event的click方法

  const sunIcon = screen.getByLabelText('Sun')
  expect(sunIcon).toBeInTheDocument()
})

这个方案不需要修改组件代码即可让测试通过，但推荐优先选择方案2，因为它优化了组件的交互逻辑，更符合用户预期。

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