Schreiben Mokka Test Specs für Front-End-Komponente (react.js)

Question

Ich habe so viel Mühe beim Schreiben Mokka Testspezifikationen für meine Front-End-Komponenten. Meine Komponenten sehen wirklich einfach aus, haben aber keine Ahnung, wie man Testspezifikationen schreibt. Könnte mir bitte jemand dabei helfen? Jede Hilfe wird sehr geschätzt! Dank

import React from 'react'; 
 

 
//Submit handler takes the message and gives it to the callback of its parent component, ChatApp for rendering and emitting to server 
 
//Keep track of the mssage when you type and assign it to a property (text) in state 
 
class MessageForm extends React.Component { 
 
\t constructor(props) { 
 
\t \t super(props) 
 
\t \t this.changeHandler = this.changeHandler.bind(this); 
 
\t \t this.handleSubmit = this.handleSubmit.bind(this); 
 
\t \t this.state = {text: ''} 
 
\t } 
 

 
\t handleSubmit(e) { 
 
\t \t e.preventDefault(); 
 
\t \t var message = { 
 
\t \t \t user: this.props.user, 
 
\t \t \t text: this.state.text, 
 
\t \t \t language: this.props.language, 
 
\t \t \t id: 1 
 
\t \t } 
 
\t \t //Connects to ChatApp component 
 
\t \t this.props.onMessageSubmit(message); 
 
\t \t //Set the state of the text to empty string so that next inputted text value can be hanled in the state 
 
\t \t this.setState({ text: '' }) 
 
\t } 
 

 
\t changeHandler(e) { 
 
\t \t //change the state of text to inputted value 
 
\t \t this.setState({ text: e.target.value }); 
 
\t } 
 

 
\t render() { 
 
\t \t return (
 
\t \t \t <div className="message_form"> 
 
\t \t \t \t <h3>Write New Message</h3> 
 
\t \t \t \t <form onSubmit={this.handleSubmit}> 
 
\t \t \t \t \t <input 
 
\t \t \t \t \t \t onChange={this.changeHandler} 
 
\t \t \t \t \t \t value={this.state.text} 
 
\t \t \t \t \t \t placeholder='Write new message' 
 
\t \t \t \t \t /> 
 
\t \t \t \t </form> 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
} 
 

 
export default MessageForm;

Answer 1

Mit enzyme und sinon Sie etwas tun können:

it("submits message",() => { 
    // GIVEN 
    const submitCallback = sinon.spy(); 
    const actualNode = shallow(<MessageForm onMessageSubmit={submitCallback} />); 

    // WHEN 
    actualNode.find("input").simulate("change", { target: { value: "Test Message" } }); 
    actualNode.find("form").simulate("submit"); 

    // THEN 
    sinon.assert.calledWith(submitCallback, "Test Message"); 
}); 

Dies ist nur grundlegende Interaktivität zu testen. Sie können auch einen Test erstellen, um HTML-Rendering und Statusübergänge zu überprüfen. Schauen Sie in enzyme Dokumente, um weitere Informationen zu erhalten.