wrapper.prop(key) function returning undefined on with React Native components

[Chris-Petty]

Running shallow tests on the below code I get errors due to .prop() returning undefined rather than the value corresponding to the prop key. Console output and a log of one of the objects follow below.

import React, { TextInput, Text, View } from 'react-native';
import { expect } from 'chai';
import { shallow } from 'enzyme';

describe('Text', () => {
  it('to work nicely', () => {
    const wrapper = shallow(<Text value={50} />);
    expect(wrapper.prop('value')).to.equal(50);
  });
});

  1) Text to work nicely:
     AssertionError: expected undefined to equal 50
      at Context.<anonymous> (test.spec.js:9:38)

Inserting console.log(wrapper); into the test, the object shows that the prop value is there:

ShallowWrapper {
  root: [Circular],
  unrendered: 
   { '$$typeof': Symbol(react.element),
     type: { [Function] displayName: 'Text', propTypes: [Object] },
     key: null,
     ref: null,
     props: { value: 50 },
     _owner: null,
     _store: {} },
  renderer: 
   { _instance: 
      { _currentElement: [Object],
        _rootNodeID: '.12g8lhtj1mo',
        _instance: [Object],
        _pendingElement: null,
        _pendingStateQueue: null,
        _pendingReplaceState: false,
        _pendingForceUpdate: false,
        _renderedComponent: [Object],
        _context: {},
        _mountOrder: 3,
        _topLevelWrapper: null,
        _pendingCallbacks: null },
     render: [Function: render],
     getRenderOutput: [Function: getRenderOutput] },
  node: null,
  nodes: [ null ],
  length: 1,
  options: {} }

I've tested this with View and TextInput and had the same issue.

[Chris-Petty]

wrapper.props throws a similar error: AssertionError: expected {} to equal 50

[Chris-Petty]

Probably related RealOrangeOne/react-native-mock#33

[jerrysu]

#335 (comment)

[aweary]

@jerrysu's link is on point, that's exactly the reason you're seeing this behavior. Specifically:

when you run shallow(), you are rendering Foo, and then wrapping around the result... so the wrapper by default is looking at the root node (which in your example is a div).

So you're wrapper isn't wrappeing the <Text /> component, it's wrapping what it returns, so your prop call is testing whatever the root node returned from <Text /> is. This is expected behavior with shallow.

It's probably also worth mentioning that a test like:

    const wrapper = shallow(<Text value={50} />);
    expect(wrapper.prop('value')).to.equal(50);

is essentially meaningless. You just passed in 50 to the value prop so testing that the value prop on your component is 50 provides no actual benefit. You'd probably want to test that value is being consumed/used as you'd expect it to instead.

I'm closing this since it's expected behavior, but feel free to ask any additional questions!

[henriqueViana]

I also had this problem, I was able to solve it when I used mount instead of shallow, and calling as follows .props().propName

it('should render a url property', () => {
    const url = 'https://github.com'
    const wrapper = mount(<GithubButton url={url} />)

    expect(wrapper.props().url).toEqual(url)
 })

Docs: https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/props.html