enzymejs / enzymejs/enzyme

Clarify shallow rendering behavior with props

Open
#445 21 comments 2 reactions 0 assignees View on GitHub
API: shallow discussion
Dominant language
JavaScript
Stars
19.8k
Forks
2k
PR merge metrics
No merged PRs in 30d

Description

So our documentation has the following snippet:
http://airbnb.io/enzyme/docs/api/ShallowWrapper/prop.html

``` js
const wrapper = shallow();
expect(wrapper.prop('foo')).to.equal(10);
```

The issue is that, unless this `foo` prop is being passed as props to a child element then this will actually fail. @lelandrichardson's [explanation of shallow rendering here](https://github.com/airbnb/enzyme/pull/377#issuecomment-218517694)

> @nfcampos @Aweary if you want to really understand the reason, it can be stated like this:
> - Consider the full react render tree as a tree in 3-dimensional space
> - Consider the root component of a shallow call (ie, Foo in the case of wrapper()) as z=0 in this space
> - In the case of shallow, we choose to look only at z=1, which includes essentially the full output of render() of the component.
> - In the case of Foo being a DOM node, there is no z=1.
>
> As a result, instead of making this an error case, we simply fall back to looking at z=0 instead of z=1.
>
> I'm not sure if I consider this behavior wrong or less than ideal, but I do think that the fact that a large subset of our tests happen to test this case rather than the composite component case is the real problem.

I'm of the opinion that we should be looking at `z=0` in all cases to properly support props that are defined on the root component in the `shallow` call. Users are doing stuff like:

``` js

class Foo extends Component {
render () {
return

{this.props.foo}

}
}

...

const wrapper = shallow()
expect(wrapper.prop('foo')).to.equal('bar')
```

And it's failing because shallow is only looking at the returned `div` which only has a `className` and `children` prop.

We need to decide if this should be supported or not, and if so how we can do it. Any discussion/feedback would be great :)

@nfcampos @blainekasten @lelandrichardson @ljharb

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.