Реагируйте на тестирование компонентов, используя Jest

Question

Привет, я новичок в Jest и Java Script.Я хочу выполнить тест на одном из моих компонентов.

Я хочу убедиться, что администратор видит предложение:

"Пожалуйста, выберите пользователя, чтобы показать свои пожертвования:"

Мое предложение было примерно таким:

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>

Answer 1

Поскольку у вас нет класса или идентификатора в вашем элементе div, будет трудно получить его, используя .find().К счастью, вы также можете использовать .containsMatchingElement(node), чтобы проверить, содержит ли ваш компонент элемент, а не селектор.Другими словами, вы можете сделать следующее:

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

Подробнее о .containsMatchingElement здесь .

Answer 2

Будет проще, если вы добавите выбираемый атрибут в узел DOM.

  it('Shows: Please select a user to show his/her donations:', () => {
    const admin = mount(<AdminViewComponent />);
    const actualText = admin.find("[data-id='someSelector']").text();
    const expectedText = "Please select a user to show his/her donations";

    expect(actualText).toEqual(expectedText);
  });

  /*
     Alternately you could use a snapshot test as this would remove 
     the need to copy the text into the test
  */


  it('Shows: Please select a user to show his/her donations:', () => {
    const admin = mount(<AdminViewComponent />);
    const actualText = admin.find("[data-id='someSelector']").text();

    expect(actualText).toMatchSnapshot();
  });