Tooltip cannot find ID of a React element rendered next to it

Issue description

• components: Tooltip
• reactstrap version 5.0.0-alpha.4
• import method umd, not full version
• react version 16.2.0
• bootstrap version 4.0.0-beta.3

What is happening?

Sometimes, when I render the attached code, I get this error: The target <target id> could not be identified in the dom, tip: check spelling. However, I can’t get the codepen to reproduce this, but it consistently happens in my larger application base, which uses the same data flow. The bug occurs when the button in the codepen is pressed, but perhaps React functions differently in my case. I made a small change in the codepen, the bug is now reproduceable.

The full application is here: https://github.com/kenzierocks/OurTube/blob/master/client/js/navbar.tsx#L78

I can help set this up to run if needed, but it’s still in the middle of initial development

What should be happening?

It should render my custom tooltip properly, with no errors.

Code

https://codepen.io/anon/pen/xpWJzN

[TheSharpieOne]

@yidingalan enzyme’s mount takes a second parameter; options. Options has a property, attachTo which is used to tell it where to mount the component. It’s not enough to add a div to the body, you have to then tell it to mount the component to that div.

it('test', () => {
  const div = document.createElement('div');
  document.body.appendChild(div);
  const wrapper = mount(<Component {...props} />, { attachTo: div });
});

More information about mount and it’s options: https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md#mountnode-options--reactwrapper

[Cretezy]

I was having this issue in my tests, which originally was:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

describe("App", () => {
	test("renders without crashing", () => {
		const div = document.createElement("div");
		ReactDOM.render(<App />, div);
	});
});

This would give the error discussed.

To solve it (at least for my tests), I had to add the div to the body, since the tooltip tries to query the document. This was the fix:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

describe("App", () => {
	test("renders without crashing", () => {
		const div = document.createElement("div");
		document.body.appendChild(div);
		ReactDOM.render(<App />, div);
	});
});

I hope this can bring any insights to what you are experiencing.