Con Enzyme, come posso testare la modifica del numero di bambini? - reactjs, enzima

Ho un <Parent/> e mi piacerebbe usare Enzyme per testare il suo comportamento quando aggiungo / rimuovo / cambio il suo <Child/> componenti. Ad esempio, cambiando

<Parent>
<Child />
</Parent>

a

<Parent>
<Child />
<Child />
</Parent>

Sto lavorando con una libreria di terze parti che manipola il DOM, quindi devo tenere traccia dei bambini per mantenere sincronizzati React e la libreria.

Ho provato a chiamare mount più volte, anche se i due mount le chiamate creano due diverse istanze. Per esempio,

let constructorCalls = 0;
let Parent = class extends React.Component {
constructor(props) {
super(props);
constructorCalls += 1;
}
render() { return <span />; }
}

mount(<Parent />);
mount(<Parent />);

// Now, constructorCalls = 2

chiamata mount crea due volte due diversi genitori e due diverse chiamate del costruttore, quindi non si comporta come React e non farebbe nulla se il componente renderizzato non cambia.

Quindi, come posso "rimontare" un componente con diversi bambini usando Enzyme?

risposte:

Non riesco ancora a trovare una risposta con Enzyme, quindi ecco una soluzione enzimatica.

Non piace che Enzyme abbia questa funzionalità, quindi l'ho realizzato incorporando un componente wrapper e cambiando il numero di bambini passando oggetti di scena al wrapper. (Nota che sto usando le classi ES6)

const WrapperComponent = class extends React.Component{
static defaultProps = {
n: 1
}
render() {
if (this.props.n > 1) {
return (
<Parent>
<Child />
<Child />
</Parent>
);
}
return (
<Parent>
<Child />
</Parent>
);
}
}

const wrapper = mount(<WrapperComponent/>);

// ... test the state of Parent with one child

wrapper.setProps({ n: 2});

// ... test the state of Parent with two children