Ich bin ziemlich neu zu testen, also vielleicht überlege ich Dinge zu testen, die nicht getestet werden sollten.So testen Sie den Zustand von React/Flux-Komponenten?
Ich habe eine Top-Level-Komponente 'App', die ihren Status aus einem Geschäft erhält, das über eine Ajax-Anforderung beim Mounten von Komponenten aktualisiert wird. Ich dachte, ein nützlicher Test wäre, zu überprüfen, dass der Status der App-Komponente nicht leer ist, nachdem die Ajax-Anfrage (eine Aktion) gemacht wurde. Gibt es eine Möglichkeit, den Zustand einer Komponente vor und nach einer Aktion zu testen?
Von dem, was ich verstehe, Sie nicht die tatsächliche Funktionalität Ihrer Anwendung testen, sondern Mocks der Komponenten und ihrer Funktionalität und dann testen. Wenn das funktioniert, gehen Sie davon aus, dass Ihre echte Anwendung funktionieren muss. Ich bin mir nicht sicher, wie man eine Komponente vortäuscht, die mit Aktionen und Speichern verknüpft ist.
Wenn ich nicht für den Staat testen sollte, wofür wäre es gut, eine Komponente zu testen? Bisher gibt es noch keine Benutzerinteraktionen. Hier
ist der Komponentencode ohne den Laden/Aktionscode:
import React from 'react';
import {Component} from 'react';
import {FETCH_DATA} from '../actions/types';
import MapStore from '../stores/MapStore';
import dispatcher from '../dispatcher';
import * as MapActions from '../actions/index';
export default class App extends Component {
constructor() {
super();
this.state = {
meteorites: MapStore.getAll()
}
// Bind methods to 'App'
this.updateData = this.updateData.bind(this);
}
componentWillMount() {
// fetch initial meteorites on page load
this.fetchData();
// if change event was emitted, re-render component
MapStore.on('change', this.updateData);
}
fetchData() {
// Kick off a fetchData action (api request)
MapActions.fetchData();
}
componentWillUnmount() {
MapStore.removeListener('change', this.updateData);
}
updateData() {
this.setState({
meteorites: MapStore.getAll()
});
}
render() {
//console.log("state", this.state.meteorites);
return (
<div className="app-container">Meteorite Landings</div>
);
}
}