react component test cannot find text

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?

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.