• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Testowanie React Router poprzez @testing-library-react

Object Storage Arubacloud
0 głosów
70 wizyt
pytanie zadane 1 listopada 2023 w JavaScript przez Nosferatu1922 Początkujący (260 p.)

Dzień dobry, pierwszy raz szukam odpowiedzi odnośnie programowania ale tutaj już poległem, przekopałem co się dało na zagranicznych stronach, dokumentacje, przepytałem chatGPT (ale to debil) i może tutaj znajdę odpowiedź. Otóż robię prostą aplikację w React, póki co tylko sprawdzam wszystkie ustawienia, dodałem React Router, działa bez zarzutu, problem mam natomiast  z napisaniem testów, które sprawdzały by przejście użytkownika z jednej podstrony do innej. Plik z testem wygląda tak: 

import { describe, it, expect } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { fireEvent } from '@testing-library/dom';
import Context from './Context';
import { RouterProvider, createMemoryRouter } from 'react-router-dom';
import { routes } from './Router';

describe('App component', () => {
  it('renders App', async () => {
    const router = createMemoryRouter(routes, { initialEntries: ['/login'] });

    render(
      <Context>
        <RouterProvider router={router} />
      </Context>
    );

    const btn = screen.getByText('Go back to main page');
    expect(btn).toBeVisible();
    userEvent.click(btn);


    await waitFor(() => {
      expect(window.location.pathname).toBe('/');
      expect(btn).toBeVisible();
    });

    screen.debug();
  });
});

I teraz - router wczytał się poprawnie - tzn, jeżeli manualnie ustawię initialEntries na stronę głowną "/" to testuje stronę głowną, jak podstronę to podstronę, zwykłe testy działają bez zarzutu. Ale jeżeli użytkownik klika 'userEvent.click(btn)' i powinien się przenieśc na strone głowną, to po użyciu 'screen.debug()'  nic się nie zmienia, zostaje wcześniejsza strona. Żeby było zabawniej w tym teście:

  await waitFor(() => {
      expect(window.location.pathname).toBe('/');
      expect(btn).toBeVisible();
    });

oba testy przechodzą, tzn ścieżka zostaje poprawnie zaktualizowana, ale wyświetlana jest dalej 'stara' strona ze wcześniejszej ścieżki (na stronie głownej nie było by tego przycisku).

Intuicyjnie problem mogłby leżeć w asynchroniczności, tzn że event wykonuje się poprawnie, tylko nowa strona nie zdążyła się jeszcze wyrenderować więc wyświetla starą, ale kombinowałem z czym sie da tzn. wstawianiem await, używaniem funkcji waitFor, setTimeOut itp i tak czy owak nie udało mi się uzyskać pożądanego efektu. 

Jak ktoś ma jakieś pomysły to będę wdzięczny, mam nadzieję że napisałem to we wmiarę czytelny sposób.

Pozdrawiam

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

+1 głos
1 odpowiedź 140 wizyt
+1 głos
0 odpowiedzi 207 wizyt
pytanie zadane 10 marca 2021 w JavaScript przez poldeeek Mądrala (5,980 p.)
0 głosów
1 odpowiedź 152 wizyt

92,524 zapytań

141,357 odpowiedzi

319,381 komentarzy

61,914 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...