Testing react-big-calendar events

Question

I am using react-big-calendar's month view in my app. If I have more than 2 events on the same day, the first event added stays and a "+X more" button appears (where the X is of course the number of events left for that day). This works just fine in the app, but when I try to unit test it, no matter how many events I add on the same day, the "+X more" button does not appear, and I can still access all the events of that day, even though they shouldn't be visible anymore. This is a problem for me because I have implemented some more functionality on that button which I need to test, but since I can't reach it in testing I can't even simulate a click on that.

Why doesn't this exist in test mode?

After screen.debug() I was thinking that the problem might be that the button appears when there is not enough space to display all the events, and since the testing environment simpler than the running app, works differently, there is no space check and therefore no button needed. I don't know if I am right but I still need to test it somehow.

Is there a way to access it somehow in my tests?

Answer 1

Events are placed in date cells according to a sort order, and the amount of space available. The 'Show more +' link only shows when there isn't enough space to place the events. Size of these cells is determined by the overall container wrapper size around your calendar, as Big Calendar uses flexbox layout. It may be that you need to apply a specific height to your container for the testing to pick it up right.