React-modal: Jest snapshot test: TypeError: Cannot read property 'monitorScrollValue' of null

[dbertella]

Summary:

I'm trying to make a snapshot test with jest and I got this error: TypeError: Cannot read property 'monitorScrollValue' of null and the test fail without making any snapshot

Steps to reproduce:

1. make a snapshot test following jest tutorial, on a component with a modal in it
   

   Expected behavior:

Snapshot is created

Additional notes:

I'm using create react app.

[albertolive]

I'm having the same issue with this code:

const component = ReactTestUtils.renderIntoDocument(<InscriptionMultiChatPopup
    show={true}
    inscriptions={inscriptionsMock}
    selectedInscriptions={selectedInscriptionsMock} />),
  node = ReactTestUtils.findRenderedDOMComponentWithClass(component, 'modal');

onClickMock = props => {
  console.log(props);
};

ReactTestUtils.Simulate.click(node);
expect(clickSpy).toHaveBeenCalled();

[diasbruno]

@dbertella @albertolive did you find a way to solve this?

[albertolive]

I ended up using Jest with enzyme.

[brandondurham]

@albertolive — Any details on what worked for you? Having trouble even finding the modal after triggering it.

[dbertella]

I'm not sure what worked for me I think I just moked the library jest.mock('react-modal', () => 'Modal');. If you use shallow render from enzyme you don't need to mock the library manually so I guess it's a better choice.

I'm sorry it was an old project that I don't have access anymore but if I can help you in some other way just let me know

[indiesquidge]

@brandondurham, if you are using Enzyme, you should be able to get access to the modal with the following

const wrapper = shallow(
  <Modal contentLabel='Example Modal' isOpen />
)

Note: the isOpen prop must be passed in for the modal to be opened on the page. (The contentLabel prop is a required prop.)

If you are attempting to access the Modal's contents or test something that happens in a lifecycle method, trying using the mount render function instead of shallow. (Check out this comment for a better understanding of when to use each renderer.)

If you are still having issues, feel free to post more details about what you are trying to test :)

[indiesquidge]

@diasbruno, the issue of the <ReactModal> component rendering null is still unresolved when attempting to create a snapshot test.

Tl;dr

_How does one create a Jest snapshot test for ReactModal?_
_The rendered output always seems to be null._

More Info

Unfortunately, I can't create a simple JSBin or Codepen since I can't seem to figure out how to include/access Jest or react-test-renderer in a script tag, but I did create a very simple example using Create React App.

You can see here that the rendered output of the snapshot is null. I assume this is because the render method of the exported Modal component returns null.

I don't have any issue accessing the Modal with tests using Enzyme (and would love to help create example tests using Jest and Enzyme), but the Modal component returning null does pose issues for snapshot testing.

[indiesquidge]

The more I think about it, the more I'm realizing that a snapshot test on my end may sound like a strange thing to do.

My use case for ReactModal may be a bit different than others in that I it is acting as somewhat of a "private component" in my codebase; I wrap it in my own Modal component

const Modal = ({ children, ...restProps }) =>
  <ReactModal
    className='...custom UI styles'
    overlayClassName='...custom UI styles'
    bodyOpenClassName='...custom UI styles'
    {...restProps}
  >
    <div className='...custom UI styles'>
      <button
        aria-label='close'
        className='...custom UI styles'
        onClick={restProps.onRequestClose}
      >
        <Icon icon='close' size={24} className='white' />
      </button>
      {children}
    </div>
  </ReactModal>

The reason I do this is to include certain UI styles and a close button that is specific to my app's design. This way my team can use the Modal component I have created here while still being able to use the API created and documented by ReactModal.

So I wanted to create a snapshot test for this so that when a style or something changed (which would affect every modal in my app) the snapshot would "break" and need updating. However, this doesn't seem possible with the current setup of ReactModal rendering null.

So perhaps it is not possible to create a snapshot test for ReactModal as it stands now.

[diasbruno]

@indiesquidge Thanks for the info.

The Modal render method returns null. Maybe the component is not mounted correctly when the snapshot is taken.

[indiesquidge]

Maybe the component is not mounted correctly when the snapshot is taken.

@diasbruno, I'm not sure I understand. Isn't null the expected return value? To me it seems like creating a snapshot test of ReactModal is not possible, but I could be mistaken.

[diasbruno]

This one is tricky...if we are talking about the class, it's correct. If we are talking about the actual modal tree, it is not.

Since the modal is mounted where parentSelector={...} returns, you can't get a snapshot of it.
See PR #440. It should make it easy to test.

[albertolive]

This is what I did:

jest.mock('react-modal', () => {
  return ({ children }) => {
    return (
      <div className="modal">{children}</div>
    );
  };
});

Also I could include one onClick and trigger it with enzyme like this:

wrapper.find('modal').simulate('click');

[GunaSekhar1]

How to solve this

TypeError: Cannot read property 'create' of undefined

  at Object.<anonymous> (node_modules/react-native-vector-icons/lib/icon-button.js:29:1596)
  at Object.<anonymous> (node_modules/react-native-vector-icons/lib/create-icon-set.js:21:233)
  at Object.<anonymous> (node_modules/react-native-vector-icons/MaterialIcons.js:6:20)