Mounting stateless functional components failing with ''Element appears to be neither ReactComponent nor DOMNode error'

[michael-wolfenden]

Problem

I am trying to test the following stateless functional component

import React from 'react'

const Product = ({ price, quantity, title }) =>
    <div> {title} - &#36;{price} {quantity ? `x ${quantity}` : null} </div>

export default Product

with the following test

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

import Product from './Product'

const renderWithProps = (props) => mount(
    <Product {...props} />
)

it('should render title and price', () => {
    const component = renderWithProps({
        title: 'Test Product',
        price: 9.99,
    })

    const text = component.text()

    expect(text).toMatch(/Test Product - \$9.99/)
})

and am getting the following error

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

Versions

enzyme: 2.2.0
karma: 0.13.22
phantomjs-prebuilt: 2.1.7
react: 15.0.2

[aweary]

@michael-wolfenden can you share the stack trace for the invariant error?

[michael-wolfenden]

Stacktrace

Invariant Violation: Element appears to be neither ReactComponent nor DOMNode (keys: _currentElement,_rootNodeID,_instance,_nativeParent,_nativeContainerInfo,_pendingElement,_pendingStateQueue,_pendingReplaceState,_pendingForceUpdate,_renderedNodeType,_renderedComponent,_context,_mountOrder,_topLevelWrapper,_pendingCallbacks,_calledComponentWillUnmount,_mountIndex,_mountImage,_isOwnerNecessary,_warnedAboutRefsInRender)
at invariant (base/test.specs.js:8389:16)
at findDOMNode (base/test.specs.js:33305:54)
at ReactWrapper. (base/test.specs.js:11886:48)
at Context. (base/test.specs.js:37429:50)window.karma.result @ debug.html:38
FAILED products components should render title and price

Reproducing

You can see the repo that has the issue here at:
https://github.com/michael-wolfenden/redux-shopping-cart/

You can also reproduce the issue by changing shallow to mount in the file below and running npm test:
https://github.com/michael-wolfenden/redux-shopping-cart/blob/master/src/app/modules/products/components/Product.spec.js

[aweary]

Thanks @michael-wolfenden I was able to reproduce the error following those instructions. I'll check this out today.

[aweary]

So to clarify the issue, the component mounts fine, but calling text() is what causes it to fail because the internal node is not recognized as a DOMNode or a React component by findDOMNode

[aweary]

I was able to reproduce this with the master branch as well: https://github.com/Aweary/enzyme-test-repo/tree/issue-%23356

It seems like React isn't recognizing this as a component that should be built using StatelessComponent so it's missing a render method and failing.