null nodes are passed to findWhere()/filterWhere() if tree contains stateless components

[jedwards1211]

If the render tree contains stateless components (a.k.a. pure function components), wrappers with null nodes are passed to findWhere() and (I'm assuming) filterWhere().

  const MyComp = () => (<span>hello</span>);

  it("shouldn't throw at least", () => {
    const wrapper = mount(<MyComp/>);
    const result = wrapper.findWhere(n => n.text() === 'hello');
  });

I can't imagine anything useful we could do with a null node passed to findWhere, plus this was unexpected to me, so I think it would be more helpful to avoid passing null nodes to findWhere.

As an aside, this is not the first awkwardness since stateless components were introduced that makes me want to avoid using them...

[lelandrichardson]

is this behavior actually specific to SFCs or is it just an awkwardness of how our node traversal logic works?

[jedwards1211]

I'm pretty sure it's specific to SFCs; according to the React docs,

Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component. Normally this isn't an issue, since stateless functions do not provide an imperative API. Without an imperative API, there isn't much you could do with an instance anyway. However, if a user wants to find the DOM node of a stateless function component, they must wrap the component in a stateful component (eg. ES6 class component) and attach the ref to the stateful wrapper component.

I assume the reason you can't use refs on SFCs is that React doesn't even create ReactComponent instances for them. If that is the case it would certainly explain where the null nodes are coming from.

[jedwards1211]

In any case, I think findWhere() and filterWhere() should avoid passing wrappers with null nodes to the predicate, regardless of why the null nodes originate.

[ljharb]

This seems legitimate to me. I can't imagine a use case where i want to operate on null nodes.

[jedwards1211]

Actually, I'm pretty sure "stateless functions don't have a backing instance" specifically means no ReactComponent.

[IanVS]

It seems null nodes are also passed to the predicate from empty children:

class Foo extends React.Component {
  render() {
    return (
      <div>{this.props.children}</div>
    );
  }
}

it('should render without children', () => {
  const wrapper = shallow(<Foo />);
  const result = wrapper.findWhere(n => {
    // necessary to check n.get(0) to avoid a thrown error from n.type()
    return (n.get(0) !== null && n.type() === 'div')
  });
}