Тестирование метки-заполнителя в импортированном компоненте

Question

У меня есть компонент реагирования, в который я импортировал react-date-picker, у которого нет возможности установить заполнитель в качестве реквизита для полей ввода, поэтому я использовал найденный обходной путь (в componentDidMount) на странице github здесь .

вот мой компонент:

import React from 'react';
import DatePicker from 'react-date-picker';

class AlertModal extends React.Component {

...

  componentDidMount(){
     document.querySelector('.react-date-picker__button__input__day').placeholder = 'Day';
     document.querySelector('.react-date-picker__button__input__month').placeholder = 'Month';
     document.querySelector('.react-date-picker__button__input__year').placeholder = 'Year'
   }

    render = () => {
       return (
          <div>
             <DatePicker
              onChange={this.handleToDate}
              value={this.state.toDate}
              minDate={this.state.minToDate}
              calendarIcon={null}
              showLeadingZeros={true}
            />
          </div>
       )
    }


    }

Проблема, с которой я столкнулся, заключается в моем тесте, когда я пытаюсь выполнить приведенное ниже, он не работает с: Cannot set property 'placeholder' of undefined.

describe('datepicker placehoder overrides', () => {
  let component;
  const mockSubmit = jest.fn();
  const mockCancel = jest.fn();

  it('should be DD for days', () => {
    component = mount(<AlertModal submit={mockSubmit} cancel={mockCancel} />);
    expect(
      component
        .find('.react-date-picker__inputGroup__day')
        .at(0)
        .props().placeholder
    ).toBeEqual('DD');
  });
});

Есть идеи?

Answer 1

Из документов на Jest:

Jest поставляется с jsdom, который имитирует среду DOM, как если бы вы были в браузере.Это означает, что каждый API-интерфейс DOM, который мы вызываем, можно наблюдать так же, как и в браузере!

Так что вам просто нужно добавить соответствующую HTML-разметку в DOM, прежде чем продолжить тестирование,

describe('datepicker placehoder overrides', () => {
  let component;
  document.body.innerHTML = `<div>
    <input class="react-date-picker__button__input__day" />
    <input class="react-date-picker__button__input__month" />
    <input class="react-date-picker__button__input__year" />
  </div>`;
  const mockSubmit = jest.fn();
  const mockCancel = jest.fn();

  it('should be DD for days', () => {
    component = mount(<AlertModal submit={mockSubmit} cancel={mockCancel} />);
    expect(
      component
        .find('.react-date-picker__inputGroup__day')
        .at(0)
        .props().placeholder
    ).toBeEqual('DD');
  });
});