React: koda testēšanas bibliotēkas “Why testing library” izmantošana

Veidojot React aplikācijas var rasties nepieciešamība konkretāk pārbaudīt aplikācijā izveidotā koda darbību un funkcionalitāti. Par to protams jau ir padomāts un šāda iespēja ir izmantot “Why Testing Library” testēšanas rīku rakstot testēšanai paredzētus testa kodus.

“React Testing Library” nav iebūvēta React. Tā ir atsevišķa bibliotēka, kas balstās uz “DOM Testing Library” un pievieno API darbam ar React komponentiem. Projektiem, kas izveidoti ar “Create React App” kodu terminālī piemēram

npx create-react-app nosaukums

, ir iebūvēts atbalsts “React Testing Library”. Ja tas nav Jūsu gadījums, un šāds atbalsts Jūsu veidotajai aplikācijai nav pieejams, tad varat to pievienot ar npm šādi, lai to izmantotu arī savā React aplikācijā:

npm install --save-dev @testing-library/react.

Izveidosim pavisam vienkāršu React aplikācijas komponentu ar klikšķu skaitītāju, lai varētu precīzāk apskatīt testēšanas piemēru, šo kodu es esmu ierakstijis App.js failā un palaidis kā react aplikāciju ar npm start tā attēlo pavisam vienkāršu pogu uz kuras uzklikšķinot teksts izmainās norādot konkrēto klikšķu skaitu:

App.js kods:

import React from 'react';


function App() {
  const [count, setCount] = React.useState(0);


  return (
    <div>
      <p>Tu uzklikšķināji {count} reizes</p>
      <button onClick={() => setCount(count + 1)}>
        Klikšķini mani
      </button>
    </div>
  );
}


export default App;

import App from './App';
import { render, fireEvent } from '@testing-library/react';

test('renders the count', () => {
  const { getByText } = render(<App />);
  const countElement = getByText(/uzklikšķināji/i);
  expect(countElement).toBeInTheDocument();
});

test('increments the count', () => {
  const { getByText } = render(<App />);
  const buttonElement = getByText(/klikšķini mani/i);
  fireEvent.click(buttonElement);
  const countElement = getByText(/uzklikšķināji 1 reizes/i);
  expect(countElement).toBeInTheDocument();
});

cd aplikācijasnosaukums

npm test.

PASS src/App.test.js
√ renders the count (33 ms)
√ increments the count (14 ms)

Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 2.676 s, estimated 3 s
Ran all test suites related to changed files.

Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.

Kopsavilkums:

React komponentu testēšana ir svarīga, lai nodrošinātu, ka jūsu lietojumprogramma darbojas kā paredzēts un sniedz pareizu lietotāja pieredzi. Testēšana var palīdzēt atrast kļūdas un novērst tos pirms izstrādājuma izlaišanas.

React Testing Library ir viens no populārākajiem rīkiem React komponentu testēšanai. Tā mērķis ir palīdzēt jums rakstīt testus, kas līdzinās tam, kā lietotājs izmantotu jūsu lietojumprogrammu. Tas var sniegt jums lielāku pārliecību, ka jūsu lietojumprogramma darbojas kā paredzēts, kad to izmanto īsts lietotājs.

React Testing Library piedāvā dažādas metodes un rīkus, lai palīdzētu jums testēt savas komponentes. Piemēram:

• render: ļauj jums “renderēt” komponenti un pārbaudīt tā izskatu un uzvedību.
• fireEvent: ļauj jums simulēt lietotāja darbības, piemēram, klikšķināšanu uz pogas vai ievadīšanu teksta laukā.
• waitFor: ļauj jums gaidīt, līdz notiek kaut kas konkrēts, piemēram, līdz tiek parādīts kaut kas konkrēts ekrānā.

Lai sāktu testēt savas React komponentes ar React Testing Library, vispirms jums jāinstalē bibliotēka ar npm install –save-dev @testing-library/react. Pēc tam jūs varat izveidot testa failus ar .test.js paplašinājumu un sākt rakstīt testus.

Testos jūs varat izmantot iepriekš minētās metodes un citas metodes no React Testing Library, lai pārbaudītu savas komponentes. Piemēram:

import { render, fireEvent } from '@testing-library/react';
import MansKomponents from './MansKomponents';

test('attēlo komponentu', () => {
const { getByText } = render(<MansKomponents />);
expect(getByText('Sveika Pasaule')).toBeInTheDocument();
});

test('apstrādā pogas klikšķināšanu', () => {
const apstradatKlikscinajumu = jest.fn();
const { getByText } = render(<MansKomponents onClick={apstradatKlikscinajumu} />);
fireEvent.click(getByText('Klikšķini mani'));
expect(apstradatKlikscinajumu).toHaveBeenCalled();
});

Šajā piemērā mēs izveidojām divus testus. Pirmais tests pārbauda, vai mūsu komponents tiek pareizi “renderots” un vai tas satur tekstu “Sveika Pasaule”. Otrajā testā mēs pārbaudām, vai mūsu komponents pareizi apstrādā klikšķināšanu uz pogas “Klikšķini mani”.

Testu rakstīšana var būt sarežģīta un prasa pieredzi. Tomēr tas ir svarīgs solis, lai nodrošinātu jūsu lietojumprogrammas kvalitāti un uzticamību. Ieteicams veltīt laiku testu rakstīšanai un to regulārai izpildei.

Nobeigumā:

React Testing Library piedāvā daudzas metodes un rīkus, lai palīdzētu jums testēt savas React komponentes. Lūk dažas no populārākajām metodēm:

• render: ļauj jums “renderēt” komponenti un pārbaudīt tā izskatu un uzvedību.
• fireEvent: ļauj jums simulēt lietotāja darbības, piemēram, klikšķināšanu uz pogas vai ievadīšanu teksta laukā.
• waitFor: ļauj jums gaidīt, līdz notiek kaut kas konkrēts, piemēram, līdz tiek parādīts kaut kas konkrēts ekrānā.
• screen: nodrošina piekļuvi dažādām metodēm, lai atrastu elementus ekrānā.
• within: ļauj jums meklēt elementus noteiktā elementa ietvaros.

React Testing Library arī piedāvā dažādas metodes, lai atrastu elementus ekrānā. Lūk dažas no populārākajām metodēm:

• getByText: atrod elementu pēc tā teksta.
• getByLabelText: atrod formu elementu pēc tā teksta.
• getByPlaceholderText: atrod ievades elementu pēc tā viettura teksta.
• getByTestId: atrod elementu pēc tā data-testid atribūta.

Šīs ir tikai dažas no metodēm, ko piedāvā React Testing Library. Lai uzzinātu vairāk par šo bibliotēku un tajā pieejamajiem rīkiem un metodēm, apmeklējiet oficiālo mājaslapu:

https://testing-library.com/docs/react-testing-library/intro/