Test Renderer
Importing
import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm
Επισκόπηση
Αυτό το πακέτο παρέχει ένα React renderer το οποίο μπορεί να χρησιμοποιηθεί για να κάνει render React components σε “καθαρά” JavaScript αντικείμενα, χωρίς να εξαρτώνται από το DOM ή απο κάποιο native mobile περιβάλλον. μπορεί να χρησιμοποιηθεί για να γινουν render React components σε “καθαρά” JavaScript αντικείμενα, χωρίς να εξαρτώνται απο το DOM ή απο κάποιο native mobile περιβάλλον.
Ουσιαστικά, αυτό το πακέτο καθιστά εύκολο να πάρετε ένα snapshot του view hierarchy της πλατφόρμας (όμοιο με ένα DOM tree) όπως αυτό γίνεται render από ένα React DOM ή React Native component χωρίς τη χρήση ενός browser ή του jsdom.
Παράδειγμα:
import TestRenderer from 'react-test-renderer';
function Link(props) {
return <a href={props.page}>{props.children}</a>;
}
const testRenderer = TestRenderer.create(
<Link page="https://www.facebook.com/">Facebook</Link>
);
console.log(testRenderer.toJSON());
// { type: 'a',
// props: { href: 'https://www.facebook.com/' },
// children: [ 'Facebook' ] }
Μπορείτε να χρησιμοποιήσετε το snapshot testing του Jest για να σώσετε αυτόματα ένα αντίγραφο του JSON tree σε ένα αρχείο και να ελέγξετε στα τεστς σας πως αυτό δεν έχει αλλάξει: Μάθετε περισσότερα.
Ακόμα μπορείτε να κάνετε traverse το output για να βρείτε συγκεκριμένα nodes και να κάνετε assertions για αυτά. .
import TestRenderer from 'react-test-renderer';
function MyComponent() {
return (
<div>
<SubComponent foo="bar" />
<p className="my">Hello</p>
</div>
)
}
function SubComponent() {
return (
<p className="sub">Sub</p>
);
}
const testRenderer = TestRenderer.create(<MyComponent />);
const testInstance = testRenderer.root;
expect(testInstance.findByType(SubComponent).props.foo).toBe('bar');
expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
TestRenderer
TestRenderer instance
testRenderer.toJSON()
testRenderer.toTree()
testRenderer.update()
testRenderer.unmount()
testRenderer.getInstance()
testRenderer.root
TestInstance
testInstance.find()
testInstance.findByType()
testInstance.findByProps()
testInstance.findAll()
testInstance.findAllByType()
testInstance.findAllByProps()
testInstance.instance
testInstance.type
testInstance.props
testInstance.parent
testInstance.children
Παραπομπή
TestRenderer.create()
TestRenderer.create(element, options);
<<<<<<< HEAD
Δημιούργησε ένα TestRenderer
instance με το React element παράμετρο. Δε χρησιμοποιεί το πραγματικό DOM, αλλά παρόλαυτα κάνει render το component tree στη μνήμη ώστε να μπορείς να κάνεις assertions για αυτό. Το επιστρεφόμενο instance έχει τις επόμενες μεθόδους και ιδιότητες.
=======
Create a TestRenderer
instance with the passed React element. It doesn’t use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. Returns a TestRenderer instance.
de497e250340ff597ce4964279369f16315b8b4b
TestRenderer.act()
TestRenderer.act(callback);
Similar to the act()
helper from react-dom/test-utils
, TestRenderer.act
prepares a component for assertions. Use this version of act()
to wrap calls to TestRenderer.create
and testRenderer.update
.
import {create, act} from 'react-test-renderer';
import App from './app.js'; // The component being tested
// render the component
let root;
act(() => {
root = create(<App value={1}/>)
});
// make assertions on root
expect(root.toJSON()).toMatchSnapshot();
// update with some different props
act(() => {
root.update(<App value={2}/>);
})
// make assertions on root
expect(root.toJSON()).toMatchSnapshot();
testRenderer.toJSON()
testRenderer.toJSON()
Επιστρέφει ενα αντικείμενο που αντιπροσωπευει τo rendered δέντρο. Αυτό το δέντρο περιέχει platform-specific κόμβους όπως το <div>
και το <View>
και τα props τους, αλλά δεν περιέχει user-written components. Κάτι το οποίο είναι πολύ χρησιμο για snapshot testing.
testRenderer.toTree()
testRenderer.toTree()
<<<<<<< HEAD
Επιστρέφει ενα αντικείμενο που αντιπροσωπευει τo rendered tree. Εν αντιθέσει με το toJSON()
, αυτή η απεικόνιση είναι πιο λεπτομερής σε σχέση με αυτή του toJSON()
, και περιέχει τα user-written components. Πιθανότατα δε χρειάζεστε αυτή την μέθοδο, εκτός κι αν γράφετε τη δικιά σας assertion βιβλιοθήκη κάνοντας χρήση του test renderer.
Πιθανότατα δε χρειάζεστε αυτή την μέθοδο, εκτός και εαν γράφετε τη δικιά σας assertion βιβλιοθήκη κάνοντας χρήση του test renderer.
=======
Return an object representing the rendered tree. The representation is more detailed than the one provided by toJSON()
, and includes the user-written components. You probably don’t need this method unless you’re writing your own assertion library on top of the test renderer.
941f54180ef5e652221f54ef6d1f6f2e9e063597
testRenderer.update()
testRenderer.update(element)
Κάνει re-render το δέντρο που βρίσκεται στη μνήμη με ένα νέο root element. Αυτό προσομοιώνει ένα React update στο root. Αν το νέο element έχει τον ίδιο τυπο και key με το προηγούμενο element, το δέντρο θα γινει update; διαφορετικά, θα γίνει re-mount σε ένα νέο δέντρο.
testRenderer.unmount()
testRenderer.unmount()
Κάνει unmount το δέντρο που βρίσκεται στη μνήμη, προκαλώντας τα κατάλληλα lifecycle events.
testRenderer.getInstance()
testRenderer.getInstance()
Επιστρέφει το instance που αντιστοιχεί στο root element, εαν ειναι διαθέσιμο. Δε θα δουλέψει αν το root element είναι function component επείδη αυτά δεν έχουν instances.
testRenderer.root
testRenderer.root
Επιστρέφει το root “test instance” αντικείμενο το οποίο είναι χρησιμο για να κάνετε assertions σχετικά με συγκεκριμένα nodes στο δέντρο. Μπορείτε να το χρησιμοποιήσετε για να βρείτε άλλα “test instances” πιο κάτω στην “ιεραρχία”.
testInstance.find()
testInstance.find(test)
Βρίσκει ένα test instance για το οποίο το test(testInstance)
επιστρέφει true
. Εάν το test(testInstance)
δεν επιστρέφει true
για ακριβώς ένα test instance, θα πετάξει error.
testInstance.findByType()
testInstance.findByType(type)
Βρίσκει ένα test instance με το παρεχόμενο type
. Εαν δεν υπάρχει ακριβώς ένα test instance με το παρεχόμενο type
, θα πετάξει error.
testInstance.findByProps()
testInstance.findByProps(props)
Βρίσκει ένα test instance με τα παρεχόμενα props
. Αν δεν υπάρχει ενα test instance με τα παρεχόμενα props
, θα πετάξει error.
testInstance.findAll()
testInstance.findAll(test)
Βρίσκει όλα τα test instances για τα οποία test(testInstance)
επιστρέφει true
.
testInstance.findAllByType()
testInstance.findAllByType(type)
Βρίσκει όλα τα test instances με το παρεχόμενο type
.
testInstance.findAllByProps()
testInstance.findAllByProps(props)
Βρίσκει όλα τα test instances με τα παρεχόμενα props
.
testInstance.instance
testInstance.instance
Το component instance που αντιστοιχεί σε αυτό το test instance. Είναι διαθέσιμο μόνο για class components, καθώς τα function components δεν έχουν instances. Κάνει match με το this
value μέσα σε ένα component.
testInstance.type
testInstance.type
Το component type που αντιστοιχεί σε αυτό το test instance. Για παράδειγμα, ένα <Button />
component έχει type Button
.
testInstance.props
testInstance.props
Τα props που αντιστοιχούν σε αυτό το test instance. Για παράδειγμα, το <Button size="small" />
component έχει {size: 'small'}
σαν props.
testInstance.parent
testInstance.parent
Το test instance του πατέρα για αυτό το test instance.
testInstance.children
testInstance.children
Τα test instances των παιδιών για αυτό το test instance.
Ιδέες
Μπορείτε να περάσετε μια createNodeMock
συνάρτηση στο TestRenderer.create
σαν μια επιλογή, η οποία επιτρέπει custom mock refs.
Το createNodeMock
δέχεται το παρόν element και πρέπει να επιστρέψει ένα mock ref αντικείμενο.
Αυτό ειναι χρησιμο όταν θες να τεστάρεις ενα component που βασίζεται σε refs.
import TestRenderer from 'react-test-renderer';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.input = null;
}
componentDidMount() {
this.input.focus();
}
render() {
return <input type="text" ref={el => this.input = el} />
}
}
let focused = false;
TestRenderer.create(
<MyComponent />,
{
createNodeMock: (element) => {
if (element.type === 'input') {
// mock a focus function
return {
focus: () => {
focused = true;
}
};
}
return null;
}
}
);
expect(focused).toBe(true);