[pionas1337]

Siemanko. Zacząłem ostatnio zakolegowywać się powoli z react-testing-library i przeczesałem już chyba pół internetu a nie mogę znaleźć nigdzie satysfakcjonującej odpowiedzi na nurtujące mnie pytania. Otóż po przeczytaniu wielu postów Kent C. Doddsa (tego twórcy RTLa) oraz wielu innych wpisów/dokumentacji można wyciągnąć wniosek, żeby unikać atrybutu data-testid, no bo ideą RTLa jest testowanie na podstawie tego co widzi user. Już kombinowałem na X sposobów ale może wy mi powiecie, jaką inną metodą mam znaleźć w DOMie diva który ma na sobie onClick, albo container z innymi komponentami, który wiadomo, też jest divem (chcę sprawdzić czy się wyrenderował, albo czy jeden komponent wyrenderował się w drugim). Bo ogólnie rzecz biorąc, używając tego data-testid musiałbym to powrzucać do wielu komponentów, chociaż jest chyba jakiś plugin który przy produkcji usuwa te atrybuty.

#naukaprogramowania
#javascript
#react
#programowanie

[S.....8]

@pionas1337: ten div powinien miec role=button wiec uzywasz getByRole. Mozesz tez uzyc innych selektorow, getByText itp

[pionas1337]

@Sheppard28: dzieki Miras, trzeci dzien nad tym siedze a do łba mi to nie przyszło ( ͡° ͜ʖ ͡°) Będę miał jeszcze jedno pytanko później to oznaczę

[cppguy]

@pionas1337:

znaleźć w DOMie diva który ma na sobie onClick

a do czego ci takie cos potrzebne?

[pionas1337]

@cppguy: żeby przetestować, czy ten onclick działa

[pionas1337]

@Sheppard28: a wiesz może, czy zamiast hardcodować (o ile już wystąpi konieczność) parametru data-testid do komponentów mogę to przekazać w teście jako prop? Strzelam, że nie jest to chyba poprawne, bo nie widziałem takich rozwiązań, aczkolwiek testy przechodzą przy takim podejściu, no i html przy renderowaniu nie dołącza niepotrzebnie tego data-testid do elementów.

[pionas1337]

@cppguy: no chyba musze najpierw dac cel temu onClickowi prawda?

[pionas1337]

@cppguy: tak jest, masz racje, ale chyba sie nie zrozumielismy, bo wlasnie po to chcialem tego diva (cel) z onclickiem znalezc, zeby zrobic na nim fireEvent ( ͡° ͜ʖ ͡°), teraz juz wiem zeby dac mu role=button

[mocpapieza]

@pionas1337 nie jest to zła praktyka, aczkolwiek musisz zadbać o to żeby te idki były unique. Mimo wszystko data-testid traktuje się jako ostateczność. We własnych komponentach nie powinno się go w zasadzie używać nigdy. Gorzej jest jak korzystasz z jakiegoś gotowca i polecasz na czyjejś implementacji np Material UI czy Ant Design wtedy tego nie unikniesz

[pionas1337]

@mocpapieza: rozumiem, że to odnośnie przekazywania data-tesid jako prop podczas testu, tak?

[mocpapieza]

@pionas1337 tak, problem tego rozwiązania jest taki że jest prop gdzieś w API komponentu który docelowo nie jest wykorzystywany, dodatkowy narzut do chunk'a itd przy czym jeżeli to dla Ciebie działa i będzie Ci się chciało to pisać to spoko. Ja osobiście nie widze nic złego w data test id w HTML. Jeżeli masz problem z selektorem odpowiednim w Jest to Cypress przy E2E będzie miał ten sam problem. Wtedy ten data-testid