[inferno-test-utils] renderIntoContainer can't render mocked component inner children.

[ReginaLiang]

Reproduce steps:

I have a component as follow:

export default function TextView(props) {
  return (
    <Overlay>
      <div className={styles.container}>
        <div className={styles.header} data-l10n-id="scann-dialog-title-text" />
        <div ref={elem => props.onRef(elem)} className={styles.body}>
          {props.text}
        </div>
      </div>
    </Overlay>
  );
}

when I tested this component with jest. I mocked Overlay component.

jest.mock("./components", () => {
  return {
    Overlay: ({ className, style, children }) => {
      return (<div id={"mockedOverlayComponent"}>{children}</div>);
    }
  };
});

then using renderIntoContainer to render TextView.

const renderedTree = renderIntoContainer(<TextView {...props} />);

I expect renderedTree.dom is instance of HTMLElement. Actually, renderedTree.dom is null.

PS: But when I use render from inferno to render TextView.

const render = require('inferno').render;
const renderedTree = render(<TextView {...props} />, dom);

the renderedTree.dom is domElement, children is correctly render, the final result is:

<div id="mockedOverlayComponent">
    <div class="container">
        <div class="header" data-l10n-id="scann-dialog-title-text" />
        <div class="body"> testText </div>
    </div>
</div>

So, I think maybe renderIntoContainer method has some problems. Please help to deal with this issue.

Looking forward to your reply. Thanks.

[Havunen]

Hi,

thanks for reporting this issue, this indeed sounds like a bug.

One possible issue is that renderIntoContainer does not seem to attach the html element to DOM. This may cause issues in some cases.