Barry Zea
Barry Zea

Reputation: 34

"TypeError: View.title is not a function". In react-big-calendar test with React

I am doing a simple test of generating a snapshot of a screen that contains the <Calendar/> component of the react-big-calendar library.

My test is the following:


const thunk = require('redux-thunk').thunk;


//***************************/
const middlewares = [thunk]
const mockStore = configureStore(middlewares)

const initState={
    ui:{
        modalOpen:false
    },
    calendar:{
        events:[{
            title:"test title",
            notes:"test note",
            start:"2024-02-23T16:00:00.861Z",
            end:"2024-02-23T16:00:00.861Z",
            id:"21212121"

        }],
        activeEvent:null
    },
    auth:{
        checking:false,
        uid:'123456789',
        name:'User'
    }
}

const store =   mockStore(initState)
store.dispatch = jest.fn()

const wrapper =  renderer.create(
    <Provider store={store}>
           <CalendarScreen/>
    </Provider>
)

describe('Tests in <CalendarScreen/> component', () => { 

    test('should show successfully', () => { 
        expect(wrapper).toMatchSnapshot();
   
     })
 })

but it gives me the following error:

 Test suite failed to run

    TypeError: View.title is not a function

      58 | store.dispatch = jest.fn()
      59 |
    > 60 | const wrapper =  renderer.create(
         |                           ^
      61 |     <Provider store={store}>
      62 |            <CalendarScreen/>
      63 |     </Provider>

My CalendarScreen component is the following:




const localizer = momentLocalizer(moment)

export const CalendarScreen = () => {
 
    const {events, activeEvent} = useSelector(state=>state.calendar)
    const {uid} = useSelector(state=>state.auth)
    const dispatch = useDispatch()
    const [lastView, setLastView] = useState(localStorage.getItem('lastView') || 'month')


    useEffect(() => {
      dispatch(eventStartLoading());
    
    }, [dispatch])
    

    const onDoubleClick = (e)=>{
          dispatch(uiOpenModal())
    }
    const onSelectEvent = (e)=>{
        
        dispatch(eventSetActive(e))
        
    }
    const onSelectSlot =()=>{
        dispatch(eventClearActiveEvent())
    }
    const onViewChange = (e)=>{
        setLastView(e)
        localStorage.setItem('lastView',e)
    }
    const eventStyleGetter = (event,start,end,isSelected)=>{
        const style = {
            backgroundColor:(uid === event.user._id) ? '#367cf7' : '#465660',
            borderRadius:'0px',
            opacity:0.8,
            display:'block',
            color:'white'
        }
        return {
            style
        }
    }
  
  return (
    <div className='calendar-screen'>
        <Navbar/>
        <Calendar
            localizer={localizer}
            events={events}
            starAccessor="start"
            endAccessor="end"
            messages={messages} 
            eventPropGetter={eventStyleGetter}
            components={{
                event:CalendarEvent
            }}
            onDoubleClickEvent={onDoubleClick}
            onSelectEvent={onSelectEvent}
            onSelectSlot={onSelectSlot}
            selectable={true}
            onView={onViewChange}
            view={lastView}

        />
        <AddNewFab/>
        {activeEvent &&  <DeleteEventFab/>}
        <CalendarModal/>
    </div>
  )
}

calendarEvent component


export const CalendarEvent = ({event}) => {
    const {title, user} = event
  return (
    <div>
        <strong>{title}</strong>
        <span> - {user.name}</span>
    </div>
  )
}

The component displays correctly in production as well as in development, the problem is in the test environment. The library in question is react-big-calendar v1.11.2 ,and for more detail the following:

Other components render fine, the problem is in the <Calendar/> component of the react-big-calendar library, if anyone has encountered the same error or has an idea to solve it I will be very grateful.

Upvotes: 0

Views: 166

Answers (0)

Related Questions