react-datepicker - cannot open date popup using Testcafe

Question

I'm using the react-datepicker package as a custom Date Picker component for my app. I wrap it in my own component like so:

const MyCustomDatePicker = ({ onChange, value, error, disabled, placeholder, dateFormat }) => {
  return (
    <div className='date-input' data-test-id='date-picker'>
      <div className='date-input__field'>
        <DatePicker
          selected={value}
          disabled={disabled}
          onChange={onChange}
          dateFormat={dateFormat}
          placeholderText={placeholder}
          className='date-input__input'
        />
      </div>
    </div>
  );
};

Which works fine in the UI, I can select a date from the popup:

However, when I try replicating this in Testcafe, I can't seem to get the popup to appear. I've tried a different combination of my own class names and those generated by the react-datepicker package:

import { Selector } from 'testcafe';

fixture`Getting Started`
  .page`https://my-page`;

test('My first test', async t => {
  await t.click(Selector('date-input__input'))
  await t.click(Selector('react-datepicker__input-container'))
  await t.click(Selector('react-datepicker-wrapper'))
  await t.wait(5000)
});

But none of these open the date picker popup. Is it possible to do this in testcafe?

Answer 1

In the snippet you provided, I see an error: you are trying to take a selector by class, but you are not using a dot. Try, for example, running this test:

import { Selector } from 'testcafe';

fixture `New Fixture`
    .page `https://reactdatepicker.com/`;
    
test(`New Test`, async t => {
    const anyPicker = Selector('.react-datepicker__input-container').nth(1);
    const input     = anyPicker.find('input');
    const dateCell  = Selector('.react-datepicker__day').withText('16');

    await t
        .click(input)
        .click(dateCell)
        .expect(input.value).eql('07/16/2022');
});