Reputation: 34
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