Question

我正在为我创建的特定组件编写测试用例。该组件在这里

import React, { PropTypes } from 'react';
import moment from 'moment';

const RouteHeader = ({ activeTab, isSearched, flight, results, departureDate, returnDate }) => {
  let departureDisplay;
  let returnDisplay;
  if (departureDate) {
    departureDisplay = moment(departureDate, 'DD MM YYYY').format('MMM Do YYYY');
  }
  if (returnDate) {
    returnDisplay = moment(returnDate, 'DD MM YYYY').format('MMM Do YYYY');
  }
  const plural = results === 1 ? 'flight' : 'flights';

  if (!isSearched) {
    return (
      <div className="listing_header_all">
        <h3 className="test">Showing all results for {activeTab} flights!</h3>
      </div>
    );
  } else {
    if (flight) {
      if (activeTab === 'one-way') {
        return (
          <div className="trip_header">
            <h3>
              {flight.origin} <span>&#8594;</span>{flight.destination}
              <small className="flight_results">{results} {plural} found</small>
            </h3>
            <h3>Departure date: <small className="flight_results">{departureDisplay}</small></h3>
          </div>
        );
      } else {
        return (
          <div className="trip_header">
            <h3>
              {flight.origin}
              <span>&#8594;</span>
              {flight.destination} <span>&#8594;</span>
              {flight.origin}
              <small className="flight_results">{results} {plural} found</small>
            </h3>
            <h3>Departure date: <small className="flight_results">{departureDisplay}</small></h3>
            <h3>Return date: <small className="flight_results">{returnDisplay}</small></h3>
          </div>
        );
      }
    } else {
      return (
        <div>
          <h3>No search results to display for your search!</h3>
        </div>
      );
    }
  }
};

RouteHeader.propTypes = {
  isSearched: PropTypes.bool,

  activeTab: PropTypes.string,

  flight: PropTypes.object,

  results: PropTypes.number,

  departureDate: PropTypes.string,

  returnDate: PropTypes.string
};


export default RouteHeader;

此组件的测试用例如下：

import { renderComponent, expect } from '../test_helper';
import RouteHeader from '../../src/components/route_header';

describe('RouteHeader', () => {

  let component;
  const props = {
    isSearched: false,
    activeTab: 'one-way'
  }
  beforeEach(() => {
    component = renderComponent(RouteHeader, props);
  });

  it('should render', () => {
    expect(component.find('.listing_header_all')).to.have.text('Showing all results for one-way flights!');
  })
});

我试图测试isSearched为false且activeTab设置为one-way的情况。我已经传递了相应的道具，并在组件中放置了日志语句，以验证正在执行的if / else块是否正确，但我一直收到错误：

AssertionError: expected  to have text 'Showing all results for one-way flights!', but the text was ''

有人可以指导我或为此提供见解吗？

Answer 1

在我看来，您的测试正在返回正确的结果，因为没有文本作为具有类listing_header_all的div的直接子项。

我相信Mocha / Chai的正确断言是

expect(component.find('.test')).to.have.text('Showing all results for one-way flights!');

因为文字Showing all results for one-way flights!'位于h3中，而班级为test，而不是listing_header_all。

反应组件测试无法找到文本

1 个答案: