在react.js中将App-test中提到的onChange与App.js映射

Question

我是一个新手，尽管我几乎解决了这个问题，但还是在hackerrank上看到了这个问题，但是由于我感觉到他们在App-test.js中提到的内容，我无法通过他们的测试用例，

        App-test.js
            it("check if meals schedule is generated for valid entries", () => {
                const wrapper = mount(<App />);
            const bookings = wrapper.find(Bookings).instance();
            bookings.handleGuestInfo({
                target: { value: "John Doe\nJohhny Alsodoes" }
            });
            bookings.handleDateInfo({
                target: { value: "2018-09-15 to 2018-09-16\n2018-09-14 to 2018-09-15" }
            });
            wrapper.find(Button).simulate("click");
            const content = wrapper.text();


        App.js 

        import React, { Component } from "react";
        import Bookings from "./components/Bookings";
        import Meals from "./components/Meals";
        import Error from "./components/Error";

        Date.prototype.addDays = function(days) {
        var date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
        };

        class App extends Component {
        constructor() {
            super();
            this.state = {
            hackers: "",
            dateRange: "",
            error: false,
            errorMessage: [],
            schedule: []
            };
        }
        handleGuestInfo = event => {
            const { id, value } = event.currentTarget;
            this.setState({
            [id]: value
            });
        };

        handleDateInfo = event => {
            const { id, value } = event.currentTarget;
            this.setState({
            [id]: value
            });
        };

        dateFormatCheck(date) {
            let dateChecker = /^(?:(19|20)[0-9]{2})[-.](0[1-9]|1[012])[-.](0[1-9]|[12][0-9]|3[01])$/; //YYYY/MM-DD format
            if (
            dateChecker.test(date.split(" to ")[0]) &&
            dateChecker.test(date.split(" to ")[1])
            ) {
            return true;
            }
            return false;
        }

        reset() {
            this.setState({
            error: false,
            errorMessage: "",
            errorData: [],
            schedule: []
            });
        }

        handleMealSchedule() {
            this.reset();
            let hackers = this.state.hackers.split("\n");
            let dateRange = this.state.dateRange.split("\n");
            let errorData = [];
            let scheduleData = [];
            if (hackers.length === dateRange.length) {
            for (let i = 0; i < hackers.length; i++) {
                if (this.dateFormatCheck(dateRange[i])) {
                let startDay = dateRange[i].split(" to ")[0];
                let endDay = dateRange[i].split(" to ")[1];

                let noOfDays = this.getDifferenceInDays(startDay, endDay);
                for (let j = 0; j < noOfDays.length; j++) {
                    scheduleData.push({
                    name: hackers[i],
                    date: noOfDays[j]
                    });
                }
                } else {
                errorData.push(hackers[i]);
                }
            }
            } else {
            errorData.push("Hackers and Date Range length mismatch");
            }

            if (errorData.length > 0) {
            this.setState({
                error: true,
                errorMessage: errorData
            });
            }
            this.setState({
            schedule: scheduleData
            });
        }

        getDifferenceInDays(startDate, endDate) {
            let dateArray = [];

            let currentDate = new Date(startDate);
            let day = currentDate.getDate();
            let month = currentDate.getMonth() + 1;
            let year = currentDate.getFullYear();
            currentDate = [year, month, day].join("-");

            let endOfDate = new Date(endDate);
            let endDay = endOfDate.getDate();
            let endMonth = endOfDate.getMonth() + 1;
            let endYear = endOfDate.getFullYear();
            endOfDate = [endYear, endMonth, endDay].join("-");

            let todayDate = new Date(currentDate);
            while (new Date(todayDate).getTime() <= new Date(endOfDate).getTime()) {
            let formatTodayDate =
                new Date(todayDate).getFullYear() +
                "-" +
                (new Date(todayDate).getMonth() + 1) +
                "-" +
                (new Date(todayDate).getDate() + 1);
            dateArray.push(formatTodayDate);
            todayDate = new Date(todayDate).setDate(
                new Date(todayDate).getDate() + 1
            );
            }
            return dateArray;
        }
        render() {
            const { error, errorMessage, schedule } = this.state;

            return (
            <div className="container-fluid">
                <center>
                <h2>Hacker Hostel</h2>
                </center>
                <div className="container">
                <Bookings
                    handleGuestInfo={e => this.handleGuestInfo(e)}
                    handleDateInfo={e => this.handleDateInfo(e)}
                    onButton={() => this.handleMealSchedule()}
                />
                {error ? <Error errorMessage={errorMessage} /> : null}
                <Meals scheduleData={schedule} />
                </div>
            </div>
            );
        }
        }

        export default App;


        Bookings.js

        import React, { Component } from "react";

        import TextField from "@material-ui/core/TextField";
                import Button from "@material-ui/core/Button";

                `   `class Bookings extends Component {
                render() {
                    return (
                    <div className="row">
                        <TextField
                        className="col-md-6"
                        multiline
                        rows="4"
                        id="hackers"
                        placeholder="Enter the hacker list (one hacker per line)"
                        onChange={this.props.handleGuestInfo}
                        />
                        <TextField
                        className="col-md-6"
                        multiline
                        rows="4"
                        id="dateRange"
                        onChange={this.props.handleDateInfo}
                        placeholder="Enter the date range for each hacker's stay (one range per line)"
                        />
                        <Button
                        variant="outlined"
                        color="primary"
                        className="block-center"
                        onClick={this.props.onButton}
                        >
                        Get Meals Schedule
                        </Button>
                    </div>
                    );
                }
                }

                export default Bookings;

我想使用提到的他们的测试框架进行测试，关于如何实现它的任何想法？