How to wait for complete render of React component in Mocha using Enzyme?

javascript reactjs mocha enzyme chai
cmwall picture cmwall · May 20, 2016 · Viewed 7.3k times · Source

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:

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>
)

Answer

Devin McInnis picture Devin McInnis · May 21, 2016

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.

Related questions

Enzyme simulate an onChange event

I'm testing a react component with Mocha and Enzyme. Here is the component (shortened for simplicity of course): class New extends React.Component { // shortened for simplicity handleChange(event) { // handle changing state of input const target = event.target; const value = target.…

Read More
How do you run mocha tests in the browser?

Is it just me, or does their documentation not explain how to run the tests in the browser at all? Do I have to create that HTML file that they show in the example? How do I make it run …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More