Johann Alvares
Published in : 2022-09-08

TypeError: Cannot read properties of null (reading 'getBoundingClientRect') in jest

React js

//Calendar.tsximport React from 'react';import React,{useState,useEffect, useRef} from 'react'import FullCalendar from "@fullcalendar/react";import dayGridPlugin from "@fullcalendar/daygrid";import timeGridPlugin from "@fullcalendar/timegrid";import interactionPlugin from "@fullcalendar/interaction";import Popup from "../calendar/FreeTimeModal";import axios from "axios";import "@fullcalendar/core/main.css";import config from '../../env.json';import moment from 'moment';import './CalenderComponent.css';import BlockUI from '../../layouts/bockUi/BlockUI';import "@fullcalendar/daygrid/main.css";export default function CalendarComponent(props) { const events = [{ title: "today's event", date: new Date() }]; const [modalShow, setModalShow] = React.useState(false); const [freetimeval,setFreeTimeVal]=useState({}); const [freetime,setFreeTime]=useState([]); const [event,setEvent]=useState([]); const [info,setInfo]=useState([{ freetime:[], event:[] }]) const [nextflag,setNextFlag]=useState(false); const [tempNext,setTempNext]=useState([]); const [result,setResult]=useState([]); const [date, setDate]=useState(""); const start:any=new Date(); const end:any=new Date(); const [block,setBlock]=useState(false); const [startdate, setStartDate]=useState(new Date()); const [enddate, setEndDate]=useState(new Date()); useEffect(() => { if(props.refresh) { getFreeTime(moment(startdate).subtract(2,'M').format(),moment(enddate).add(2, 'M').format()); getEvents(moment(startdate).subtract(2,'M').format(),moment(enddate).add(2, 'M').format()); } }, [props.refresh]) useEffect(() => { const temp=event.concat(freetime); setResult([...temp]); console.log(JSON.stringify(result)); }, [event,freetime]) const getFreeTime=(start,end)=>{ setBlock(true); debugger; console.log(new Date()) console.log(start,end); setStartDate(start); setEndDate(end); start=moment(start).toISOString(); end=moment(end).toISOString(); console.log(start, end); axios .get( config.REACT_APP_CALENDAR_API_BASE+"/freetime?PageSize=&Page=0&StartDate="+start+"&EndDate="+end, ) .then((res) => { setBlock(false); props.stoprefresh(); console.log(res.data.data); let ftime=res.data.data; ftime=ftime.map((x:any)=>{ console.log(moment(x.AvailabilityStart_DtTm).format()); x.start= moment(x.AvailabilityStart_DtTm).format(); x.end =moment(x.AvailabilityEnd_DtTm).format(); x.title=x.Subject_Val ; return x; }) setFreeTime(ftime); handleCloseParent(true) }) .catch((err)=>{ console.log("Freetime Error:"+err); }) } const getEvents=(start,end)=>{ debugger; setBlock(true); setStartDate(start); setEndDate(end); start=moment(start).toISOString(); end=moment(end).toISOString(); axios .get( config.REACT_APP_CALENDAR_API_BASE+"/calendarevent?PageSize=&Page=&Status_Val=accept&StartDate="+start+"&EndDate="+end, ) .then((res) => { setBlock(false); console.log(res.data.data); let ftime=res.data.data; ftime=ftime.map((x:any)=> { console.log(moment(x.AvailabilityStart_DtTm).format()); x.start= moment(x.RequestStart_DtTm).format(); x.end =moment(x.RequestedEnd_DtTm).format(); x.title=x.Subject_Val ; return x; }) setEvent(ftime); }) .catch((err)=>{ console.log("Freetime Error:"+err); }) } const handleMonthChange=(eventdata)=>{ debugger; console.log(event); setNextFlag(true); setEvent([]); setFreeTime([]); getFreeTime(moment(eventdata.start).startOf('month').format(),moment(eventdata.start).endOf('month').format()); getEvents(moment(eventdata.start).startOf('month').format(),moment(eventdata.start).endOf('month').format()); getFreeTime(moment(eventdata.start).subtract(2,'M').format(),moment(eventdata.end).add(2, 'M').format()); getEvents(moment(eventdata.start).subtract(2,'M').format(),moment(eventdata.end).add(2, 'M').format()); console.log(event,freetime); const temp=event.concat(freetime); } const handleDateClick = (event) => { debugger; console.log(event.dateStr); setModalShow(true); setDate(event.date.toISOString()); debugger; } return ( <> {setModalShow(false);if(x){getFreeTime(startdate,enddate);getEvents(startdate,enddate);}}} end={end} value={true} dateval={date} /> plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]} dayMaxEventRows= {2} initialView="dayGridMonth" headerToolbar={ { left: 'dayGridMonth,timeGridWeek', center: 'title', right: 'prev,next' } } datesSet= {(e)=> handleMonthChange(e) } eventBackgroundColor={"#3788d8"} eventColor={'#3788d8'} displayEventEnd={true} events={result} nowIndicator eventTextColor='white' dateClick={(e) => handleDateClick(e)} /> { block?:null } )}

Calendar.test.tsx

import {store} from '../app/newStore';import FreeTimeModal from "../components/calendar/FreeTimeModal";import { CalendarDataManager } from "@fullcalendar/react";import { mount } from "enzyme";// const ReduxWrapper = ({ children }) => (// // {children}// // ); // This component helps get rid of the following error :: react-i18nextjest.mock('react-i18next', () => ({ useTranslation: () => ({t: key => key}) })); test("Snapshot for Calendar Component", () => { const Component = renderer.create( ) .toJSON() expect(Component).toMatchSnapshot()}) describe("Snapshot testing of FreeTimeModal.tsx", () => { test("Snapshot for FreeTimeModal Component", () => { const renderedComponent = renderer .create() .toJSON() expect(renderedComponent).toMatchSnapshot() })}) 

Comments

Mohamed Atef Date : 2022-09-08

Best answers

52

Best answers

52

Please describe what you trying to do then you face this error, please when you are writing the code in the comments/discussions please use this option which called “Insert code block”.

Thanks


 

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

[Solved] Cannot read properties of null (reading 'getBoundingClientRect')
Publish date: 2021-12-02 | Comments: 2

Tag: React js

TypeError: Super expression must either be null or a function
Publish date: 2022-03-13 | Comments: 2

Tag: React js

React Component displaying a list of lines
Publish date: 2022-03-19 | Comments: 3

Tag: React js

[solved] Expected a conditional expression and instead saw an assignment
Publish date: 2021-11-29 | Comments: 0

Tag: React js

Best way to update the state in one class component from the redux store?
Publish date: 2022-03-30 | Comments: 3

Tag: React js