to deeply render as
- <ReactElement> to [exactly] deeply render [with all children] [with all wrappers] [with all classes] [with all attributes] as <ReactElement>
Given the following test component:
const MyComponent = () => (
<div className="parent" id="main">
<span>one</span>
<span>two</span>
<span>three</span>
</div>
)
You can validate the rendering of this component with the to deeply render as assertion,
which renders the component using the full virtual DOM renderer, and validates the output.
expect(<MyComponent />, 'to deeply render as', <div className="parent" />);
This works using the same rules as to have rendered, but saves you using the TestUtils
and renderIntoDocument() or using ReactDOM.render(...) directly when you just want to
validate some translation of props to output.
// The span "two" is missing here, but it is ignored.
expect(<MyComponent />, 'to render as',
<div id="main">
<span>one</span>
<span>three</span>
</div>
);
// The following assertion will fail, as 'four' does not exist
expect(<MyComponent />, 'to render as',
<div id="main">
<span>one</span>
<span>four</span>
</div>
);
expected <MyComponent />
to render as <div id="main"><span></span><span></span>
<div className="parent" id="main">
</div>
If you want to check for an exact render, use 'to exactly deeply render as'.
Alternatively, if you don't care about extra props, but want to check that there are no extra child nodes, use 'to have rendered with all children'
Note that exactly implies with all children, so you using both options is not necessary.
Normally wrappers (elements that simply wrap other components) are ignored. This can be useful if you have higher order
components wrapping your components, you can simply ignore them in your tests (they will be shown greyed out
if there is a "real" error). If you want to test that there are no extra wrappers, simply add
with all wrappers to the assertion.
// The span "two" is missing here, as is `className="parent"`
// The missing span will cause an assertion error, but the extra prop will be ignored
// due to `to have rendered with all children` being used
expect(<MyComponent />, 'to deeply render with all children as',
<div id="main">
<span>one</span>
<span>three</span>
</div>
);
expected <MyComponent />
to deeply render with all children as <div id="main"><span></span><span></span>
<MyComponent>
<div className="parent" id="main">
</div>
</MyComponent>
// The span "two" is missing here, as is `className="parent"`
// This will cause an assertion error,
// due to `to have exactly rendered` being used
expect(<MyComponent />, 'to exactly deeply render as',
<MyComponent>
<div id="main">
<span>one</span>
<span>three</span>
</div>
</MyComponent>
);
expected <MyComponent />
to exactly deeply render as <MyComponent><div id="main"><span></span><span></span>
<MyComponent>
<div className="parent" className should be removed
id="main">
</div>
</MyComponent>
If you want to trigger events, use the when deeply rendered assertion to render
the component, then use the other with event and to have rendered or to contain
assertions to validate the output.