{"componentChunkName":"component---src-templates-docs-js","path":"/docs/test-utils.html","result":{"data":{"markdownRemark":{"html":"

Importazione

\n
import ReactTestUtils from 'react-dom/test-utils'; // ES6\nvar ReactTestUtils = require('react-dom/test-utils'); // ES5 con npm
\n

Panoramica

\n

ReactTestUtils rende semplice testare i componenti React all’interno del framework di test che preferisci. In Facebook usiamo Jest per scrivere test in JavaScript. Impara come utilizzare Jest tramite il sito ufficiale React Tutorial.

\n
\n

Nota:

\n

Suggeriamo l’utilizzo di React Testing Library, che è una libreria concepita per abilitare e favorire la scrittura di test che simulano il reale utilizzo dei componenti.

\n

Per le versioni di React <= 16, la libreria Enzyme semplifica le operazioni di verifica, manipolazione ed analisi dell’output dei tuoi componenti.

\n
\n\n

Riferimento

\n

act()

\n

Per preparare un componente per le verifiche, racchiudi il codice che lo renderizza e lo aggiorna all’interno di una chiamata act(). Questo permette di simulare un comportamento che si avvicina a quello reale di React.

\n
\n

Nota

\n

Se utilizzi react-test-renderer, hai a disposizione un modulo act che funziona allo stesso modo.

\n
\n

Ad esempio, prendiamo in considerazione il seguente componente Counter:

\n
class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {count: 0};\n    this.handleClick = this.handleClick.bind(this);\n  }\n  componentDidMount() {\n    document.title = `Hai cliccato ${this.state.count} volte`;\n  }\n  componentDidUpdate() {\n    document.title = `Hai cliccato ${this.state.count} volte`;\n  }\n  handleClick() {\n    this.setState(state => ({\n      count: state.count + 1,\n    }));\n  }\n  render() {\n    return (\n      <div>\n        <p>Hai cliccato {this.state.count} volte</p>\n        <button onClick={this.handleClick}>\n          Cliccami\n        </button>\n      </div>\n    );\n  }\n}
\n

Possiamo testarlo in questo modo:

\n
import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { act } from 'react-dom/test-utils';import Counter from './Counter';\n\nlet container;\n\nbeforeEach(() => {\n  container = document.createElement('div');\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  document.body.removeChild(container);\n  container = null;\n});\n\nit('can render and update a counter', () => {\n  // Testa il primo render e componentDidMount\n  act(() => {    ReactDOM.createRoot(container).render(<Counter />);  });  const button = container.querySelector('button');\n  const label = container.querySelector('p');\n  expect(label.textContent).toBe('Hai cliccato 0 volte');\n  expect(document.title).toBe('Hai cliccato 0 volte');\n\n  // Testa il secondo render e componentDidUpdate\n  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('Hai cliccato 1 volte');\n  expect(document.title).toBe('Hai cliccato 1 volte');\n});
\n\n
\n

mockComponent()

\n
mockComponent(\n  componentClass,\n  [mockTagName]\n)
\n

Passare il mock di un componente a questo metodo consente di migliorarlo, mettendo a disposizione delle funzionalità che permettono di utilizzare quest’ultimo come un componente React base. Il componente diventerà quindi un semplice <div> (o un altro tag se è presente mockTagNme), che conterrà degli eventuali componenti figli.

\n
\n

Nota:

\n

mockComponent() è un’API legacy. Raccomandiamo l’utilizzo di jest.mock().

\n
\n
\n

isElement()

\n
isElement(element)
\n

Ritorna true se element è un qualsiasi componente React.

\n
\n

isElementOfType()

\n
isElementOfType(\n  element,\n  componentClass\n)
\n

Ritorna true se element è un componente React di tipo componentClass.

\n
\n

isDOMComponent()

\n
isDOMComponent(instance)
\n

Ritorna true se instance è un componente DOM (come un <div> o uno <span>).

\n
\n

isCompositeComponent()

\n
isCompositeComponent(instance)
\n

Ritorna true se instance è un componente definito dall’utente, come una classe o una funzione.

\n
\n

isCompositeComponentWithType()

\n
isCompositeComponentWithType(\n  instance,\n  componentClass\n)
\n

Ritorna true se instance è un componente di tipo componentClass.

\n
\n

findAllInRenderedTree()

\n
findAllInRenderedTree(\n  tree,\n  test\n)
\n

Scorre tutti i componenti nel tree e li accumula dove test(component) è true. Questo di per sè non è molto utile, ma è utilizzato come base in altre librerie di test.

\n
\n

scryRenderedDOMComponentsWithClass()

\n
scryRenderedDOMComponentsWithClass(\n  tree,\n  className\n)
\n

Trova tutti gli elementi DOM dei componenti renderizzati, il cui nome della classe corrisponde a className.

\n
\n

findRenderedDOMComponentWithClass()

\n
findRenderedDOMComponentWithClass(\n  tree,\n  className\n)
\n

Come scryRenderedDOMComponentsWithClass() ma si aspetta un solo risultato, ritornandolo oppure generando un’eccezione in caso di più risultati.

\n
\n

scryRenderedDOMComponentsWithTag()

\n
scryRenderedDOMComponentsWithTag(\n  tree,\n  tagName\n)
\n

Trova tutti gli elementi DOM dei componenti renderizzati che corrispondo al nome specifico del tag tagName.

\n
\n

findRenderedDOMComponentWithTag()

\n
findRenderedDOMComponentWithTag(\n  tree,\n  tagName\n)
\n

Come scryRenderedDOMComponentsWithTag() ma si aspetta un solo risultato, ritornandolo oppure generando un’eccezione in caso di più risultati.

\n
\n

scryRenderedComponentsWithType()

\n
scryRenderedComponentsWithType(\n  tree,\n  componentClass\n)
\n

Trova tutte le istanze dei componenti il cui tipo è componentClass.

\n
\n

findRenderedComponentWithType()

\n
findRenderedComponentWithType(\n  tree,\n  componentClass\n)
\n

Come scryRenderedComponentsWithType() ma si aspetta un solo risultato, ritornandolo oppure generando un’eccezione in caso di più risultati.

\n
\n

renderIntoDocument()

\n
renderIntoDocument(element)
\n

Renderizza un elemento React in un nodo DOM separato, all’interno del documento. Questa funzione richiede un DOM. Equivale a:

\n
const domContainer = document.createElement('div');\nReactDOM.createRoot(domContainer).render(element);
\n
\n

Nota:

\n

Dovrai avere window, window.document e window.document.createElement disponibili globalmente prima di importare React. Altrimenti React penserà di non poter accedere al DOM, e metodi come setState non funzioneranno.

\n
\n
\n

Altre Utilities

\n

Simulate

\n
Simulate.{eventName}(\n  element,\n  [eventData]\n)
\n

Simula la generazione di un evento su un nodo DOM, con un eventData opzionale.

\n

Simulate ha un metodo per ogni evento che React supporta.

\n

Cliccare un elemento

\n
// <button ref={(node) => this.button = node}>...</button>\nconst node = this.button;\nReactTestUtils.Simulate.click(node);
\n

Cambiare il valore di un campo input e quindi premere ENTER

\n
// <input ref={(node) => this.textInput = node} />\nconst node = this.textInput;\nnode.value = 'giraffe';\nReactTestUtils.Simulate.change(node);\nReactTestUtils.Simulate.keyDown(node, {key: \"Enter\", keyCode: 13, which: 13});
\n
\n

Nota

\n

Dovrai fornire qualsiasi proprietà agli eventi che usi nel tuo componente (ad esempio, keyCode, which, etc…), visto che React non ne definisce automaticamente nessuna.

\n
\n
","frontmatter":{"title":"Test Utilities","next":null,"prev":null},"fields":{"path":"content/docs/addons-test-utils.md","slug":"docs/test-utils.html"}}},"pageContext":{"slug":"docs/test-utils.html"}},"staticQueryHashes":[]}