React-popper: Node rejection when running a unit test using react-popper with Jest

[RajaBellebon]

Issue description

In Atlaskit, especially in couple of our components, like select, tooltip, we are using react-popper that we wrapped into our own @atlaskit/popper.

The source code can be found here.

The current issue we are facing is when we run unit tests in packages using react-popper, we got some node rejections.

REJECTION TypeError: Cannot read property 'nodeName' of undefined
at isFixed (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:570:26)
at isFixed (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:577:10)
at getBoundaries (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:639:48)
at preventOverflow (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:1863:20)
at /Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:890:14
at Array.forEach (<anonymous>)
at runModifiers (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:877:18)
at Popper.update (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:938:10)
at Popper.update$$1 (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:2506:21)
at /Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:51:7
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)

Reproduction demo

This is a test issue specific to use of react-popper in conjunction with other frameworks and cannot be reproduced in CodePen or Codesandbox alone.

Steps to reproduce the problem

1. Git clone our repo -> git clone [email protected]:atlassian/atlaskit-mk-2.git
2. Run yarn test popper

What is the expected behavior?

Tests are passing without node rejections.

What went wrong?

Tests are passing with some node rejections:

REJECTION TypeError: Cannot read property 'nodeName' of undefined
          at isFixed (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:
570:26)
          at isFixed (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:
577:10)
          at getBoundaries (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:639:48)
          at preventOverflow (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:1863:20)
          at /Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:890:14
          at Array.forEach (<anonymous>)
          at runModifiers (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:877:18)
          at Popper.update (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:938:10)
          at Popper.update$$1 (/Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:2506:21)
          at /Users/rbellebon/atlaskit-mk-2/node_modules/popper.js/dist/umd/popper.js:51:7
          at <anonymous>
          at process._tickCallback (internal/process/next_tick.js:188:7)

Any other comments?

It seems / may come from the use of jest runner...

Packages versions

• react-popper: 1.0.2

[piecyk]

@RajaBellebon best is to mock popper.js in test. Checkout the https://github.com/FezVrasta/popper.js#how-to-use-popperjs-in-jest also have a look at mock and test in this repository

[FezVrasta]

Second what @piecyk said, better to mock Popper.js out, in any case it already ships with an extensive test suite so you don't need to manually test it again. Just test the code that interfaces with it.

[RajaBellebon]

@piecyk , @FezVrasta thanks for the answer, I 'll try and it works!