React-modal: setAppElement throws error in tests

[nickav]

Summary:

When running in test, the lib/helpers/ariaAppHider.js:24 throws:

Error: react-modal: No elements were found for selector #app.

Expected behavior:

Should not throw errors in test.

[diasbruno]

Hi @nickaversano, can you give more information about your issue? Or are you just running your tests and it happen that a react-modal instance is rendered?

[nickav]

yes, running tests and a react-modal instance is being rendered

[diasbruno]

Have you tried to set Modal.setAppElement on you tests?

[nickav]

In order to fix this issue, I did the following in all my components that use react-modal:

if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#app');

[diasbruno]

Great. That's one way.

Another way would be to move the setAppElement() to a file that doesn't go into the tests.

In case your tests really need to set the element, here is an example (but this will depend on the test environment):

ReactModal.setAppElement(document.createElement('div'));
describe("test component that uses modal", () => {
   ...
});

[daru23]

I had the same issue,

Work around of it like this

if (this.props.modalApp) {
            Modal.setAppElement(this.props.modalApp);  //'#app'
}

With same principal. Thanks...

[diasbruno]

@daru23 @nickaversano #668 should fix this on testing environments.

I'll close this for clean up. Reopen this issue if that didn't solve this case.

Thanks!

[brandondurham]

I just ended up dropping this on the modal:

ariaHideApp={ !process.env.NODE_ENV === 'test' }

[iagowp]

@diasbruno I still have the issue, running on 3.6.1.

When you said that it should fix the issue, you meant with no aditional code, right?

[glentakahashi]

I too am having the same issue, #668 didn't fix this for me.

[dndhm]

You can get around this issue by stubbing document.querySelectorAll in your tests:

  beforeEach(() => {
    document.querySelectorAll = () => ["node"];
  });

[ellehamilton]

I got rid of the error in a dumb way.

import * as Modal from 'react-modal';

it('renders without crashing', () => {
    Modal.setAppElement = () => null;
    ReactDOM.render(<Foo />, div);
});

[abhirathore2006]

I got similar error . i am using jest so i decided to follow below solution

Solution:
setup global mock for React Modal and override setAppElement method

//__mocks__/react-modal.js
const Modal = require('react-modal')

const oldFn = Modal.setAppElement
Modal.setAppElement = element => {
  if (element === '#___gatsby') {
   // otherwise it will throw aria warnings.
   return oldFn(document.createElement('div'))
  }
  oldFn(element)
}
module.exports = Modal

[csreyes]

was able to work around the error by setting appElement directly on the modal.

<Modal appElement={document.querySelector('#app')}>

[cis-zeeshan]

Guys, you can just simply set a mock function for this and get out of this. taddaaaa
Just write it before your describe and here you go...

  .spyOn(Modal, "setAppElement")
  .mockImplementation(param => console.log(`setAppElement:'${param}'`));
describe("<Component />", () => {

}

Happy coding!!

[haseeb075]

In order to fix this issue, I did the following in all my components that use react-modal:

```js
if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#app');

Where should I put this line of code