Testowanie React.js w Enzyme — props, state i interakcje

[type-of-web-komentarze[bot]]

Testowanie React.js w Enzyme — props, state i interakcje

Pokazałem już jak pisać proste testy do aplikacji React.js z użyciem Enzyme. Sprawdzanie czy coś się renderuje, czy zawiera tekst, czy dobrze pokazuje elementy… W tym wpisie idę o krok dalej. Pokazuję jak w Enzyme testować interakcje z komponentami, odczytywać i zmieniać propsy a także state.

https://typeofweb.com/testowanie-react-js-enzyme-props-state-interakcje

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	kensshin985		2018-02-15 15:25

Hej, dobra robota z tym kursem.
Pierwsze kilka rozdziałów było krótko, konkretnie wytłumaczone - co zachęcało do przerabiania kolejnych. Lecz jakoś od 10 się pogubiłem - wyszły prawdopodobnie moje braki w js.
Ogólnie bardziej interesuje mnie back-end(java/spring/hibernate), aczkolwiek w celach pisania pracy inżynierskiej oraz ogólnie nauczenia się czegoś nowego chciałbym liznąć trochę front'u. Przerobiłem książkę head first javascript ale nie czuję się po niej zbyt pewnie. Może mógłby mi ktoś polecić jakiś dobry kurs/blog traktujący o js.

Jeszcze jedna rzecz, którą zauważyłem. Z rozdziału 1 oraz 14(a może i innych) nie wyświetla się w nawigacji kursu rozdział 15 - prawdopodobnie wkradł się jakiś błąd :D

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-21 10:43

Niestety nie znam żadnych kursów JS ;) Jedyne co mi przychodzi do głowy to seria książek „You Don't Know JS”.
A masz jakieś konkretne pytania? :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Przemek		2018-03-28 05:40

Hej,

mam pewien problem z testem interakcji.

1. Czy zamiast shallow nie powinniśmy użyć render? Sprawdzamy propsy wewnętrznego komponentu, a wedle tego co pisałeś w kursie shallow stworzy tylko wskazanego node bez jego dzieci.

2. Po zrobieniu render'a propsy w elemencie wewnętrznym są undefined.

3. Po wcięciu sprawdzenia propsów na starcie nie działa mi symulate: TypeError: listFilter.find(...).simulate is not a function co jest wynikiem tego że 'UserList' nie został znaleziony.

kod testu

it('filters names on input', () => {
const listFilter = render();
expect(listFilter.find('UsersList').prop('users')).toEqual(['Michal', 'Kasia', 'Jacek', 'Marta', 'Tomek', 'Ania']);

listFilter.find('input').simulate('input', {currentTarget: {value: 'M'}})
expect(listFilter.find('UsersList').prop('users')).toEqual(['Michal', 'Marta', 'Tomek']);

});


kod komponentu:

import React from 'react';

const allUsers = ['Michal', 'Kasia', 'Jacek', 'Marta', 'Tomek', 'Ania'];

export default class ListWithFilter extends React.Component {
constructor() {
super();

    this.state = {
        filteredUsers: allUsers
    };
}

filterUsers = (e) => {
    const text = e.currentTarget.value;
    this.getFilteredUsersForText(text).then(filteredUsers =>
        this.setState({
            filteredUsers
        })
    ).catch(error => console.log(error))
}

getFilteredUsersForText(text) {
    return new Promise(resolve => {
        const time = (Math.random() + 1) * 250;
        setTimeout(() => {
            const filteredUsers = allUsers.filter(user => user.toLowerCase().includes(text.toLowerCase()));
            resolve(filteredUsers);
        }, time);
    });
}

render() {
    return (
        <div>
            <input onInput={this.filterUsers}/>
            <UsersList users={this.state.filteredUsers}/>
        </div>
    );
}

};

export const UsersList = ({users}) => {
if (users.length > 0) {
return (

{users.map(user =>
• {user}
)}

);
}

return (
    <p>No results!</p>
);

};


Przeniosłem wewnętrznego const'a do osobnego pliku co rozwiązuje problem 2 i 3. Co prawda nie rozumiem dlaczego (jak i całej reszty JS'a :) ).

Teraz moje filtrowanie w teście nie działa. Komponent wrzucone na strone jest za to funkcjonalny więc problem jest z testem, nie z kodem...

Niestety więcej pomysłów nie ma, a trzeba się powoli zbierać do pracy :).

p.s. Bardzo przejrzysty kursik i ogólnie artykuły. Świetna robota :). Jest szansa że między innymi dzięki Tobie opanuje JavaScript i z backend'u Javowewgo przejdę na fullstack xd.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-28 10:24

1. Nie. Testy z tego artykułu działają poprawnie. Shallow renderuje tylko dany komponent, a więc propsy komponentów w nim zawartych można pobierać. Natomiast już ten zawarty komponent się nie wyrenderuje.
2. Nie powinny być, w kodzie musi być błąd.
3. Jak wyżej. Ale przy tak wklejonym kodzie znalezienie błędu jest praktycznie niemożliwe.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	crisu		2019-01-04 11:27

Jaka jest roznica pomiedzy

usersList.setProps({ users }) a usersList.setProps( users ); ? W momencie uzycia drugiej skladni testy nie przechodzą

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

W pierwszym przypadku jako argument przekazujesz coś co zawarłeś w zmiennej users, a w drugim przypadku przekazujesz obiekt {users}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Krzysztof Dziekiewicz		2019-12-18 13:05

Nie do końca zrozumiałem odpowiedzi, ale generalnie {users} jest skrótem, który jest automatycznie rozwijany do {users: users}. Oczywiście, jeśli w props oczekujemy np. nazwy "list", to wtedy trzeba wywołać: setProps({list: users}).
Czyli skrót można użyć, jeśli nazwa własności jest taka sama, jak nazwa podawanej zmiennej.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-01-05 12:59

To się zgadza. Ale pytanie było o różnicę pomiędzy users a {users}, czyli pomiędzy users a {users: users}.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	BartusZak	http://www.bartuszak.pl/	2019-01-04 11:27

Niestety testy nie przechodzą.
https://uploads.disquscdn.com/images/b73e6cef014f2cb7cb2bbf594db6c798d4b4961382f90204993f2b7310b9c6f7.jpg

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Jakie testy, co próbowałeś zrobić? Na screenshocie jest tylko resultat, trudno na jego podstawie pomóc :)

Testy w repo bez zmian przechodzą

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Agnieszka Kowalczyk		2019-01-04 11:27

Hej
Mam problem w części z dodawaniem propsów.

Przy zapisie:
expect(usersList).toContainReact(

{user}

)
dostaję błąd:
TypeError: expect(...).toContainReact is not a function

Czytam w tej dokumentacji:
http://airbnb.io/enzyme/docs/api/shallow.html
i nie znajduję metody toContainReact

Poproszę o pomoc.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Hej! To rzeczywiście nie jest jasne :) W projekcie jest zainstalowany jeszcze jest-enzyme, który dodaje, między innymi, takie właśnie metody:
https://github.com/FormidableLabs/enzyme-matchers/blob/master/README.md#tocontainreact

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	TTT		2019-01-07 12:38

Hej, a jak jest z asynchronicznością? Jak chce przetestować
it('should contain filtered names' () => {
userListContainer.find('Input').simulate('input', { currentTarget: { value: 'M' } });
expect(userListContainer.find('UsersList').prop('users')).toEqual(['Michal', 'Marta', 'Tomek']);

test się failuje. Jeżeli dodam tę asercję w timeout przechodzi. dziwie się trochę, że u Ciebie jest ok.

Ja co prawda jednocześnie uczę się z kilku źródeł i mam pewnie inną strukturę komponentów (bardziej rozbite i nie trzymam większości rzeczy w App). Nie mniej timeout nie jest chyba najlepszą praktyką. Proszę o radę.

metoda render z userListContainer (ktory to dopiero ląduje w App):

render() {
return (

);
używam też Promise (analogicznie jak w kursie)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-01-07 15:50

W tym odcinku kursu nie ma jeszcze Promise (wszystko dzieje się synchronicznie), więc musiałbyś dokładnie pokazać co robisz.

Ale ogólnie, co do zasady, musiałbyś zamockować serwis, który dostarcza Ci dane.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	TTT		2019-01-08 08:55

OJJAAA faktycznie. W poprzedniej lekcji dałeś zadanie na wprowadzenie asynchroniczności. Teraz zauważyłem, że w kodzie jaki podajesz używasz wersji synchronicznej. Także sorry, jak wspomniałem robie trochę po swojemu. Mam nadzieję, że będzie o testowaniu aynchornicznym bo ciężko mi to jakoś przyszło. Jako, że jestem QA to sam temat mockowania jest też dla mnie ciekawy. Byłbym wdzięczny za przykład asynchroniczność + mockowanie (real life example)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Agnieszka Sołtysik		2019-02-12 10:53

Jaka jest różnica między metodami onChange a onInput, używanych na inputach? W pierwszym przypadku testy z ostatniego przykładu nie przechodzą.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-12 11:11

Nie ma żadnej różnicy — React celowo zmienił działanie onChange, żeby było praktycznie identyczne z onInput.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Agnieszka Sołtysik		2019-02-12 11:27

Tylko jak zmienię onInput na onChange, to w takim przypadku te testy nie przechodzą.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-27 13:32

https://uploads.disquscdn.com/images/f29f65441d906b6108b08cf6929692322ec9abdb3a3db8c55ee52017202b0ce0.jpg https://uploads.disquscdn.com/images/9473f4ff725b9af3e7a264de4749959a1217bdd5b482265affec19f336832d11.jpg Cześć. Nie przechodzi mi ostatnie test. Już kombinowałem jak mogłem. Komponent otrzymuje propsy, bo pierwszy expect przechodzi, ale później nie działa symulacja.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-03-15 12:08

..

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-03-24 15:28

Bardzo doceniam twoje rady. Zerknąłbyś na to jeszcze raz? Dałem screeny codu FilterUsers. :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-03-05 12:39

A FilterUsers? :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-03-05 00:27

::

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-03-05 00:37

https://uploads.disquscdn.com/images/52ca9ca82f6857e6426878a93c696b2a579dcd454dcd852f6fc9ad3ef483c2d6.png

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Parysek		2019-08-05 16:47

TypeError: expect(...).toContainReact is not a function

Kod skopiowany kropka w kropkę, nie widzi mi tej metody :(

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marcin Kupiński		2021-04-25 13:23

Miałem ten sam problem, więc zmieniłem to na:

expect(usersList.containsMatchingElement(

{user}

)).toEqual(true);

Jak przy wcześniejszych testach.

 
 

Komentarz zaimportowany z WordPressa