Vfrdtyky

I have a react component in which I've imported react-date-picker, which doesn't have the ability to set the placeholder as prop for the input fields, so I've used a workaround found (in componentDidMount) on its github page here.

here is my component:

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>

       )

    }





    }

The issue I have is in my test, when I try the below it fails with: 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');

  });

});

Any idea?

From the docs for Jest:

Jest ships with jsdom which simulates a DOM environment as if you were
in the browser. This means that every DOM API that we call can be
observed in the same way it would be observed in a browser!

So you just have to add the relevant HTML markup to the DOM before proceeding the test.

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

  });

});