Sprawdź wartość ustawienia tekstu za pomocą React and Enzyme

Question

Jak ustawić tekst wprowadzania tekstu, a następnie przetestować jego wartość za pomocą React/Enzyme?

const input = wrapper.find('#my-input'); 

input.simulate('change', 
    { target: { value: 'abc' } } 
); 

const val = input.node.value; 

//val is '' 

Wszystkie solutions here wydają się nie działać ..

Answer 1

Aby naprawdę zrozumieć, co się dzieje w kodzie wskazane byłoby, aby zobaczyć swój kod komponentu (konkretnie swoją obsługi onChange.

Jednak w odniesieniu do następującego kodu:

input.simulate('change', {target: {value: 'abc'}}); 

ta nie spowoduje zmiany wartości swojej <input /> element, po prostu powoduje, że twoja funkcja onChange jest uruchamiana i dostarczany obiekt zdarzenia, który wygląda jak {target: {value: 'abc'}}.

Chodzi o to, że twoja funkcja onChange zaktualizuje twój stan lub sklep, więc wyzwolenie tej funkcji powinno spowodować zaktualizowanie DOM. Jeśli w rzeczywistości nie masz instrukcji obsługi onChange zdefiniowanej przy użyciu input.simulate('change'), nic nie zostanie zrobione.

Tak więc, jeśli twoim celem jest, aby właściwie ustawić wartość na wejściu i nie wywoła onChange obsługi można użyć JS ręcznie zaktualizować DOM przy użyciu coś jak wrapper.find('#my-input').node.value = 'abc'; jednak jest to obejście Reaguj na renderowanie cykl i to często zobacz tę wartość wyczyszczoną/usuniętą, jeśli zrobisz cokolwiek, co spowoduje ponowne renderowanie.

Answer 2

Używam React 16 i Enzyme 3.10 tutaj i to całkowicie pracował dla mnie (po wypróbowaniu zbyt wiele różnych sugestii tam):

wrapper.find("input").instance().value = "abc"; 

Podobno w poprzednich wersjach można użyć node lub getNode() zamiast instance(), które były częścią moich wielu wcześniejszych prób.

Answer 3

Działa to zarówno dla enzymu 3 i enzym 2:

wrapper.find('input').getDOMNode().value = 'new value'; 
wrapper.find('input').simulate('change'); 

.getDOMNode() może być używany jak .node w Enzym 2 i jak .instance() w enzymu 3.