如何测试按钮成功关闭弹窗？testing-library/react测试失效排查

问题根源 #

你的测试失败主要有三个原因：

1. DOM元素未真正移除：弹窗组件只是通过visibility: hidden和opacity: 0隐藏了容器，按钮依然存在于DOM中，所以expect(button).not.toBeInTheDocument()这个断言永远不会成立。
2. LocalStorage干扰测试：组件初始化时会读取localStorage的值，测试环境中如果没有mock这个存储，可能导致弹窗初始状态不符合预期。
3. 事件模拟不够真实：fireEvent.click只是简单触发点击事件，不如userEvent.click贴近真实用户的交互行为，后者会触发完整的事件流（比如focus、mouseDown等）。

修复步骤 #

1. 替换断言逻辑

不要断言按钮消失，而是检查弹窗容器的可见性状态。可以通过data-testid给弹窗容器标记，然后查询它的样式。

2. Mock LocalStorage

在测试前mock localStorage的getItem和setItem方法，避免测试受外部状态影响。

3. 使用userEvent模拟点击

安装@testing-library/user-event（如果没装的话），用它来模拟用户点击行为。

修改后的测试代码 #

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Popup from './Popup';

// Mock localStorage
beforeEach(() => {
  Storage.prototype.getItem = jest.fn(() => null);
  Storage.prototype.setItem = jest.fn();
});

test("close the popup", async () => {
  const user = userEvent.setup();
  
  render(
    <Popup>
      <div id="content"></div>
    </Popup>
  );

  // 给弹窗overlay添加data-testid="popup-overlay"后用这个查询
  const popupOverlay = screen.getByTestId('popup-overlay');
  // 先确认弹窗初始是可见的
  expect(popupOverlay).toHaveStyle('visibility: visible');

  const button = screen.getByText("Got It");
  await user.click(button);

  // 断言弹窗变为隐藏状态
  expect(popupOverlay).toHaveStyle('visibility: hidden');
});

组件可选优化（可选） #

如果希望弹窗关闭时真正从DOM移除元素，可以修改组件的返回逻辑，当popupActive为false时返回null：

return popupActive ? (
  <div
    style={{
      visibility: "visible",
      opacity: "1",
    }}
    className={popupStyles.overlay}
    data-testid="popup-overlay"
  >
    <div className={popupStyles.popup}>
      <div className={popupStyles.content}>{props.children}</div>
      <button
        data-testid="button-popup"
        className={popupStyles.button}
        onClick={handleX}
      >
        Got It
      </button>
    </div>
  </div>
) : null;

这样修改后，原来的expect(button).not.toBeInTheDocument()断言就能正常工作了。

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