Как проверить только Jest, если рендерится дочерний компонент

Question

У меня есть удачный путь тестирования в моем родительском компоненте, и он отобразит компонент или тег p. Я заблудился о том, как проверить, отображается ли этот дочерний компонент. Вот мой родительский компонент.

if (startDate && endDate && startDate <= endDate) {
  return (
    <div className={styles.root}>
      <DateRangeInput {...this.props} />
      <DateRangePicker
        startDate={moment(startDate)}
        endDate={moment(endDate)}
        onChange={this.onDatePickerChange}
        mode={DateRangePicker.MODE_RANGE}
      />
    </div>
  );
}
return (
  <div className={styles.root}>
    <DateRangeInput {...this.props} />
    <p>Cannot have start date after end date</p>
  </div>
);

Вот мои тесты. Я не уверен, правильно ли я поступаю по этому поводу или как лучше всего проверять оператор if

describe('<DateRangeInputPicker />', () => {
  it('should show null messaging when endDate < startDate', () => {
    const { getByText } = render(
       <DateRangeInputPicker
          startDate={new Date(2018, 0, 14)}
          endDate={new Date(2017, 1, 29)}
          onChange={jest.fn()}
       />
   );

  expect( getByText('Cannot have start date after end date')).toBeInTheDocument();
});

 it('should render DateRangePicker when endDate > startDate', () => {
   const { getByText } = render(
     <DateRangeInputPicker
       startDate={new Date(2018, 0, 14)}
       endDate={new Date(2017, 1, 29)}
       onChange={jest.fn()}
    />
  );


});

});

Answer 1

Вам следует рассмотреть возможность применения Фермент в своей среде тестирования с Jest, если вы планируете протестировать жизненный цикл вашего компонента и его рендеринг в соответствии с обновлениями.

Этот фрагмент кода проверит то, что вы пытаетесь достичь. Если вы не знакомы с Enzyme, в Интернете есть множество курсов, учебных пособий и сообщений в блогах.

import React from 'react';
import { shallow } from 'enzyme';
import DateRangeInputPicker from './DateRangeInputPicker';

describe('DateRangeInputPicker', () => {

    const component = shallow(<CreateTask />);

    describe('when endDate < startDate', () => {
        beforeEach(() => {
            // Any code here to make your component come to that condition
        });

        it('should show a message', () => {
            const message = component.find('p'); // would be better to use an id or class selector
            expect(message.text()).toBe('Cannot have start date after end date');
        });
    });
});

В любом случае, я постараюсь объяснить, что вы должны делать.

1. Смонтируйте ваш компонент с помощью Enzyme shallow рендеринга.
2. Сделайте так, чтобы ваш компонент соответствовал ожидаемому условию. Есть много способов добиться этого, вы можете получить доступ к setState , чтобы обновить состояние компонента, если у вас есть эти свойства.
3. Найдите ожидаемый DOM-узел, используя метод Enzyme find () .