元素已从文档中删除，但 jest 仍然找到它

Question

我已经围绕 react-toastify 构建了一个包装器，以便我可以在多个地方调用它。

这是包装器的代码：

import { ReactText } from 'react';
import { toast } from 'react-toastify';

export const showNotification: (
  message: string,
  type?: 'info' | 'success' | 'warning' | 'error',
  timeOut?: number,
) => ReactText
  = (message, type = 'success', timeOut = 5000) => toast(
      message, { type, autoClose: timeOut },
    );

export const dismissNotification = (toastId: ReactText) => toast.dismiss(toastId);

现在，我正在测试我的dismissNotification 函数。

我已经写了这个测试用例：

it('dismisses notification when called', async () => {
  render(<ToastContainer />);
  const notificationId = showNotification('Test Notification', 'success', 2000);
  await waitFor(() => {
    expect(screen.getByText('Test Notification')).toBeInTheDocument();
  });
  dismissNotification(notificationId);
  await waitForElementToBeRemoved(() => {
    expect(screen.queryByText('Test Notification')).not.toBeInTheDocument();
  });
});

但最后一个测试用例总是失败，说存在带有文本 Test Notification 的 dom 节点。

实际错误：

dismisses notification when called

    expect(element).not.toBeInTheDocument()

    expected document not to contain element, found <div class="Toastify__toast-body" role="alert">Test Notification</div> instead

Answer 1

您似乎错误地使用了waitForElementToBeRemoved。根据the documentation，“第一个参数必须是元素、元素数组或返回元素或元素数组的回调。”

此外，您似乎遇到了一些超时问题。似乎动画导致元素在 DOM 中停留的时间比您预期的要长。您可以执行两个快速测试来确认这是一个问题。

首先，检查浏览器中的 DOM。当您关闭通知时，您可以看到该元素并未立即删除。

其次，尝试设置custom transition，以便我们可以调整持续时间。当您将collapseDuration 设置为5000 时，toast 需要很长时间才能消失，并且测试失败。当您将collapseDuration 设置为0 时，toast 立即消失，测试通过。

const Zoom = cssTransition({
  enter: 'zoomIn',
  exit: 'zoomOut',
  collapseDuration: 0,
  //duration: 5000,
});

toast(message, {
  type,
  autoClose: timeOut,
  transition: Zoom,
});

所以我认为您需要修复您使用waitForElementToBeRemoved 的方式并应用自定义timeout。试试这个代码：

await waitForElementToBeRemoved(screen.queryByText('Test Notification'), { timeout: 5000 });