Support functional stateless components

[geowarin]

Hello guys.
Thank you so much, reagent is exactly the lib I was waiting for!

I noticed that using mount() does not work on functional stateless components.

There is a workaround: wrapping the function component with:

import React from 'react';

// Utility to wrap stateless component and allow functional stateless components
// to be tested using reagent
export var StatelessWrapper = Wrapped => class extends React.Component {
  render() {
    return <Wrapped {...this.props} />;
  }
};

I would be nice if the lib did that automatically.

[lelandrichardson]

Agreed this should definitely work out of the box. Thank you for the suggested workaround... I'm a bit surprised that this doesn't "just work" and would like to do a bit more research regarding what the "right" way to get this working with reagent would be.

Do you know if shallow works with stateless components?

[geowarin]

Yes, it does work with shallow().
Stacktrace with mount:

TypeError: Cannot read property '_reactInternalComponent' of null
      at internalInstanceOrComponent (/Users/geowarin/dev/2015/spring/new/boot-react/frontend/node_modules/reagent/build/MountedTraversal.js:135:18)
      at treeFilter (/Users/geowarin/dev/2015/spring/new/boot-react/frontend/node_modules/reagent/build/MountedTraversal.js:261:40)
      at ReactWrapper.<anonymous> (/Users/geowarin/dev/2015/spring/new/boot-react/frontend/node_modules/reagent/build/ReactWrapper.js:37:45)
      at /Users/geowarin/dev/2015/spring/new/boot-react/frontend/node_modules/reagent/build/ReactWrapper.js:617:19
      at Array.map (native)
      at ReactWrapper.flatMap (/Users/geowarin/dev/2015/spring/new/boot-react/frontend/node_modules/reagent/build/ReactWrapper.js:616:30)
      at findWhereUnwrapped (/Users/geowarin/dev/2015/spring/new/boot-react/frontend/node_modules/reagent/build/ReactWrapper.js:36:18)
      at ReactWrapper.find (/Users/geowarin/dev/2015/spring/new/boot-react/frontend/node_modules/reagent/build/ReactWrapper.js:224:14)
      at Context.<anonymous> (/Users/geowarin/dev/2015/spring/new/boot-react/frontend/test/components/MyComponent.spec.js:25:17)

[lelandrichardson]

@geowarin ah. That trace is very helpful, thanks. I think we can get this fixed!

[lelandrichardson]

Fixed in #53

[gabrielenosso]

I have a problem with that: using mount with a stateless component I get:

Invariant Violation: Element appears to be neither ReactComponent nor DOMNode (keys: _currentElement,_rootNodeID,_instance,_pendingElement,_pendingStateQueue,_pendingReplaceState,_pendingForceUpdate,_renderedComponent,_context,_mountOrder,_topLevelWrapper,_pendingCallbacks,_mountIndex,_mountImage,_isOwnerNecessary,_warnedAboutRefsInRender)

[ljharb]

@gabrielenosso SFCs must return something, they can't return null - can you share the code for your component?

[gabrielenosso]

I know that they can't return null, so it isn't the problem.
I will try to share some code tomorrow morning.

Thank you for your help!

[gabrielenosso]

It gives me the problem when I use the .text() method.

const Button = (props) => (
  <div>
  </div>
);
export default Button;

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

import Button from './Button';

describe('Button', () => {
   it('should render its label', () => {
     const labelValue = 'labelValue';
     expect(mount(<Button label={labelValue} />).text().indexOf(labelValue) >= 0).to.be.true;
   });
});

[lelandrichardson]

@gabrielenosso interesting. I'll give this a try today. This could be a bug with the way .text() is implemented.

[gabrielenosso]

Thanks for your support! :)

[revolunet]

Using 2.1.0 and looks like functionnal components dont work, or i dont use it correctly ?

export const Test = () => <div>Test</div>;
let w = mount(<Test/>);
console.log(w.debug());

this outputs nothing... normal ?

[griffinmichl]

I am currently working on #261, and I have encountered a similar issue. Calling .text() directly on the wrapper does not work for stateless function components. I believe the issue can be traced to the use of findDOMNode. More information can be found here: facebook/react#4936.

[ffxsam]

I found this issue because I was having problems with testing stateless functions as well:

/Users/samh/test/client/components/Thing.js:13
exports["default"] = Thing = function Thing() {
                           ^

ReferenceError: Thing is not defined

I just wanted to follow the progress on this.