3

I've been trying to figure out how to get react-testing-library working with react-datepicker.

So far, I've been able to get the input box wrapped correctly, and can access it via the getByLabelText function, but I can't seem to get the date picker to appear no matter what event I fire on the textbox.

I've been able to use the base Enzyme method for getting the date picker to appear, but it doesn't seem to want to work through react-testing-library. Here is a working version of the issue that I'm facing: https://codesandbox.io/s/compassionate-bose-8gpbt

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Shafiq Jetha
  • 1,337
  • 16
  • 30

1 Answers1

0

I don't think getByLabelText will work since the input from react-datepicker is nested within a div (which doesn't match any of the example usages in react-testing-library).

The best I could do was target the From: text using getByText and then look for this month/year to be in the document: https://codesandbox.io/s/sleepy-neumann-hnpr5

Robert Cooper
  • 2,160
  • 1
  • 9
  • 22
  • I had tried changing the assert to `toBeInTheDocument` before, but I realised that it passes only because the html has the datepicker code already in it, but it's not visible until the control gets activated correctly, which is what I'm most interested in asserting. – Shafiq Jetha Jun 01 '19 at 04:58
  • The month/year text is actually not rendered until the datepicker is activated. You can actually try to query for it before activating the datepicker and it will fail. See my updated code sandbox: https://codesandbox.io/s/sleepy-neumann-hnpr5 – Robert Cooper Jun 01 '19 at 05:04
  • So then does this seem like an upstream problem to you? I'd expect the picker to be made visible at some point, but that just might be a misunderstanding of testing react components in my part. – Shafiq Jetha Jun 01 '19 at 05:51
  • Honestly, I think that the `.toBeVisible()` assertion should be how you test this particular case, but for some reason the opacity of the data picker popover is `0` when you fire the click event using react testing library. Not sure what is causing that. – Robert Cooper Jun 01 '19 at 16:24
  • I did some experimenting late in Friday with Enzyme's eventing mechanism, and the toBeVisible asserting passed, so I'm thinking that it come be something to do with react-testing-library. – Shafiq Jetha Jun 01 '19 at 17:26