Ich versuche einige Unit-Tests, ich habe eine Sandbox mit einem gefälschten Beispiel erstellt https://codesandbox.io/s/wizardly-hooks-32w6l (in Wirklichkeit habe ich ein Formular)
class App extends React.Component {
constructor(props) {
super(props);
this.state = { number: 0 };
}
handleSubmit = (number1, number2) => {
this.setState({ number: this.handleMultiply(number1, number2) })
}
handleMultiply = (number1, number2) => {
return number1 * number2
}
render() {
const { number } = this.state;
return (
<div className="App">
<form onSubmit={e => this.handleSubmit(3, 7)}>
<input type="submit" name="Submit" value="Multiply" />
</form>
<Table number={number} />
</div>
);
}
}
export default App;
Meine ursprüngliche Idee war es also, die Multiplikationsfunktion zu testen. Und das getan, was offensichtlich nicht funktioniert
import App from "../src/App";
test("Multiply", function() {
const expected = 21;
const result = App.handleMultiply(3, 7);
expect(result).toBe(expected);
});
Ich bekomme
_App.default.handleMultiply ist keine Funktion
Ist mein Ansatz richtig? Wenn ja, wie teste ich dann die Funktionen? Sonst sollte ich aus Anwendersicht statt auf interne Funktionen testen (das lese ich)? Sollte ich die Ausgabe auf dem Bildschirm testen (ich halte das nicht für sinnvoll)?
javascript
reactjs
jestjs
user3808307
quelle
quelle
Antworten:
Sie können die instance () -Methode von verwenden
enzyme
, um die Instanz von React Component abzurufen. Rufen Sie dann diehandleMultiply
Methode direkt auf und machen Sie die Zusicherung dafür. Wenn diehandleMultiply
Methode einen Nebeneffekt oder sehr komplizierte Berechnungen hat, müssen Sie einen einfachen verspotteten Rückgabewert dafür erstellen. Es wird eine isolierte Testumgebung für diehandleSubmit
Methode erstellt. Dies bedeutet, dass diehandleSubmit
Methode nicht vom Rückgabewert der tatsächlichen Implementierung derhandleMultiply
Methode abhängt .Z.B
app.jsx
::table.jsx
::app.test.jsx
::Unit-Testergebnisse mit Abdeckungsbericht:
Quellcode: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59796928
quelle