反应组件测试找不到文本

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

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

我认为 Mocha/Chai 的正确断言是

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

因为文本 Showing all results for one-way flights!' 在 class test 的 h3 中，而不在 listing_header_all.

反应组件测试找不到文本

react component test cannot find text

mocha.js

chai

reactjs

reactjs-testutils