Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Started to use fullcalendar and I am trying to make a test to test my event component that gets rendered for an event. The problem I am running into is EventContentArg . I getting typescript errors that my event property is missing a bunch of things that are not really related for the test to render. How can I fix the following error:

Type '{ id: string; start: Date; end: Date; title: string; backgroundColor: string; borderColor: string; editable: boolean; textColor: string; resourceId: string; extendedProps: { type: { id: number; name: string; }; status: { ...; }; displayProperties: { ...; }; }; }' is missing the following properties from type 'EventApi': _context, _def, _instance, setProp, and 26 more.ts(2740)
main.d.ts(1289, 5): The expected type comes from property 'event' which is declared here on type 'EventContentArg'
Here is part of my component
import { EventContentArg } from '@fullcalendar/react';
export const EventContent = (event: EventContentArg) => {
  const { backgroundColor, timeText, view } = event,
    { end, extendedProps, start, title } = event.event,
    { displayProperties } = extendedProps,
    slotDuration = view.getOption('slotDuration') as ISlotDuration,
    slotDurationNumber = Math.floor(slotDuration.milliseconds / 60000),
    appointmentLength = end!.getTime() - start!.getTime(),
    duration = Math.floor(appointmentLength / 60000);
  return (
    <div>My Component</div>
Here is my test
import { render, screen } from '@testing-library/react';
import React from 'react';
import { EventContentArg } from '@fullcalendar/react';
import { EventContent } from '.';
import { events } from '../../actions/mockData';
import { prettyDate } from './EventContent.stories';
test('event renders with all expected data', () => {
  let event = events[2];
  let timeText = `${prettyDate(event.start)} - ${prettyDate(event.end)}`;
  let args: EventContentArg = {
    backgroundColor: 'rgb(133,33,51)',
    event,
    timeText: timeText,
    view: {
      getOption: () => {
        return {
          milliseconds: 900000,
  render(<EventContent {...args} />);
Here is the events from the mockData
export const events = [
    id: '3',
    start: new Date(thirdStart),
    end: new Date(thirdEnd),
    title: 'Hair Coloring', // This would be like the service name
    backgroundColor: 'rgb(133,33,51)', // Should be based on event status
    borderColor: '#d2d2d2', // For now should be same color as bg
    editable: false,
    textColor: '#2d2d2d',
    resourceId: '2',
    extendedProps: {
      type: {
        id: 1,
        name: 'Appointment',
      status: {
        id: 2,
        name: 'Scheduled',
      displayProperties: {
        attendeeDetails: 'with Kylo Ren',
        resourceDetails: 'Chair 2',
        eventIcons: [],
                What is the props type for EventContent?  Maybe you want a deep partial of EventContentArg, but probably you want to enforce that args matches the expected props.  Import the props type or use the roundabout way let args: React.ComponentProps<typeof EventContent>
– Linda Paiste
                Apr 5, 2021 at 23:14
                ok so this is a genuine problem because your component is saying that it must be called with complete EventContentArg props.  Maybe you need a deep partial there?  Or manually specify which properties are required and which are optional?
– Linda Paiste
                Apr 5, 2021 at 23:17
                @LindaPaiste That type comes from FullCalendar. Maybe I am using the wrong prop in my component?
– jrock2004
                Apr 5, 2021 at 23:23
                Ok so you are basically doing the same as they are doing in their Typescript demo.  Their function renderEventContent requires the whole EventContentArg even though they only use two properties.  But you see how it can make it hard to test when there are required props that aren't used.  {timeText: string; event: {title: string;} } would make their renderEventContent much more flexible.
– Linda Paiste
                Apr 5, 2021 at 23:45
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.