can't find() element but wrapper.contains() it

Current behavior

I cannot find(Component|".selector") but I can see it via html() and via .contains()

Here are the most important parts of code. (I am using ava, t.log is the test logger)

I am using a styled component here but it is the same when I add a custom className, id or data-attribute to attempt finding the element/Component.

code

const RetryButtonId = RetryButton.styledComponentId;
const retrySelector = `.${RetryButtonId}`;

t.log(retrySelector);
const retry = wrapper.find(RetryButton);
const _retry = wrapper.find(retrySelector);
const html = wrapper.html();
const match = html.match(new RegExp(`<button class="${RetryButtonId}.*?">Retry</button>`));
t.log(`match: ${match && match[0]}`);
t.log(`length "${retrySelector}": ${_retry.length}`);
t.log(`length "RetryButton": ${retry.length}`);
t.log(`exists "${retrySelector}": ${wrapper.exists(retrySelector)}`);
t.log(`contains "RetryButton": ${wrapper.contains(RetryButton)}`);

The logs show inconsistencies. While contains() returns true, exists() returns false.

The html() matches the element but find() and exists() ignore it.

Logs

ℹ .sc-jTzLTM
ℹ match: <button class="sc-jTzLTM dlKhUw sc-bdVaJa kgpquR">Retry</button>
ℹ length ".sc-jTzLTM": 0
ℹ length "RetryButton": 0
ℹ exists ".sc-jTzLTM": false
ℹ contains "RetryButton": true

Expected behavior

contains(), find(), exists(), html() should return matching results.

Your environment

OS X 10.13.6

node: v10.10.0 npm: 6.4.1 yarn 1.12.3

API

• shallow
• mount
• render

Version

library	version
enzyme	3.8.0
react	16.7.0
react-dom	16.7.0
react-test-renderer
adapter (below)

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )