Biblioteca React Testing: apreneu els conceptes bàsics

Bloc

Biblioteca React Testing: apreneu els conceptes bàsics

Biblioteca React Testing: apreneu els conceptes bàsics

Fa uns mesos em van contractar per ser el provador d’un Reacciona lloc web. El problema? Tenia poca experiència amb React i seguia la documentació de la prova de React, de Enzim i React Testing Library va ser força complicat. Així que, després d’entendre tot això, vaig decidir fer aquest tutorial.



Una altra cosa important a dir, vaig intentar utilitzar Enzyme per fer les proves, però això no va ser suficient per fer-ho fàcilment. No va ser més fàcil de llegir que React Testing Library, per això el vaig triar al final.

Introducció a la sintaxi bàsica

Per fer el És informe d'errors fàcil de llegir, tenim tres nivells de descripcions a nameOfComponent.test.js - per referir-se al component, el describe (per etiquetar un grup de proves segons algun context) i el it (que descriu a què es refereix aquesta prova específica i el grup d’assercions (fet amb expect)).



Aleshores tenim la funció render ** **, que és un mètode que posa aquest component al Jest DOM i el posa a renderResult. Això és el que farem servir per fer afirmacions. El render l'argument és un element React amb els seus respectius accessoris. En aquest primer exemple de codi, he introduït els accessoris mínims necessaris per a un DropDown vàlid mitjançant patrons de disseny WAI-ARIA.

I, finalment, tenim el expects ** ** amb dues consideracions:



  • El punter a un element del DOM; un element HTML.
  • L’afirmació de ToBe.

Aquí teniu l’exemple:

describe('DropDown basic props tests', () => { it('Minimal props DropDown', () => { const renderResult = render( ); expect(resultadoDoRender.getByText('lab1')).toBeInTheDocument(); });

descàrrega de la cartera mainnet g999

Exemple d'informe amb 'describe i això

Què és renderResult?

console.log (RenderResult)

TK (ThingYouWant ToBeSure) aquesta xerrada tecnològica és una brossa? La millor manera de saber què passa com a argument és anar a console.log (ThingYouWant ToBeSure) i comprovar la secció de sortida de VSCode terminal , perquè la secció terminal pot ometre algunes coses importants.

El console.log(renderResult) és un objecte amb diversos mètodes. Un d’ells és el contenidor que retorna el DIV i el HTMLBodyElement, que té el nostre DropDown component a l'interior.

renderResult proporciona mètodes que faciliten la cerca dels elements al DOM. És per això que necessitem els mètodes get, també coneguts com a consultes, que es descriuen a API React Testing Library .

API de consulta

console.log (renderResult.getByText (lab1))

Com que els fills de l'etiqueta són un element d'etiqueta en aquest component, la cadena rotulo es troba al document. Ho podem veure a container.innerHTML console.log.

Per tant, el expect(renderResult.getByText(lab1)).toBeInTheDocument() tornarà cert.

Accessoris pendents de l’element etiqueta

El getByText la consulta és apropiada per fer una afirmació en una cadena única que apareix visualment al document HTML. Aquí teniu alguns exemples més:

console.log (renderResult.container)

El renderResult.container retorna un punter a un element DOM i tenim accés a l'API DOM per buscar els altres nodes relacionats, com ara aquestes consultes:

.getElementsByTagName(span)[0][textContent]

Obtenim el text dels nens dins de la primera etiqueta de span.

.getElementsByTagName(div)[0][id]

El id des del primer div.

.getElementsByTagName(button)[0].getAttribute(aria-label)

El aria-label contingut del primer button.

.getElementsByClassName(Extra)[0]

Primer Element amb una classe anomenada Extra.

.getElementsByTagName(div)[1][classList].contains(checkable)

Si és al segon div és ClassList que conté una classe verificable.

Utilitzant només aquests exemples, podria fer totes les afirmacions necessàries per a 12 components del patró WAI-ARIA: casella de selecció, entrada de data, baixada, ràdio, botó, grup de botons, taula, pestanyes, llista de selecció múltiple, etc. No obstant això, això no s'aplica a tot tipus d’atrezzo.

Història, enrutador i formularis

A continuació, es mostra un exemple d’enllaç i de prova de consulta de cerca d’un enllaç:

import { render, fireEvent } from 'react-testing-library'; import { Router } from 'react-router-dom'; import { createMemoryHistory } from 'history'; /*And also the imports related to your component*/ it('link prop validation', () => { const history = createMemoryHistory({ initialEntries: ['/'] }); const renderResult = render( Home ); fireEvent.click(RenderResult.getByText('Home')); expect(history.location.pathname).toBe('/example'); }); it('query prop validation', () => { const history = createMemoryHistory({ initialEntries: ['/'] }); const renderResult = render( Home ); fireEvent.click(RenderResult.getByText('Home')); expect(history.location.search).toBe('?author=Raissa'); expect(history.location.pathname).toBe('/'); });

En ambdós casos hem d’utilitzar un esdeveniment de clic per impulsar aquest nou estat al nostre memoryHistory i que es faci la consulta a location.search. Per fer clic, fem servir getByText(Home) per fer una referència a l'element span.

És important recordar que l'esdeveniment de clic es propaga a l'element d'enllaç (els seus pares). És per això que el clic activa els mètodes d’enllaç i de consulta, però el focus en el mateix context no. Ara, analitzem la història:

Per això, deduïm que la validació d’un component d’enllaç és:

fireEvent.click(RenderResult.getByText(Home)); expect(history.location.pathname).toBe(/example);

I per provar els canvis dels paràmetres de cerca:

fireEvent.click(RenderResult.getByText(Home)); expect(history.location.search).toBe(?author=Raissa); expect(history.location.pathname).toBe(/);

Si no ho sabeu i no feu servir React Router, us suggerim que comenceu a utilitzar-lo.

TK és útil ajudar-vos a enllaçar amb un article en portuguès? Una altra cosa que recomano és que utilitzeu Formik per als formularis. Aquí teniu un article sobre Formik (en portuguès).

Tot i això, Formik també exigeix ​​la seva pròpia consideració en les proves:

it('withFormik true Checkbox renders fine', () => { const RenderResult = render( ); expect(RenderResult.getByText('Necessary')).toBeInTheDocument(); expect(RenderResult.container.getElementsByTagName('form')[0]).toBeDefined(); });

Es tracta de dues validacions simples que garanteixen que la renderització no es bloquegi. Tanmateix, podeu validar altres valors d'atributs de Form etiqueta, com els exemples que vam fer abans.

Esdeveniments d’activació i ús del llibre de contes

Els esdeveniments d’activació demanen dues consideracions. Quin element HTML heu d'utilitzar per provocar l'esdeveniment i si l'esdeveniment té alguns paràmetres com un input.

Els accessoris de funcions com onClick, onBlur, onKeyDown, etc. haurien d'estar ben documentats, de manera que sabem quin element HTML són els seus oients. El comprovador pot escriure un codi de prova independentment de la implementació del component, perquè hi ha esdeveniments, com el focus, que no es propaguen al pare.

Per identificar fàcilment l’element HTML, bàsicament és el mateix que abans: l’ús de console.log - per fer les expectatives. Per buscar quins esdeveniments utilitzen i anomenen la funció prop, es fa servir una idea Llibre de contes documentar el component aïlladament, el seu aspecte i el seu comportament. Això farà que les proves siguin molt reals.

Exemples d'esdeveniments de disparació

Sempre és bo recordar que depèn del vostre component. Així doncs, aquí ens centrarem en l’esdeveniment, no en el component.

Feu clic al botó sobre el text de la extensió.

const onClick = jest.fn(); fireEvent.click(RenderResult.getByText(label)); expect(onClick).toHaveBeenCalled();

Passeu el cursor per mostrar contingut, com en una descripció emergent.

fireEvent.focus(RenderResult.getByLabelText(Label)); expect(RenderResult.getByText(TooltipContent)).toBeInTheDocument()

Feu clic a l'opció no seleccionada i a una opció seleccionada a la llista de selecció múltiple.

fireEvent.click(RenderResult.getByText(option 1)); expect(SelectionFunc).toHaveBeenCalled(); fireEvent.click(RenderResult.getByText(option 2)); expect(UnselectionFunc).toHaveBeenCalled();

Feu clic per seleccionar l'opció i, a continuació, feu clic per enviar-la.

fireEvent.click(RenderResult.getByText(option 1)); fireEvent.click( RenderResult.container.getElementsByTagName(button)[0] ); expect(onChange).toHaveBeenCalled();

Inserir una data en un DateInput trucar al seu onChange funció simulada.

moneda de reserva digital (DRC)
fireEvent.change(RenderResult.getByLabelText(label), { target: { value: 2019–06–25 } }); expect(onChange).toBeCalled();

a Be’s

He utilitzat només els de sota, però n’hi ha molts d’altres.

  • toBeInTheDocument(): S'utilitza per afirmar el text que es troba al DOM. Paràgrafs, etiquetes de botons, consells, eines de text, advertències de contingut buit, etc.
  • toBe(someString) - per comprovar si existeix una cadena a l’element HTML al qual faig referència a getMethods. Si alguna cosa de l’espera és ‘===’, una altra cosa a toBe serà cert.
  • toBeDefined() - per comprovar si hi ha alguna cosa = = indefinit. El cas més utilitzat és quan una classe, que només existeix perquè he passat un punt booleà com: dark, noStyle, big, small, es troba a la llista de classes d'elements .
  • toBeCalled() - s'utilitza per provar la trucada de funcions després de disparar Esdeveniments.
  • ToHaveBeenCalled(), ToHaveBeenCalledTimes() i ToHaveBeenCalledWith() són variacions importants.
  • toMatchSnapshot() - En alguns components que són més complexos, prefereixo inicialitzar amb la prova d'instantànies i aquesta és l'afirmació específica d'aquest cas. Per exemple:
it(Match Snapshot Button, () => { const RenderResult = render(Hello); expect(RenderResult.getByText(Hello)).toBeInTheDocument(); expect(RenderResult).toMatchSnapshot(); });

Més informació sobre proves instantànies.

I més Jest espera.

Dependències i configuració de la prova

He fet totes les proves només amb aquesta importació i ja les hem comentat abans:

import React from react; import Component, { ComponentGroup } from .; import { render, fireEvent } from react-testing-library; import { Router } from react-router-dom; import { createMemoryHistory } from history; import { Form, Formik } from formik;

Al fitxer de configuració src / setupTests.js, l’important és:

import react-testing-library/cleanup-after-each;

Per garantir que cada prova no interfereixi amb la següent (idempotents), perquè els arbres de reacció muntats amb render es desmuntaran:

import jest-dom/extend-expect;

Necessari per a algunes afirmacions específiques:

import mutationobserver-shim;

Algunes proves necessiten un MutationObserver. El modal és un exemple del nostre component.

Element.prototype.scrollIntoView = () => {};

A la llista de selecció múltiple calia afegir un scrollIntoView funció de simulació al DOM, que no existeix per defecte.

const originalConsoleError = console.error; console.error = message => { if (/(Failed prop type)/.test(message)) { throw new Error(message); } originalConsoleError(message); };

Això fa que l’advertència del tipus d’atrezzo aparegui com a error de prova.

devDependencies a /package.json:

jest-dom: 3.2.2, jsdoc: 3.5.5, mutationobserver-shim: 0.3.3, react-testing-library: 7.0.0

#reactjs #javascript