Support for Stateless Components

src/ReactWrapper.js

@@ -61,7 +61,7 @@ export default class ReactWrapper {
           />
       );
       this.root = this;
-      this.node = this.component.refs.component;
+      this.node = this.component.getWrappedComponent();
       this.nodes = [this.node];
       this.length = 1;
     } else {
@@ -108,7 +108,7 @@ export default class ReactWrapper {
    * @returns {ReactComponent}
    */
   instance() {
-    return this.component.refs.component;
+    return this.component.getInstance();
   }
 
   /**

src/ReactWrapperComponent.jsx

@@ -19,10 +19,30 @@ export default class ReactWrapperComponent extends React.Component {
     return new Promise(resolve => this.setState(newProps, resolve));
   }
 
+  getInstance() {
+    const component = this._reactInternalInstance._renderedComponent;
+    const inst = component.getPublicInstance();
+    if (inst === null) {
+      throw new Error(
+        `You cannot get an instance of a stateless component.`
+      );
+    }
+    return inst;
+  }
+
+  getWrappedComponent() {
+    const component = this._reactInternalInstance._renderedComponent;
+    const inst = component.getPublicInstance();
+    if (inst === null) {
+      return component;
+    }
+    return inst;
+  }
+
   render() {
     const { Component } = this.props;
     return (
-      <Component ref="component" {...this.state} />
+      <Component {...this.state} />
     );
   }
 }

src/__tests__/ReactWrapper-spec.js

@@ -7,9 +7,26 @@ import {
   ReactWrapper,
   describeWithDOM,
 } from '../';
+import { describeIf } from './_helpers';
+import { REACT013 } from '../version';
 
 describeWithDOM('mount', () => {
 
+  describeIf(!REACT013, 'stateless components', () => {
+    it('works with stateless components', () => {
+      const Foo = ({ foo }) => (
+        <div>
+          <div className="bar">bar</div>
+          <div className="qoo">{foo}</div>
+        </div>
+      );
+      const wrapper = mount(<Foo foo="qux" />);
+      expect(wrapper.type()).to.equal(Foo);
+      expect(wrapper.find('.bar')).to.have.length(1);
+      expect(wrapper.find('.qoo').text()).to.equal('qux');
+    });
+  });
+
   describe('.contains(node)', () => {
 
     it('should allow matches on the root node', () => {

src/__tests__/ShallowWrapper-spec.js

@@ -2,10 +2,26 @@ import React from 'react';
 import { expect } from 'chai';
 import { shallow, render, ShallowWrapper } from '../';
 import sinon from 'sinon';
-
+import { describeIf } from './_helpers';
+import { REACT013 } from '../version';
 
 describe('shallow', () => {
 
+  describeIf(!REACT013, 'stateless components', () => {
+    it('works with stateless components', () => {
+      const Foo = ({ foo }) => (
+        <div>
+          <div className="bar">bar</div>
+          <div className="qoo">{foo}</div>
+        </div>
+      );
+      const wrapper = shallow(<Foo foo="qux" />);
+      expect(wrapper.type()).to.equal('div');
+      expect(wrapper.find('.bar')).to.have.length(1);
+      expect(wrapper.find('.qoo').text()).to.equal('qux');
+    });
+  });
+
   describe('.contains(node)', () => {
 
     it('should allow matches on the root node', () => {

src/__tests__/_helpers.js

@@ -0,0 +1,11 @@
+/**
+ * Simple wrapper around mocha describe which allows a boolean to be passed in first which
+ * determines whether or not the test will be run
+ */
+export function describeIf(test, a, b) {
+  if (test) {
+    describe(a, b);
+  } else {
+    describe.skip(a, b);
+  }
+}