Can't find() child elements rendered with dangerouslySetInnerHTML

[rydash]

Related open issues

This may duplicate #1297, but considering that issue's age and how its discussion focused on xlink:href, I wanted to report this just in case. Definitely close this if it's a dupe, though!

Current behavior

mounted JSX elements that include a dangerouslySetInnerHTML property will return those inner elements when calling html(), but they cannot be found using find(). (Calling update() on the wrapper doesn't affect this.)

import React from 'react';
import { mount } from 'enzyme';

test('find a dangerously-set span', () => {
  const wrapper = mount(
    <div id="myDiv" dangerouslySetInnerHTML={{ __html: '<span id="mySpan"></span>' }} />,
  );

  // Success!
  expect(wrapper.html()).toBe('<div id="myDiv"><span id="mySpan"></span></div>');
  expect(wrapper.find('div')).toHaveLength(1);
  expect(wrapper.find('#myDiv')).toHaveLength(1);

  // Failure!
  expect(wrapper.find('span')).toHaveLength(1);
  expect(wrapper.find('#mySpan')).toHaveLength(1);
});

Expected behavior

All find() assertions above succeed.

Workaround

Though the toContain Jest matcher will do the trick, this also works in the meantime:

expect(wrapper.html().match(/<span id="mySpan">/g)).toHaveLength(1);

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.11.0
react	16.13.1
react-dom	16.13.1
jest	26.6.3
adapter (below)	1.15.5

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 ( )

[ljharb]

This is somewhat expected, since the stuff in the innerHTML isn't actually part of the react tree. Calling .html() ends up serializing it to a string, so you can't tell what's from a react element or from innerHTML at all :-)

[rydash]

Sounds reasonable enough to me! Thanks for the enlightenment.

[ljharb]

See also #1297