Cannot read property 'clientHeight' of null

[ghost]

In development and/or production, ScrollAnimation works as expected, however, when I was running a component test on a component that contained ScrollAnimation, I got an error

console.warn node_modules/react-animate-on-scroll/dist/scrollAnimation.min.js:142
    Cannot find element by locator: undefined
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6820
    The above error occurred in the <ScrollAnimation> component:
        in ScrollAnimation (at Hero.jsx:103)

TypeError: Cannot read property 'clientHeight' of null

      at ScrollAnimation.getVisibility (node_modules/react-animate-on-scroll/dist/scrollAnimation.min.js:127:50)
      at ScrollAnimation.handleScroll (node_modules/react-animate-on-scroll/dist/scrollAnimation.min.js:229:31)
      at ScrollAnimation.componentDidMount (node_modules/react-animate-on-scroll/dist/scrollAnimation.min.js:145:16)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6955:22)
      at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8164:7)
      at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2193:10)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2363:31)
      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8334:7)
      at completeRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9699:3)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9627:9)

This is the content (summarized) of the Hero.jsx file

export default class Hero extends React.Component {
        render() {
        return (
            <section className="hero" style={{ backgroundImage }}>
                <div className="grid pad-grid">
                    <h1>{translate(locale, this.keys.HEADER)}</h1>
                    <p className="subheader">{translate(locale, this.keys.SUBHEADER)}</p>

                    <a href={bg.path} className="image-author">
                        <i className="fa fa-camera" />
                        <span>{bg.person}</span>
                    </a>

                    <ScrollAnimation animateIn="fadeInLeft" duration={0.2} animateOnce>
                        {this.renderSubForm()}
                    </ScrollAnimation>
                </div>
            </section>
        )
    }
}

Can anyone help out on how to resolve this error

[dbramwell]

Hi,

Is this some kind of automated test? I'm guessing it's something to do with running in something other than a real browser.

The error seems to come from accessing this.node.clientHeight. Interestingly you're also getting the warning from here, which means that either window is set to something falsy (but not undefined as we check for that) or window.addEventListener is something falsy.

We might be able to catch this by checking if window is falsy in line 9 rather than just checking for undefined.

Would you be able to edit the file "node_modules/react-animate-on-scroll/dist/scrollAnimation.min.js" at line 36, changing: this.serverSide = typeof window === "undefined"; for this.serverSide = !window;

and try running your test again?

[ghost]

Hello @dbramwell , Thank you for the response. And sorry for the delay. It worked as stated, both in the test environment and the actual environment