Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Potential breaking change with 0.9.10

See original GitHub issue

We have some test failures around AnimateHeight.hideContent(height) call in componentDidMount.

    TypeError: Cannot read property 'style' of null
      
      at AnimateHeight.hideContent (node_modules/react-animate-height/lib/AnimateHeight.js:248:28)
      at AnimateHeight.componentDidMount (node_modules/react-animate-height/lib/AnimateHeight.js:99:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:263:11
      at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
      at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)
      at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:209:25)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:156:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:143:20)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactUpdates.js:97:27)
      at Object.render [as create] (node_modules/react-test-renderer/lib/ReactTestMount.js:128:18)

Here’s a snippet of our current usage of AnimateHeight

<AnimateHeight
  aria-labelledby={headingAriaId}
  duration={300}
  height={isActive ? 'auto' : 0}
  id={regionAriaId}
  role="region"
/>

It looks like hideContent() and showContent rely on style to be present on the contentElement, which may not always be there especially on mount in a headless test setting. Should there be some form wait until the DOM element has a style property before acting on it?

Issue Analytics

State:
Created 6 years ago
Comments:13 (6 by maintainers)

Top GitHub Comments

1reaction

aabenojacommented, Aug 8, 2017

Awesome, everything is green again. The only thing to potentially followup on is documenting the need to polyfill requestAnimationFrame. Thank you for your help.

To answer your question, we’re using react-animate-height in out company’s style guide. Your component has been a great help!

1reaction

aabenojacommented, Aug 8, 2017

The frustrating thing is that this only affects any project feeding this component into the react-test-renderer. Admittedly I can’t think of much better at the moment, though I’m starting to think we don’t need to modify showContent() or hideConent(). Since this only seems to affect the renderer during the mounting process we might be able to get away with the check being only in componentDidMount(). Let me give that a shot locally and report back.