We want to hear from you!Take our 2020 Community Survey!

Utilitats de Test

Importació

import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 amb npm

Resum

ReactTestUtils facilita provar els components React en el marc de proves que escullis. A Facebook utilitzem Jest per als test de JavaScript. Consulta a la web de Jest les guies d’aprenentatge de Jest per React per començar a aprendre’n.

Nota:

Et recomanem que facis servir la React Testing Library que està dissenyada per escriure tests pels teus components i que aquests siguin provats de la mateixa manera que els faran servir els usuaris finals.

Per versions de React <= 16, la llibreria Enzyme fa que sigui fàcil afirmar, manipular i recórrer la sortida dels components de React.

Referència

act()

Es fa servir per preparar un component per afirmacions. S’embolcalla el codi dins d’una crida act() que renderitzarà i actualitzarà el component que porta dins seu. Això fa que el test s’ajusti a la manera com funciona React en el navegador.

Nota

Si utilitzes react-test-renderer, també et proporciona una exportació act que es comporta de la mateixa manera.

Per exemple, diguem que tenim aquest component Counter:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>
          Click me
        </button>
      </div>
    );
  }
}

Així és com pots provar-lo:

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';import Counter from './Counter';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

it('can render and update a counter', () => {
  // Test del primer render i componentDidMount
  act(() => {    ReactDOM.render(<Counter />, container);  });  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 0 times');
  expect(document.title).toBe('You clicked 0 times');

  // Test del segon  render i componentDidUpdate
  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('You clicked 1 times');
  expect(document.title).toBe('You clicked 1 times');
});
  • No oblidis que l’enviament d’esdeveniments DOM només funciona quan el contenidor DOM s’afegeix al document. Pots utilitzar una biblioteca com ara la Biblioteca de Test React per reduir el codi redundant.
  • El document receptes conté més detalls sobre com es comporta act(), amb exemples i formes de com utilitzar-lo.

mockComponent()

mockComponent(
  componentClass,
  [mockTagName]
)

Passa un mòdul de prova a aquest mètode per afegir-li mètodes útils que li permetin ser utilitzat com a component fictici de React. En lloc de ser renderitzat com és habitual, el component es convertirà en un simple <div> (o en una altra etiqueta si es passa mockTagName) que contindrà tots els fills proporcionats.

Nota:

mockComponent() és una API antiga. En lloc seu, et recomanem fer servir jest.mock().


isElement()

isElement(element)

Retorna true si element és qualsevol tipus d’element de React.


isElementOfType()

isElementOfType(
  element,
  componentClass
)

Retorna true si element és un element de React del tipus componentClass.


isDOMComponent()

isDOMComponent(instance)

Retorna true si instance és un component del DOM (com ara <div> or <span>).


isCompositeComponent()

isCompositeComponent(instance)

Retorna true si instance és un component definit per l’usuari, com ara una classe o una funció.


isCompositeComponentWithType()

isCompositeComponentWithType(
  instance,
  componentClass
)

Retorna true si instance és un component del tipus componentClass.


findAllInRenderedTree()

findAllInRenderedTree(
  tree,
  test
)

Recorre tots els components del tree i acumula tots els components a on test(component) és true. Això no és gaire útil per si mateix, però es fa servir com a primitiva per a altres utilitats de test.


scryRenderedDOMComponentsWithClass()

scryRenderedDOMComponentsWithClass(
  tree,
  className
)

Troba tots els elements DOM dels components de l’arbre renderitzat que són components DOM i tenen el nom de classe className.


findRenderedDOMComponentWithClass()

findRenderedDOMComponentWithClass(
  tree,
  className
)

Igual que scryRenderedDOMComponentsWithClass() però espera que hi hagi un resultat, i retorna aquest resultat, o bé llança una excepció si hi ha un nombre de coincidències diferent a u.


scryRenderedDOMComponentsWithTag()

scryRenderedDOMComponentsWithTag(
  tree,
  tagName
)

Cerca tots els elements DOM dels components del tree renderitzat que siguin components DOM i que tinguin el nom de l’etiqueta tagName.


findRenderedDOMComponentWithTag()

findRenderedDOMComponentWithTag(
  tree,
  tagName
)

Igual que scryRenderedDOMComponentsWithTag() però espera que hi hagi un resultat, i retorna aquest resultat, o llança una excepció si hi ha un nombre de coincidències diferent a u.


scryRenderedComponentsWithType()

scryRenderedComponentsWithType(
  tree,
  componentClass
)

Troba totes les instàncies de components del tipus componentClass.


findRenderedComponentWithType()

findRenderedComponentWithType(
  tree,
  componentClass
)

Igual que scryRenderedComponentsWithType() però espera que hi hagi un resultat, i retorna aquest resultat, o llança una excepció si hi ha un nombre de coincidències diferent a u.


renderIntoDocument()

renderIntoDocument(element)

Renderitza un element React en un node DOM separat del document. Aquesta funció requereix un DOM. És equivalent a:

const domContainer = document.createElement('div');
ReactDOM.render(element, domContainer);

Nota:

Hauràs de tenir window, window.document i window.document.createElement disponible globalment abans que importis React. Si no és així, React creurà que no pot accedir al DOM i els mètodes com setState no funcionaran.


Altres Utilitats

Simulate

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

Simula un enviament d’esdeveniments en un node DOM amb dades d’esdeveniments eventData, que són opcionals.

Simulate té un mètode per a cada esdeveniment que React entén.

Clicant un element

// <button ref={(node) => this.button = node}>...</button>
const node = this.button;
ReactTestUtils.Simulate.click(node);

Canviant el valor d’un camp d’entrada i després prement RETORN.

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

Nota

Hauràs de proporcionar qualsevol propietat d’esdeveniments que estiguis utilitzant en el component (p. ex. keyCode, which, etc.) perquè React no en crearà cap d’aquestes per tu.


Is this page useful?Edit this page