Beef up tests for Stateless Functional Components

[lelandrichardson]

Enzyme was originally written to be compatible with React 0.13, before Stateless Functional components were a thing. It really seems like we've been getting a lot of PRs and Issues highlighting the incompatibility of SFCs with enzyme.

I love SFCs - so i'm hoping we can change this. i think the first step might be to increase the number of tests we have that use SFCs.

If anyone is interested in collaborating on enzyme, this is some relatively straight-forward work that I'd be hugely grateful for!

Help us make enzyme more stable!

[griffinmichl]

Recently started using enzyme for my first react native app. Looking forward to taking a look at this issue.

[Andarist]

I think I could help a little bit, especially that I am using SFC all over the place and it would be nice to have a possibility to test them correctly ;)

Although I would need some guidance on what I can work on and maybe what would be the best approach to solving particular task.

[tf]

Related #262

[lelandrichardson]

One approach that I've considered, though it isn't very DRY, is to literally just go through each test for mount/shallow and duplicate it if it's using a component and use an SFC instead.

Might be a better approach than that though...

[ljharb]

I find that sometimes it's nicer when tests do repeat themselves - that's probably the simplest approach here.

[lencioni]

I find that sometimes it's nicer when tests do repeat themselves

+1 to this. Tests should prioritize ease of understanding any given example to make it easier on folks who run into failing specs and need to understand what is going on.

[griffinmichl]

I have finished adding tests for shallow, but have encountered issues writing tests for 'mount' (one of these issues is mentioned in #45). From what I can tell, stateless function components do not play well with findDOMNode. This means that calling .text() on the wrapper of an SFC will not work. Additionally, trying to get an SFC with .find() does not work either.

I would appreciate some guidance on how to proceed. Should I write failing tests that attempt to use these functionalities (so that they can be fleshed out in future releases with fixes/enzyme-specific errors), or should I use work arounds like in the example below?

const InnerComponent = () => (
  <div className="foo">foobar</div>
);
const OuterComponent = () => (
  <div className="bar"><InnerComponent /></div>
);
const innerWrapper = mount(<InnerComponent />);
const outerWrapper = mount(<OuterComponent />);

Will not work:

innerWrapper.text();
outerWrapper.find(InnerComponent);

Will work:

innerWrapper.find('.foo').text();
outerWrapper.find('.bar').childAt(0);

A good example of a test that can't be directly translated into an SFC (but can be made to work) would be this one:

    it('can pass context to the child of mounted component', () => {
      const SimpleComponent = React.createClass({
        contextTypes: {
          name: React.PropTypes.string,
        },
        render() {
          return <div>{this.context.name}</div>;
        },
      });
      const ComplexComponent = React.createClass({
        render() {
          return <div><SimpleComponent /></div>;
        },
      });

      const childContextTypes = {
        name: React.PropTypes.string.isRequired,
      };
      const wrapper = mount(<ComplexComponent />, { context, childContextTypes });
      expect(wrapper.find(SimpleComponent)).to.have.length(1);
    });

[aweary]

@gm758 are you still working on this? We recently fixed the incompatibility issue with SFCs and findDOMNode #359

[griffinmichl]

@aweary Haven't checked back in a while. Glad to see this compatibility issue fixed. Happy to get back to work on this now that this fix has been implemented. I'll start at it later today.

[griffinmichl]

#394 should allow this issue to be closed