The tooltip component fail test with jest snapshots

[aiaisl]

Bug report

• Package version(s): @blueprintjs/core 1.12.0, jest v18.1.0

Steps to reproduce

1. This is some sample code
   RefreshButton.tsx

import { Tooltip } from '@blueprintjs/core';
import * as React from 'react';

export class TestTooltipWithJest extends React.Component<{}, {}> {
    render() {
        return (
            <Tooltip
                className="pt-tooltip-indicator refresh-icon"
                content={<em>Test.</em>}
            >
                Test
            </Tooltip>
        )
    }
}

RefreshButtonTest.tsx

import { TestTooltipWithJest } from '../RefreshButton';
import * as React from "react";
import * as renderer from 'react-test-renderer';
test("Test tooltip with jest", ()=>{
    const component = renderer.create(
        <TestTooltipWithJest />
    )

    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
})

Actual behavior

FAIL  src/AdAccount/__tests__/RefreshButtonTest.tsx
  ● Test tooltip with jest

    TypeError: Cannot read property 'clientHeight' of null

      at Popover.Object.<anonymous>.Popover.componentDOMChange (node_modules/@blueprintjs/core/dist/components/popover/popover.js:232:49)
      at Popover.Object.<anonymous>.Popover.componentDidMount (node_modules/@blueprintjs/core/dist/components/popover/popover.js:174:14)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264: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:206:25)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:140: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 (node_modules/react-test-renderer/lib/ReactTestMount.js:125:18)
      at Object.<anonymous> (src/AdAccount/__tests__/RefreshButtonTest.tsx:7:30)
      at process._tickCallback (internal/process/next_tick.js:103:7)

Expected behavior

Just work

[camilosad]

Having the same issue when trying to test a component that includes Popover from blueprint

[giladgray]

we don't use jest ourselves (yet--desperately want to) but there are known issues with using Blueprint components outside a real browser (particularly with jsdom #397)

[giladgray]

i was just playing with jesting in blueprint and ran up against this almost immediately, as expected: enzymejs/enzyme#252 (Support Portal components). good news is seems Fiber will solve all our problems as it includes support for portals.

[adidahiya]

Fiber will solve all our problems as it includes support for portals

do you have a link to a facebook github issue or docs that verify this?

[giladgray]

Here's a start: facebook/react#8532

There seems to be a new React.unstable_createPortal API!

[mrshll]

@giladgray hey! I'm pretty certain we were both in some of @mchow01's classes :)

We just started using blueprint in https://upstream.tech and when adding some jest tests ran into this issue as well. Have y'all found any resolution?

[adidahiya]

@mmoutenot are your steps to repro the same as the original issue? Are your tests failing specifically when using snapshots?

[mrshll]

@adidahiya yes, an identical test setup with snapshots.

[michaeledryan]

I think this is fixed by #1644 - I updated to 1.31 and my tests no longer complain.

[vishnutechjini]

If you are using jest, Please mock the module in the snapshot test file.
eg: jest.mock('@material-ui/core/Tooltip')

Note: Tooltip material ui path may differ, change accordingly.