使用反应测试库测试元素消失失败答案

【问题标题】：Testing for disappearance of element using react testing library fails使用反应测试库测试元素消失失败
【发布时间】：2022-01-10 17:09:42
【问题描述】：

当用户单击对话框上的“取消”按钮时，我正在尝试使用以下测试测试对话框消失：

it("clicking on cancel hides the confirmation dialog", async() => {
    render(<ConfirmationDialog />);
    const cancelButton = screen.getByText("Cancel");
    fireEvent.click(cancelButton);
    await waitForElementToBeRemoved(() => screen.queryByText(/Cancel/i));
    expect(screen.queryByText(/Cancel/i)).toBeNull();
  });

但是上面的代码抛出了一个错误： TypeError: MutationObserver 不是构造函数

  24 |     const cancelButton = screen.getByText("Cancel");
  25 |     fireEvent.click(cancelButton);
> 26 |     await waitForElementToBeRemoved(() => screen.queryByText(/Cancel/i));
     |           ^
  27 |     expect(screen.queryByText(/Cancel/i)).toBeNull();
  28 |   });
  29 | });

有人可以帮我理解这个问题，因为我是测试库的新手。提前致谢。

【问题讨论】：

你会开玩笑吗？（确保安装了所有最新版本）
@true_gler 是的，我所有的 React 测试都在使用 Jest + react 测试库

标签： jestjs react-testing-library react-testing

【解决方案1】：

您需要在测试中模拟 MutationObserver：

将@sheerun/mutationobserver-shim 包添加到您的项目中
在 setupTests.js（或other Jest configuration file）中，添加以下代码：

import MutationObserver from '@sheerun/mutationobserver-shim';
window.MutationObserver = MutationObserver;

您的 UI 框架当然依赖它。

可能还有其他方法可以模拟MutationObserver，这就是我的做法，但它可能不是最好的方法。

【讨论】：

【解决方案2】：

试试这个：https://github.com/testing-library/dom-testing-library/issues/477

npm install jest-environment-jsdom-sixteen

或

yarn add -D jest-environment-jsdom-sixteen

然后通过 env cli param 设置它

 "scripts": {
        ...
       "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
       ...
    }

【讨论】：