[da-US] Sådan testes API-forbruget af en applikation i React - #4

Vi har allerede testet en Button-komponent, en Link-komponent, der har en brugerhændelse, en krog, der gemmer produkternes tilstand og gør det muligt at tilføje varer til indkøbskurven. Pyha, vi har set en masse her omkring, ikke?

Nu er det tid til at teste, om vores applikation foretager API-kaldet fra butikkens liste over produkter og viser resultatet på skærmen som forventet.

Hvis du endnu ikke har set, hvordan man tester komponenter og hvordan man tester kroge, anbefaler jeg at læse del 2 og del 3 af dette materiale, før du fortsætter.

Hvad vil blive dækket:

• Test API-forbrug
• Konklusion

Test API-forbrug

Lad os som altid analysere koden for ProductsList-komponenten . I useEffect uden afhængighed ser vi, at den allerede udfører API-kaldet 1x, når komponenten indlæses og derefter samler komponenten med products som er blevet opdateret ved handling setProducts leveret af krogen useCart .

import React, { useEffect, useState } from 'react';
import api from '../../../services/api';
import Product from '../../../models/Product';
import * as Molecules from '../../Molecules';
import { Container, Title, List } from './styles';

export default function ProductsList() {
  const [products, setProduts] = useState<Product[]>([]);

  useEffect(() => {
    const getProducts = async () => {
      const response = await api.get('/products');
      setProduts(response.data);
    };
    getProducts();
  }, []);

  return (
    <Container>
      <Title>Nossos Produtos</Title>
      <List>
        {products.map(item => (
          <Molecules.ProductItem key={item.id} product={item} />
        ))}
      </List>
    </Container>
  );
};

At tænke på API-forbrug og beskæftige sig med data kan være lidt skræmmende, men husk, at jeg sagde, at i test er alt simuleret eller "hånet"?

Nå, her vil vi også "håne" resultaterne af API-kaldet, det vil sige, at data blot vil være et objekt, som vi selv samler i en variabel cartProductMock .

For også at simulere et API-kald, vil vi bruge en funktion af en lib kaldet axios-mock-adapter , som tillader denne simulering af en anmodning ved hjælp af aksioer. (Du bør installere det som en afhængighed ved hjælp af npm eller garn, ok?)

Okay, lad os se, hvordan dette virker:

import React from 'react';
import MockAdapter from 'axios-mock-adapter';
import { render, act, waitFor } from '@testing-library/react';
import api from '../../../services/api';

import ProductsList from '.';
import cartProductMock from '../../../mocks/cartProductMock';

const apiMock = new MockAdapter(api);

describe('ProductsList component tests', () => {
  test('renders without crashing with request', async () => {
    act(() => {
      apiMock.onGet('/products')
      .reply(200, [{ ...cartProductMock }]);
    });

    const { getByText } = render(<ProductsList />);

    await waitFor(() => {
      expect(getByText('Test')).toBeInTheDocument();
    });
  });
});

Wow, de fleste af metoderne kender vi allerede!

Vi kan se, at vi har handlingen, der simulerer en handling, i dette tilfælde ved hjælp af en apiMock onGet-metode. Vi har getByText, som vi allerede har set flere gange og i sidste ende hvad er det forventede resultat, hvilket som oftest er, at det er på skærmen, der vises korrekt.

Konklusion

Jeg personligt finder ikke tests særlig lette, fordi jeg tror, ​​at de garanterer, at den applikation, vi udvikler, fungerer, ender det med at blive en proces, der kræver meget ansvar, primært for at undgå falske positive eller negative.

Men at vide, at vi har en funktion mere, der tilføjer pålidelighed til vores kode og bringer mere kvalitet til applikationen, er ganske tilfredsstillende, for som udviklere ønsker vi altid at forbedre os selv for at levere bedre hver gang.

At studere og udvikle mig selv i frontend-tests har været mit nuværende mål, og dette var mit første teststudie, som åbnede mit sind meget, og jeg er sikker på, at det er det første skridt på en lang læringsrejse.

Tak fordi du kom hertil, og hvis dette indhold var relevant for dig, så glem ikke at efterlade en kommentar eller dele, så flere mennesker også kan lære det!

Referencer:

Dette indhold var baseret på videoen "Training:How to implement unit tests in React using Jest" fra Zappts-kanalen, lavet af Cláudio Castro.

Tjek arkivet med projektet:https://github.com/ccastrojr/react_unit_test