Menu
I have a Parent component that renders a Child component. The Child component first renders unique props like 'name' and then the Parent component renders common props such as 'type' and injects those props into the Child component using React.Children.map.
My problem is that Enzyme is not able to detect the common props rendered by the Section component so I cannot effectively test whether or not the common props are being added.
The test:
const wrapper = shallow(
<Parent title="Test Parent">
<div>
<Child
name="FirstChild"
/>
</div>
</Parent>
)
// console.log(wrapper.find(Child).node.props) <- returns only "name" in the object
expect(wrapper.find(Child)).to.have.prop("commonPropOne")
expect(wrapper.find(Child)).to.have.prop("commonPropTwo")
expect(wrapper.find(Child)).to.have.prop("commonPropThree")The code for injecting common props:
const Parent = (props) => (
<div
className="group"
title={props.title}
>
{ React.Children.map(props.children, child => applyCommonProps(props, child)) }
</div>
)
547
To delay rendering of React components, we use the setTimeout function.
To wait for a ReactJS component to finish updating, we use a loading state in our react application by use of the conditional rendering of the component. This can be achieved by the use of the useState and useEffect hooks in the functional components.
Memoization using useMemo() and UseCallback() Hooks Memoization enables your code to re-render components only if there's a change in the props. With this technique, developers can avoid unnecessary renderings and reduce the computational load in applications.
Forcing an update on a React class component In any user or system event, you can call the method this. forceUpdate() , which will cause render() to be called on the component, skipping shouldComponentUpdate() , and thus, forcing React to re-evaluate the Virtual DOM and DOM state.
You will have to use enzyme's mount.
mount gives you full DOM rendering when you need wait for components to render children rather than only rendering a single node like shallow.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
