如何测试点击CrossIcon按钮后弹出层是否正常关闭

当前你编写的测试逻辑完全不符合需求，存在3个核心错误：

• 测试覆盖范围错误：你要验证的是「点击CrossIcon→弹出层关闭」的联动逻辑，现有测试只单独渲染了CrossIcon组件，全程没有引入弹出层组件，根本无法校验弹出层的显隐状态
• 组件与测试的属性不匹配：你编写的CrossIcon组件既没有绑定onClick事件到可点击元素上，也没有给元素添加data-testid属性，测试中调用getByTestId('bar-1')会直接抛出找不到元素的错误
• 断言逻辑完全偏差：现有测试断言点击后CrossIcon自身消失，正常业务逻辑中CrossIcon是弹出层的子元素，只有弹出层卸载/隐藏时CrossIcon才会同步消失，断言目标完全错误

第一步：补全CrossIcon组件逻辑 #

先给组件绑定点击事件、添加测试标识：

const CrossIcon = ({ className, onClick, background, isHidden=false }) => {
  if(isHidden) return null
  return (
    <div
      data-testid="cross-icon"
      className={className}
      style={{ background }}
      onClick={onClick}
    >
      {/* 此处替换为你实际的叉号渲染逻辑 */}
      ×
    </div>
  )
}

第二步：重写测试用例 #

需要模拟真实使用场景，将弹出层和CrossIcon一起渲染：

// 引入你项目中实际使用的弹出层组件，示例命名为Modal
import Modal from './Modal'

it('点击CrossIcon后弹出层正常关闭', async () => {
  // 渲染完整场景：弹出层默认打开，内部挂载CrossIcon
  render(
    <Modal defaultOpen data-testid="target-modal">
      <CrossIcon />
    </Modal>
  )

  // 初始状态校验：弹出层、CrossIcon均在DOM中存在
  expect(screen.getByTestId('target-modal')).toBeInTheDocument()
  expect(screen.getByTestId('cross-icon')).toBeInTheDocument()

  // 触发CrossIcon点击事件
  fireEvent.click(screen.getByTestId('cross-icon'))

  // 核心断言：弹出层已消失
  // 如果弹出层是用CSS隐藏而非卸载，替换为 toBeVisible() 断言
  expect(screen.queryByTestId('target-modal')).not.toBeInTheDocument()
})

可选补充：单独校验CrossIcon的回调触发逻辑 #

如果需要单独验证CrossIcon的点击事件能力，可以新增单测：

it('点击CrossIcon时正确触发传入的onClick回调', () => {
  const mockClickHandler = jest.fn()
  render(<CrossIcon onClick={mockClickHandler} />)

  fireEvent.click(screen.getByTestId('cross-icon'))
  expect(mockClickHandler).toHaveBeenCalledTimes(1)
})

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