Z enzymem, jak mogę przetestować zmianę liczby dzieci? - reaktsy, enzym

mam <Parent/> komponent, i chciałbym użyć Enzyme do przetestowania jego zachowania podczas dodawania / usuwania / zmiany <Child/> składniki. Na przykład zmiana

<Parent>
<Child />
</Parent>

do

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

Pracuję z biblioteką innej firmy, która manipuluje DOM, więc muszę śledzić dzieci, aby React i biblioteka były zsynchronizowane.

Próbowałem dzwonić mount wiele razy, chociaż dwa mount wywołania tworzą dwa różne wystąpienia. Na przykład,

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

Powołanie mount dwukrotnie tworzy dwa różne elementy nadrzędne i dwa różne wywołania konstruktora, dlatego nie zachowuje się tak, jak React i nie robi nic, jeśli renderowany komponent się nie zmienia.

Jak więc „ponownie zamontować” komponent z różnymi dziećmi korzystającymi z Enzymu?

Odpowiedzi:

Nadal nie mogę znaleźć odpowiedzi za pomocą Enzymu, więc oto rozwiązanie enzymatyczne.

To nie jest tak, że Enzym ma tę funkcjonalność, więc osiągnąłem to, wstawiając komponent opakowania i zmieniając liczbę dzieci, przekazując rekwizyty do opakowania. (Uwaga: używam klas 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