Enzyme: `.props()` doesn't seem to work on the root element

[lelandrichardson]

This issue is sort of a misnomer. It usually goes something like this:

Say you have some component:

class Foo extends React.Component {
  render() {
    return <div className="in-foo">{this.props.foo}</div>
  }
}

const wrapper = shallow(<Foo foo="bar" />);
expect(wrapper.props()).to.eql({ className: 'in-foo', children: 'bar' });
expect(wrapper.props()).to.not.eql({ foo: 'bar' });

The trick is you are looking at the root node of the rendered result of <Foo />, not the <Foo /> itself. As a result, you are getting back className and children rather than the props that were passed in.

This is the expected behavior and will not change. If you want to get the props you passed in:

expect(wrapper.instance().props).to.eql({ foo: 'bar' });

[dmaii]

Shouldn't this example from the docs

const wrapper = shallow(<MyComponent foo={10} />);
expect(wrapper.props().foo).to.equal(10);

be like this instead then?

const wrapper = shallow(<MyComponent foo={10} />);
expect(wrapper.instance().props.foo)).to.equal(10);

Edit: fixed doc reference from prop to props

[prewk]

@suisha This helped me, the example in the docs doesn't work for me, it just shows the resulting props of the React component (eg. className and such)