Test Εργαλεία

Importing

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

Επισκόπηση

Το ReactTestUtils σας δίνει τη δυνατότητα να κάνετε εύκολα test τα React components χρησιμοποιώντας το testing framework της επιλογής σας. Στο Facebook χρησιμοποιούμε το Jest για JavaScript testing χωρίς προβλήματα. Μάθετε πως να ξεκινήσετε με το Jest μέσα από το React Tutorial στη σελίδα του Jest.

Σημείωση:

Συνιστούμε τη χρήση του react-testing-library το οποίο είναι σχεδιασμένο να επιτρέπει και να ενθαρρύνει το γράψιμο tests τα οποία χρησιμοποιούν τα components με τον ίδιο τρόπο που τα χρησιμοποιούν και οι χρήστες.

Εναλλακτικά, το Airbnb έχει ανακοινώσει ενα testing utility, το Enzyme, το οποίο διευκολύνει στο assert, manipulate, και traverse του output των React Components.

act()
mockComponent()
isElement()
isElementOfType()
isDOMComponent()
isCompositeComponent()
isCompositeComponentWithType()
findAllInRenderedTree()
scryRenderedDOMComponentsWithClass()
findRenderedDOMComponentWithClass()
scryRenderedDOMComponentsWithTag()
findRenderedDOMComponentWithTag()
scryRenderedComponentsWithType()
findRenderedComponentWithType()
renderIntoDocument()
Simulate

Παραπομπές

`act()`

Για να προετοιμάσετε ένα component για assertions, κάντε wrap τον κώδικα που το εμφανίζει και κάνει updates μέσα σε μια κλήση act(). Έτσι το test σας εκτελείται παρόμοια με τον τρόπο που το React λειτουργεί στον browser.

Σημείωση

Αν χρησιμοποιείτε το react-test-renderer, αυτό περιέχει μια act η οποία συμπεριφέρεται με τον ίδιο τρόπο.

Για παράδειγμα, ας υποθέσουμε πως έχουμε το Counter component:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.title = `Κάνατε κλικ ${this.state.count} φορές`;
  }
  componentDidUpdate() {
    document.title = `Κάνατε κλικ ${this.state.count} φορές`;
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div>
        <p>Κάνατε κλικ {this.state.count} φορές</p>
        <button onClick={this.handleClick}>
          Πάτησε με
        </button>
      </div>
    );
  }
}

Δείτε πως μπορούμε να το τεστάρουμε:

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', () => {
  // Τεστάρει το πρώτο render και το 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-άρει το δεύτερο render και το componentDidUpdate
  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('Κάνατε κλικ 1 φορά');
  expect(document.title).toBe('Κάνατε κλικ 1 φορά');
});

<<<<<<< HEAD Μη ξεχνάτε πως το dispatching των DOM events λειτουργεί μόνο όταν το DOM container έχει προστεθεί στο document. Μπορείτε να χρησιμοποιήσετε μια βοηθητική βιβλιοθήκη, την react-testing-library για να μειώσετε τον boilerplate κώδικα που θα χρειαστεί να γράψετε. =======

Don’t forget that dispatching DOM events only works when the DOM container is added to the document. You can use a library like React Testing Library to reduce the boilerplate code.

<<<<<<< HEAD

The recipes document contains more details on how act() behaves, with examples and usage.

ddbd064d41d719f9ec0c2f6a4227f797a5828310
The recipes document contains more details on how act() behaves, with examples and usage.

de497e250340ff597ce4964279369f16315b8b4b

`mockComponent()`

mockComponent(
  componentClass,
  [mockTagName]
)

Περάστε ένα mocked component module σε αυτή τη μέθοδο για να της προσθέσετε χρήσιμες μεθόδους που θα της επιτρέψουν να λειτουργήσει σαν ένα dummy React component. Αντί να κάνετε render όπως συνήθως, το component θα εμφανιστεί σαν ένα <div> (ή κάποιο άλλο tag εάν του παρέχετε το mockTagName) όπου θα περιέχει όλα τα παρεχόμενα children.

Σημείωση:

<<<<<<< HEAD Το mockComponent() είναι ένα legacy API. Συνιστούμε να χρησιμοποιήσετε το shallow rendering ή το jest.mock(). ======= mockComponent() is a legacy API. We recommend using jest.mock() instead.

ddbd064d41d719f9ec0c2f6a4227f797a5828310

`isElement()`

isElement(element)

Επιστρέφει true εάν το element είναι κάποιο React element.

`isElementOfType()`

isElementOfType(
  element,
  componentClass
)

Επιστρέφει true εάν το element είναι ένα React element με τύπο React componentClass.

`isDOMComponent()`

isDOMComponent(instance)

Επιστρέφει true εάν το instance είναι ένα DOM component (όπως για παράδειγμα <div> ή <span>).

`isCompositeComponent()`

isCompositeComponent(instance)

Επιστρέφει true εάν το instance είναι ένα component που έχει ορίσει ο χρήστης, όπως ένα class ή function component.

`isCompositeComponentWithType()`

isCompositeComponentWithType(
  instance,
  componentClass
)

Επιστρέφει true εάν το instance είναι ένα component με τύπο React componentClass.

`findAllInRenderedTree()`

findAllInRenderedTree(
  tree,
  test
)

Διασχίζει όλα τα components στο tree και συλλέγει όλα τα components όπου το test(component) είναι true. Από μόνο του αυτό δεν είναι πολύ χρήσιμο, αλλά χρησιμοποιείται σαν βάση για άλλα test εργαλεία.

`scryRenderedDOMComponentsWithClass()`

scryRenderedDOMComponentsWithClass(
  tree,
  className
)

Βρίσκει όλα τα DOM elements των components στο rendered tree τα οποία είναι DOM components με όνομα κλάσης που να ταιριάζει στο className.

`findRenderedDOMComponentWithClass()`

findRenderedDOMComponentWithClass(
  tree,
  className
)

Σαν το scryRenderedDOMComponentsWithClass() αλλά περιμένει να υπάρχει ένα αποτέλεσμα, το οποίο και επιστρέφει, ή πετάει exception εάν υπάρχει οποιοσδήποτε άλλος αριθμός εκτός του ένα.

`scryRenderedDOMComponentsWithTag()`

scryRenderedDOMComponentsWithTag(
  tree,
  tagName
)

Βρίσκει όλα τα DOM elements των components στο rendered tree τα οποία είναι DOM components με tag name που να ταιριάζει στο tagName.

`findRenderedDOMComponentWithTag()`

findRenderedDOMComponentWithTag(
  tree,
  tagName
)

Όπως το scryRenderedDOMComponentsWithTag() αλλά περιμένει να υπάρχει ένα αποτέλεσμα, το οποίο και επιστρέφει, ή πετάει exception εάν υπάρχει οποιοσδήποτε άλλος αριθμός εκτός του ένα.

`scryRenderedComponentsWithType()`

scryRenderedComponentsWithType(
  tree,
  componentClass
)

Βρίσκει όλα τα instances των components με τύπο ίδιο με αυτό του componentClass.

`findRenderedComponentWithType()`

findRenderedComponentWithType(
  tree,
  componentClass
)

Όπως το scryRenderedComponentsWithType() αλλά περιμένει να υπάρχει ένα αποτέλεσμα, το οποίο και επιστρέφει, ή πετάει exception εάν υπάρχει οποιοσδήποτε άλλος αριθμός εκτός του ένα.

`renderIntoDocument()`

renderIntoDocument(element)

Έμφανίζει ένα React element σε ένα detached DOM node στο document. This function requires a DOM. Είναι αντίστοιχο με το:

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

Σημείωση:

Θα χρειαστείτε το window, το window.document και το window.document.createElement globally διαθέσιμα πριν κάνετε import το React. Διαφορετικά το React θα πιστέψει πως δεν έχει πρόσβαση στο DOM και μέθοδοι όπως το setState δε θα λειτουργούν.

Άλλα εργαλεία

`Simulate`

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

Προσομοιώστε ένα event dispatch σε ένα DOM node με προαιρετική επιλογή του eventData event data.

Το Simulate έχει μία μέθοδο για κάθε event που μπορεί να καταλάβει το React.

Κάντε κλικ σε ένα element

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

Αλλάξτε την τιμή ενός input field και ακολούθως πατήστε ENTER.

// <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});

Σημείωση

Θα χρειαστεί να παρέχετε κάθε event property που χρησιμοποιείτε στο component (π.χ. keyCode, which, etc…) καθώς το React δεν τα δημιουργεί για εσάς.

Is this page useful?Edit this page