Warning: `NaN` is an invalid value for the `height` css style property.
Author: isi-gachCreated Oct 22, 2018Updated Jul 23, 2026
I'm getting the following warnings in a Jest test:
console.error node_modules/fbjs/lib/warning.js:33
Warning: `NaN` is an invalid value for the `height` css style property.
in div (created by DayPicker)
in div (created by DayPicker)
in div (created by DayPicker)
in div (created by OutsideClickHandler)
in OutsideClickHandler (created by DayPicker)
in div (created by DayPicker)
in DayPicker (created by withStyles(DayPicker))
in withStyles(DayPicker) (created by DayPickerSingleDateController)
in DayPickerSingleDateController (at DateTimeSelector.js:131)
in div (created by DateTimeSelector__DayPickerWrapper)
in DateTimeSelector__DayPickerWrapper (at DateTimeSelector.js:130)
in div (created by DateTimeSelector__Container)
in DateTimeSelector__Container (at DateTimeSelector.js:126)
in DateTimeSelector (created by Connect(DateTimeSelector))
in Connect(DateTimeSelector) (at OrderPage.js:166)
in div (created by OrderPage__Container)
in OrderPage__Container (at OrderPage.js:165)
in OrderPage (created by Connect(OrderPage))
in Connect(OrderPage) (at index.js:9)
in Route (at index.js:5)
in ProtectedRoute (at PortalApp.js:36)
in Switch (at PortalApp.js:22)
in div (at PortalApp.js:20)
in Router (created by BrowserRouter)
in BrowserRouter (at PortalApp.js:19)
in Routes (created by Connect(Routes))
in Connect(Routes) (at PortalApp.js:85)
in Provider (at PortalApp.js:84)
in PortalApp (created by WrapperComponent)
in WrapperComponent
console.error node_modules/fbjs/lib/warning.js:33
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
Please check the code for the DayPicker component.I solved that adding the following line to setupTests.js:
jest.spyOn(CalendarMonth.WrappedComponent.prototype, 'setMonthTitleHeight').mockImplementation();I also get the following:
console.error node_modules/fbjs/lib/warning.js:33
Warning: `NaN` is an invalid value for the `width` css style property.
in div (created by DayPicker)
in DayPicker (created by withStyles(DayPicker))
in withStyles(DayPicker) (created by DayPickerSingleDateController)
in DayPickerSingleDateController (at DateTimeSelector.js:131)
in div (created by DateTimeSelector__DayPickerWrapper)
in DateTimeSelector__DayPickerWrapper (at DateTimeSelector.js:130)
in div (created by DateTimeSelector__Container)
in DateTimeSelector__Container (at DateTimeSelector.js:126)
in DateTimeSelector (created by Connect(DateTimeSelector))
in Connect(DateTimeSelector) (at OrderPage.js:166)
in div (created by OrderPage__Container)
in OrderPage__Container (at OrderPage.js:165)
in OrderPage (created by Connect(OrderPage))
in Connect(OrderPage) (at index.js:9)
in Route (at index.js:5)
in ProtectedRoute (at PortalApp.js:36)
in Switch (at PortalApp.js:22)
in div (at PortalApp.js:20)
in Router (created by BrowserRouter)
in BrowserRouter (at PortalApp.js:19)
in Routes (created by Connect(Routes))
in Connect(Routes) (at PortalApp.js:85)
in Provider (at PortalApp.js:84)
in PortalApp (created by WrapperComponent)
in WrapperComponentSolved by:
const { componentDidMount } = DayPicker.WrappedComponent.prototype;
jest.spyOn(DayPicker.WrappedComponent.prototype, 'componentDidMount').mockImplementation(
function mock(...args) {
const { style } = this.calendarInfo;
if (!style.marginLeft) style.marginLeft = 0;
if (!style.marginRight) style.marginRight = 0;
componentDidMount.apply(this, args);
},
);I think that both NaN are generated in calculateDimension
https://github.com/airbnb/react-dates/blob/83ec316167b499ce939058973da0aff30e70d178/src/utils/calculateDimension.js#L19
Would be nice to do something like:
if (withMargin) {
size +=
parseFloat(style[`margin${axisStart}`] || 0)
+ parseFloat(style[`margin${axisEnd}`] || 0);
}Source: react-dates/react-dates