react component test cannot find text

Question

I am writing a test case for a particular component I created. The component is here

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;

The test case for this component is here:

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!');
  })
});

I'm trying to test the situation where isSearched is false and activeTab is set to one-way. I have passed in the appropriate props and also put log statements in the component to verify that the right if/else block is being executed, but I keep receiving the error:

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

Could someone guide me or provide insight for this?

Answer 1

It looks to me like your test is returning the correct result because there is no text as the direct child of the div with class listing_header_all.

I believe the correct assertion for Mocha/Chai is

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

Because the text Showing all results for one-way flights!' is in the h3 with the class test, not in listing_header_all.