Fix flash of tooltip content on DOM using SSR + JSX content

[atomiks]

Fixes #12. Apparently we need to use setState() because of a warning created when using a portal with SSR. All tests are passing, behavior appears to be exactly the same

Reviews?

@KubaJastrz
@elya158

[KubaJastrz]

Sure, I'll review that later on today (max tomorrow), because I'm busy currently.

[KubaJastrz]

At first glance, it looks like it's fine. Do we have any test case scenario to reproduce and check if it is working correctly?

[atomiks]

I used Next.js 7 to test the SSR which is where I found the problem.

We could add that to devDeps and I should also commit the index.js test environment

[atomiks]

I've had to upgrade to Babel 7 to get the environment working...

To reproduce, create a pages directory with index.js containing:

import Tippy from '../src/Tippy'

export default () => (
  <Tippy content={<div>Tooltip</div>}>
    <button>Example</button>
  </Tippy>
)

Then npm run ssr and open localhost:3000

The content should not be rendered on the DOM (view source). Edit the component source to the old version to see the problem.

[atomiks]

I've added this test case which passes for this version and fails for the previous one:

  test('tooltip content is not rendered to the DOM', () => {
    expect(
      ReactDOMServer.renderToString(
        <Tippy content={<div>Tooltip</div>}>
          <button />
        </Tippy>
      ).includes('<div>Tooltip</div>')
    ).toBe(false)
  })

Removed next as it's not necessary after this.

[atomiks]

It appears everything is good to go 💯