.children() are empty when a component doesn't wrap its children

[hon2a]

I have a Localize component that is used with the app as its single child and provides context to it. The relevant part is:

class Localize extends React.Component {
  render() {
    return React.Children.only(this.props.children);
  }
}

When I mount this component and try to get .children(), I get nothing.

const children = mount(React.createElement(Localize, {}, childElement)).children();
// children.length === 0

I can get the wrapper for the child component if I do this:

const child = mount(React.createElement(Localize, {}, childElement))
  .find(childElement.type)
  .at(0);

[ljharb]

When you say someComponent - children need to be Elements, not Components - can you share the code that initializes someComponent?

[hon2a]

@ljharb Sorry, I see how that is misleading. I updated the description to clearly describe it as Element. It can be any Element, e.g. <div/> or <MyComponent ... /> where MyComponent extends React.Component. The child element is unimportant as of itself, the issue is with how the outer component renders the child directly in its render() without a wrapper.

[ljharb]

Does this same thing happen with shallow, or only with mount?

[hon2a]

I've just tested it with shallow:

    class Wrapper extends React.Component {
      render() {
        return React.Children.only(this.props.children);
      }
    }

    const wrapper = shallow(
      React.createElement(Wrapper, {}, React.createElement('div'))
    );

    expect(wrapper.children().length).toBe(1);

and it fails (expects 1, gets 0), just like when I use mount.

[jantorestolsvik]

Does anyone have an update on this or any idea how we can fix it?

[ljharb]

Related to #977?

[hon2a]

@ljharb Yeah, looks #977 is a duplicate of this, though with a tad more extensive description.

[ljharb]

I don't think this is still an issue in v3; please file a new issue if that's not the case.