Invalid Test Case Results from Enzyme's.find() - Returns inconsistent Results for <DatePicker /> component in exclude_times_test.test.js

[balajis-qb]

Problem
In the exclude_times_test.test.js file, we have encountered an issue when using Enzyme's .find() method in conjunction with mount() to render a <DatePicker /> component and querying elements by class. The .find() method is returning an empty wrapper even when the specified class does not exist, which is leading to inconsistencies in our test results and making it challenging to determine the validity of our test cases.

In the above screenshot, the test case should fail, as the <DatePicker /> is not opened or inline, it won't render any date or time, hence the test case would fail obviously. But as we're expecting expect(datePicker.find('xxx')).not.toBeNull() the test case is getting ignored.

So, in this file, I found 2 issues

1. <DatePicker /> is not opened, hence the test case fails
2. Using .not.toBeNull instead of checking specific assertion like length check

I also found one another important bug, that is related to the use of setTime helper while setting excludeTimes prop

If you notice the above screenshot, we're passing invalid argument to the setTime helper. For example, instead of hour, we are passing hours and instead of minute we're passing minutes.

Proposed Solution

• Fix the setTime call
• Open the <DatePicker /> component to test it, by passing the open prop
• Use .toHaveLength(4) instead of using .not.toBeNull

[balajis-qb]

@martijnrusschen , can you please assign this issue to me. I'll work on it.

[martijnrusschen]

Done

[martijnrusschen]

We'd like to remove enzyme from the test suite so if you're rewriting tests let's try avoiding more enzyme usage.

[balajis-qb]

Thank you for assigning the issue to me @martijnrusschen. As per your request, I fixed the test cases and also migrated the file to use react-testing-library instead of enzyme. Kindly review my PR and let me know if any changes required.

#4318