Testing for disappearance of element using react testing library fails

Question

I am trying to test disappearance of dialog box when user clicks "cancel" button on my dialog box using the following test:

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();
  });

But the above code throws an error : TypeError: MutationObserver is not a constructor

  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 | });

Can someone help me understanding this issue as I am new to testing library. Thanks in advance.

Answer 1

You need to mock MutationObserver in your test :

• Add @sheerun/mutationobserver-shim package to your project
• in setupTests.js (or other Jest configuration file), add the following code :

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

Your UI framework certainly depends on it.

There may be other way to mock MutationObserver, this is how I do it but it may not be the best way.

Answer 2

Try this according to: https://github.com/testing-library/dom-testing-library/issues/477

npm install jest-environment-jsdom-sixteen

or

yarn add -D jest-environment-jsdom-sixteen

and then set it via env cli param

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