Jest Snapshots fail with ScrollablePane with error TypeError: Cannot read property '__events__' of null

[sumboxcar182]

Please provide a reproduction of the bug in a codepen:

We would have to expose some of our components here, which i am unfortunately not getting the ok to. I'll see if i can get a reproduction using a mock ScrollablePane soon.

Please see my description of the issue, as i see a way to fix it, so i can just get a pr up for that if need be.

Bug Report

• Package version(s): 6.25.0, 6.84.0
• Browser and OS versions: N/A but we're using react-test-renderer 16.3.2 if that helps

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) : If the fix is as simple as i mention i can get a pr up shortly.

Requested priority: (Blocking, High, Normal, Low): Normal (we're commenting out those jest tests for now)

Products/sites affected: (if applicable): N/A

Describe the issue:

This issue is only happening with a ScrollablePane that is rendered using react-test-renderer. When doing a test there, we are getting a TypeError in EventGroup.js line 136, with an error message of

TypeError: Cannot read property '__events__' of null

The line number above corresponds to line 209 in the typescript version of that file.

I've tested a fix locally, but was a little hesitant to open a pr due to possible side effect issues that i might not be aware of. The fix is to simply check if the target is null before trying to access the events object. When making that fix it does remove that typeerror, and our unit tests then pass. If that does sound like a good idea i can go ahead and get a PR up shortly, but i figured i'd open an issue before doing that.

Actual behavior:

It is crashing before the test can be completed.

Expected behavior:

When running a unit test in jest through react-test-renderer that uses a ScrollablePane, the test will pass successfully.

[dzearing]

The problem is that target is null or undefined, and just checking for null would actually hide the root issue.

The better fix here is to look at why target is null. In this case, I see that componentDidMount calls this:

    this._events.on(this.contentContainer, 'scroll', this._onScroll);
    this._events.on(window, 'resize', this._onWindowResize);

So my guess is that 1. your test is actually mounting the component, calling this code, and that window is undefined. Let me try and debug through and see if that's the case.

[dzearing]

I got it reproing, and this._contentContainer.current ref is null!

So that's weird. Why would the ref be null?

Debugging more.

[dzearing]

jestjs/jest#5462

ref is not supported by react-test-renderer. Can you use enzyme?

[dzearing]

Ah ha, here's the workaround:

    const component = renderer.create(<ScrollablePane />, {
      createNodeMock: element => ({})
    });

https://reactjs.org/docs/test-renderer.html#ideas

It would be better to just use this in your test to allow react-test-renderer to create refs. The exception is occurring because the code assumes after mount the refs have been resolved, which is totally reasonable.

[sumboxcar182]

I'm a little late to reply here, but i cannot thank you enough for all the help for this issue! This will definitely be the way to go for our unit tests!

Thanks again!