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 howact()
behaves, with examples and usage.ddbd064d41d719f9ec0c2f6a4227f797a5828310
-
The
recipes
document contains more details on howact()
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 usingjest.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 δεν τα δημιουργεί για εσάς.