使用Jest进行React组件测试

嗨,我是一个新的笑话和Java脚本。我想对我的一个组件进行测试。

我想确认管理员是否看到以下句子:

“请选择一个用户以显示他/她的捐赠:”

const sentence = "Please select a user to show his/her donations:"
it('Shows: Please select a user to show his/her donations:', () => {
  const admin = shallow(<AdminViewComponent />);
  const wantedSentence = admin.find(sentence);
  expect(wantedSentence).toEqual(true);
});

但由于这不工作,我想得到另一个建议。

下面是我要测试的组件:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Typeahead } from 'react-bootstrap-typeahead'; // ES2015
import axios from 'axios';
import { WholeScreen } from './WholeScreenComponent.js';

export class AdminViewComponent extends Component {

  constructor(props) {
    super(props);

    this.state = {
      emailList: [],
      selectedUser: "",
      SelectedUserDonationData: {}
    };

    this._handleChange = this._handleChange.bind(this);
  }

  getInitialState() {
    return {
      // [{}] is weird, either use undefined (or [] but undefined is better).
      // If you use [], you loose the information of a "pending" request, as 
      // you won't be able to make a distinction between a pending request, 
      // and a response that returns an empty array
      emailList: undefined,
      selectedUser: undefined,
      SelectedUserDonationData: undefined
    }
  }
  componentDidMount() {
    this.setState({ emailList: undefined });
    return axios.get('./api/user/', {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + this.props.token
      }
    }).then(response => {
      const emailListResult = response.data;
      this.setState({ emailList: emailListResult });

    }).catch(function (error) {
      console.log(error);
    });
  }

  _handleChange(SelectedUser) {
    this.setState({ selectedUser: SelectedUser, selectedUserDonationData: undefined });


    axios.get('./api/user/' + SelectedUser + '/',
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + this.props.token
        }
      }).then(response => {
        const selectedUserDonationDataResponse = response.data;
        this.setState({ selectedUserDonationData: selectedUserDonationDataResponse });
        console.log(selectedUserDonationDataResponse);

      }).catch(function (error) {
        console.log(error);
      });

  }

  render() {
    var adminView;
    if (!this.state.emailList) {
      adminView = <div>Please wait while we retrieve all users...</div>
    }
    else {
      adminView = (
        <div>
          <div>
            Please select user to show his/her donations
          </div>
          <Typeahead
            placeholder="Select user email..."
            onChange={this._handleChange}
            options={this.state.emailList} />
        </div>
      );
    }

    var selectedUserData;
    if (this.state.selectedUserDonationData) {
      selectedUserData = (
        <div className="AdminViewData">
          <h4 className="DtatOf">
            Showing donations of: {this.state.selectedUser}
          </h4>
          <WholeScreen data={this.state.selectedUserDonationData.DonationsList} />
        </div>
      );
    }

    var url = "./api/user/";
    return (
      <div className="AdminView">
        {adminView}
        {selectedUserData}
      </div>
    );
  }
}

我要测试的线路在 render( )功能

adminView = <div>Please wait while we retrieve all users...</div>