Unable to see events rendered in tests

[tgandrews]

Reduced Test Case

1. Clone the repo https://github.com/tgandrews/fullcalendar-test
2. yarn
3. yarn start see the events rendered
4. yarn test see the tests pass but the snapshot include no events in src/__snapshots__/App.test.js.snap

Bug Description

Describe how to recreate the bug.
Follow the steps above to be able to recreate. This works with v4 providing that is used instead.

What do you expect to happen?
I expect events to be rendered in test environments

What happens instead?
No events are rendered in tests even after waiting for a long time 20seconds in the linked example

[acerix]

Would you be able to post a runnable, stripped-down demonstration of the bug (ie. on codesandbox.io)? Would really appreciate it because the time saved reproducing will be time spent fixing.

[tgandrews]

@acerix this is purely a new create react app with the calendar in and one test creating the issue it is not a full application by any means. I thought this would be sufficient. I've tried to slim it down as much as possible so all it is doing is rendering one event in the calendar and that works fine in the browser but does not work in tests using jsdom.

Here is also a codesandbox link but I've found jsdom tests to be VERY slow (40s for a 1s test locally) and unreliable in Chrome and Firefox.
https://codesandbox.io/s/fullcalendar-not-rendering-events-in-tests-xzndj

Hopefully this is sufficient.

[acerix]

Thanks for the details, I wasn't able to get it to run in my browser though as you mentioned it seems that system is not very reliable.

Although I had a look at your test and it seems to be looking for the event element immediately after the calendar is rendered, it should work if you add a delay (eg. setTimeout) to give time for the events to render.

[tgandrews]

@acerix I've updated the test as you suggested and added a 5 second timeout between render and creating the snapshot. This is still resulting in the same situation - no events rendered

I have updated both the repo https://github.com/tgandrews/fullcalendar-test
And the codesandbox https://codesandbox.io/s/fullcalendar-not-rendering-events-in-tests-xzndj
Any other suggestions?

During our debugging we tried mocking time using jest and running it forward a minute and re-rendering but neither seemed to help.

[afilipko]

Have very similar issue. Have Fullcalendar(v5) rendered as React component. Tests configured with jest and testing-library
I have eventContent prop set as function and validated that it haven't called. On the other hand viewClassNames were triggered and view.calendar.getEvents() return correct events with correct dates.
Debug output obviously displays plain Fullcalendar html layout without events

[acerix]

Thanks for the details. I'm not very familiar with React, but it looks like you are assiging asFragment before the timeout, does it actually only read the DOM after? If so it seems like a bug that is specific to React.

[tgandrews]

Yes the asFragment is a function that takes a snapshot at the time of execution. So after the timeout.

When you say “react” do you mean full calendar react or the actual react library?

[acerix]

Thanks for confirming, it does seem like a bug then. Does the same querySelectorAll work in the browser rendering (ie. not test)?

I mean the FullCalendar React component, we have a separate repo for issues specific to that so I will move there.

[tgandrews]

Yes it works in the browser fine. Just not in the tests

[FlopieUtd]

Same issue here. Using FullCalendar 5.5.0 with the TimeGridWeek view. Everything works fine in the browser, but in my test suite, only allDay events are rendered, not regular events. The test suite passed on v4.4.0. It seems like the eventContent callback is not called for regular events.

[groteck]

I observed that the issue happens to me only when I use the eventSources prop if I use the normal events prop all renders fine.

[chunyinli]

Having the same issue while using resourceTimeGridPlugin. Tried stripping it down to a calendar with a single event passed via events, with no other options. Event shows up in browser, but cannot be found in test. If I change it to use the daygridPlugin, then it works in browser and in test environment.

[arenac]

First, nice work you are doing here. I like this concept of having plugins based on needs.

But I have the same issue when trying to test with jest with @testing-library/react. Everything works when running the project in the browser either storybook, but I try to log the rendered component during the tests just the resources are rendered. For the events the table row for each is missing the custom content

<tr>
  <td  class="fc-timeline-lane fc-resource  my-custom-class"  data-resource-id="my-custom-id">
    <div class="fc-timeline-lane-frame">
      <div  class="fc-timeline-events fc-scrollgrid-sync-inner" style="height: 0px;">
      </div>
    </div>
  </td>
</tr>

A colleague found out with the @fullcalendar/daygrid plugin the events are rendered and not with the @fullcalendar/resource-timeline plugin.

I started to look how are the tests in this project and besides it is using jasmine and karma it renders the elements with @fullcalendar/resource-timeline plugin fine.

Also if the maintainers could help to understand or help find a solution to make it work with others test libraries.

By the way I feel the test coverage in this project should be improved and maybe cover all plugins with different scenarios.

[arshaw]

I will take a look at this very soon. This likely started happening because of my event-positioning refactor. In a Jest environment there isn't a real DOM with real coordinates. In previous version of FullCalendar, events must have rendered even without available coordinates, whereas now it is likely waiting for non-zero coordinates as a precondition for rendering. I'll take a look.

[arshaw]

I believe I've found where rendering is short-circuiting when no available coordinates:

• timegrid: https://github.com/fullcalendar/fullcalendar/blob/v5.7.2/packages/timegrid/src/TimeCol.tsx#L122
• timeline: https://github.com/fullcalendar/fullcalendar-scheduler/blob/064431ef1212ad1cfb41776f0124302557e06325/timeline/src/event-placement.ts#L29
• daygrid (aka month view) seems unaffected

The next step is to modify the code so events are rendered unconditionally, even without coordinates, which may required a tiny bit of refactoring.

[arenac]

Thanks for the quick answer Adam.

Based on that new version my dependencies now are

"@fullcalendar/react": "^5.7.0",
"@fullcalendar/resource-timeline": "^5.7.2",

But the issue is still there. I guess the next step is that refactoring you mentioned. Looking forward to it.

[arshaw]

this has been implemented and queued for release.

[arshaw]

this fix has been released in v5.8.0

[Markypops]

I believe I've found where rendering is short-circuiting when no available coordinates:

* timegrid: https://github.com/fullcalendar/fullcalendar/blob/v5.7.2/packages/timegrid/src/TimeCol.tsx#L122

* timeline: https://github.com/fullcalendar/fullcalendar-scheduler/blob/064431ef1212ad1cfb41776f0124302557e06325/timeline/src/event-placement.ts#L29

* daygrid (aka month view) seems unaffected

The next step is to modify the code so events are rendered unconditionally, even without coordinates, which may required a tiny bit of refactoring.

Thanks for the quick answer Adam.

Based on that new version my dependencies now are

"@fullcalendar/react": "^5.7.0",
"@fullcalendar/resource-timeline": "^5.7.2",

But the issue is still there. I guess the next step is that refactoring you mentioned. Looking forward to it.

How would you refactor the code so that the events are unconditionally rendered? Asking this because I have trouble testing events right now in daygrid