react-calendar - npm Package Compare versions

Comparing version 3.7.0 to 3.8.0

dist/esm/Calendar.js

 var _excluded = ["activeStartDate", "defaultActiveStartDate", "defaultValue", "defaultView", "maxDetail", "minDetail", "value", "view"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -15,3 +15,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -26,3 +26,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -351,6 +351,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
     _defineProperty(_assertThisInitialized(_this), "onChange", function (value, event) {
-      var selectRange = _this.props.selectRange;
+      var _assertThisInitialize4 = _assertThisInitialized(_this),
+          previousValue = _assertThisInitialize4.value;
 
+      var _this$props2 = _this.props,
+          goToRangeStartOnSelect = _this$props2.goToRangeStartOnSelect,
+          selectRange = _this$props2.selectRange;
+
       _this.onClickTile(value, event);
 
+      var isFirstValueInRange = selectRange && !getIsSingleValue(previousValue);
       var nextValue;
@@ -360,7 +366,6 @@
         // Range selection turned on
-        var _assertThisInitialize4 = _assertThisInitialized(_this),
-            previousValue = _assertThisInitialize4.value,
-            valueType = _assertThisInitialize4.valueType;
+        var _assertThisInitialize5 = _assertThisInitialized(_this),
+            valueType = _assertThisInitialize5.valueType;
 
-        if (!getIsSingleValue(previousValue)) {
+        if (isFirstValueInRange) {
           // Value has 0 or 2 elements - either way we're starting a new array
@@ -378,5 +383,8 @@ // First value
 
-      var nextActiveStartDate = getActiveStartDate(_objectSpread(_objectSpread({}, _this.props), {}, {
+      var nextActiveStartDate = // Range selection turned off
+      !selectRange || // Range selection turned on, first value
+      isFirstValueInRange || // Range selection turned on, second value, goToRangeStartOnSelect toggled on
+      goToRangeStartOnSelect ? getActiveStartDate(_objectSpread(_objectSpread({}, _this.props), {}, {
         value: nextValue
-      }));
+      })) : null;
       event.persist();
@@ -392,10 +400,10 @@
     _defineProperty(_assertThisInitialized(_this), "onClickTile", function (value, event) {
-      var _assertThisInitialize5 = _assertThisInitialized(_this),
-          view = _assertThisInitialize5.view;
+      var _assertThisInitialize6 = _assertThisInitialized(_this),
+          view = _assertThisInitialize6.view;
 
-      var _this$props2 = _this.props,
-          onClickDay = _this$props2.onClickDay,
-          onClickDecade = _this$props2.onClickDecade,
-          onClickMonth = _this$props2.onClickMonth,
-          onClickYear = _this$props2.onClickYear;
+      var _this$props3 = _this.props,
+          onClickDay = _this$props3.onClickDay,
+          onClickDecade = _this$props3.onClickDecade,
+          onClickMonth = _this$props3.onClickMonth,
+          onClickYear = _this$props3.onClickYear;
 
@@ -455,5 +463,5 @@ var callback = function () {
     get: function get() {
-      var _this$props3 = this.props,
-          selectRange = _this$props3.selectRange,
-          valueProps = _this$props3.value;
+      var _this$props4 = this.props,
+          selectRange = _this$props4.selectRange,
+          valueProps = _this$props4.value;
       var valueState = this.state.value; // In the middle of range selection, use value from state
@@ -476,6 +484,6 @@
     get: function get() {
-      var _this$props4 = this.props,
-          minDetail = _this$props4.minDetail,
-          maxDetail = _this$props4.maxDetail,
-          viewProps = _this$props4.view;
+      var _this$props5 = this.props,
+          minDetail = _this$props5.minDetail,
+          maxDetail = _this$props5.maxDetail,
+          viewProps = _this$props5.view;
       var viewState = this.state.view;
@@ -487,5 +495,5 @@ return getView(viewProps || viewState, minDetail, maxDetail);
     get: function get() {
-      var _this$props5 = this.props,
-          minDetail = _this$props5.minDetail,
-          maxDetail = _this$props5.maxDetail;
+      var _this$props6 = this.props,
+          minDetail = _this$props6.minDetail,
+          maxDetail = _this$props6.maxDetail;
       return getLimitedViews(minDetail, maxDetail);
@@ -521,7 +529,7 @@ }
     value: function getProcessedValue(value) {
-      var _this$props6 = this.props,
-          minDate = _this$props6.minDate,
-          maxDate = _this$props6.maxDate,
-          maxDetail = _this$props6.maxDetail,
-          returnValue = _this$props6.returnValue;
+      var _this$props7 = this.props,
+          minDate = _this$props7.minDate,
+          maxDate = _this$props7.maxDate,
+          maxDetail = _this$props7.maxDetail,
+          returnValue = _this$props7.returnValue;
 
@@ -559,11 +567,11 @@ var processFunction = function () {
           view = this.view;
-      var _this$props7 = this.props,
-          calendarType = _this$props7.calendarType,
-          locale = _this$props7.locale,
-          maxDate = _this$props7.maxDate,
-          minDate = _this$props7.minDate,
-          selectRange = _this$props7.selectRange,
-          tileClassName = _this$props7.tileClassName,
-          tileContent = _this$props7.tileContent,
-          tileDisabled = _this$props7.tileDisabled;
+      var _this$props8 = this.props,
+          calendarType = _this$props8.calendarType,
+          locale = _this$props8.locale,
+          maxDate = _this$props8.maxDate,
+          minDate = _this$props8.minDate,
+          selectRange = _this$props8.selectRange,
+          tileClassName = _this$props8.tileClassName,
+          tileContent = _this$props8.tileContent,
+          tileDisabled = _this$props8.tileDisabled;
       var hover = this.hover;
@@ -606,5 +614,5 @@ var activeStartDate = next ? getBeginNext(view, currentActiveStartDate) : getBegin(view, currentActiveStartDate);
           {
-            var _this$props8 = this.props,
-                formatMonth = _this$props8.formatMonth,
-                formatMonthYear = _this$props8.formatMonthYear;
+            var _this$props9 = this.props,
+                formatMonth = _this$props9.formatMonth,
+                formatMonthYear = _this$props9.formatMonthYear;
             return /*#__PURE__*/React.createElement(YearView, _extends({
@@ -618,11 +626,11 @@ formatMonth: formatMonth,
           {
-            var _this$props9 = this.props,
-                formatDay = _this$props9.formatDay,
-                formatLongDate = _this$props9.formatLongDate,
-                formatShortWeekday = _this$props9.formatShortWeekday,
-                onClickWeekNumber = _this$props9.onClickWeekNumber,
-                showDoubleView = _this$props9.showDoubleView,
-                showFixedNumberOfWeeks = _this$props9.showFixedNumberOfWeeks,
-                showNeighboringMonth = _this$props9.showNeighboringMonth,
-                showWeekNumbers = _this$props9.showWeekNumbers;
+            var _this$props10 = this.props,
+                formatDay = _this$props10.formatDay,
+                formatLongDate = _this$props10.formatLongDate,
+                formatShortWeekday = _this$props10.formatShortWeekday,
+                onClickWeekNumber = _this$props10.onClickWeekNumber,
+                showDoubleView = _this$props10.showDoubleView,
+                showFixedNumberOfWeeks = _this$props10.showFixedNumberOfWeeks,
+                showNeighboringMonth = _this$props10.showNeighboringMonth,
+                showWeekNumbers = _this$props10.showWeekNumbers;
             var onMouseLeave = this.onMouseLeave;
@@ -658,20 +666,20 @@ return /*#__PURE__*/React.createElement(MonthView, _extends({
           views = this.views;
-      var _this$props10 = this.props,
-          formatMonthYear = _this$props10.formatMonthYear,
-          formatYear = _this$props10.formatYear,
-          locale = _this$props10.locale,
-          maxDate = _this$props10.maxDate,
-          minDate = _this$props10.minDate,
-          navigationAriaLabel = _this$props10.navigationAriaLabel,
-          navigationAriaLive = _this$props10.navigationAriaLive,
-          navigationLabel = _this$props10.navigationLabel,
-          next2AriaLabel = _this$props10.next2AriaLabel,
-          next2Label = _this$props10.next2Label,
-          nextAriaLabel = _this$props10.nextAriaLabel,
-          nextLabel = _this$props10.nextLabel,
-          prev2AriaLabel = _this$props10.prev2AriaLabel,
-          prev2Label = _this$props10.prev2Label,
-          prevAriaLabel = _this$props10.prevAriaLabel,
-          prevLabel = _this$props10.prevLabel,
-          showDoubleView = _this$props10.showDoubleView;
+      var _this$props11 = this.props,
+          formatMonthYear = _this$props11.formatMonthYear,
+          formatYear = _this$props11.formatYear,
+          locale = _this$props11.locale,
+          maxDate = _this$props11.maxDate,
+          minDate = _this$props11.minDate,
+          navigationAriaLabel = _this$props11.navigationAriaLabel,
+          navigationAriaLive = _this$props11.navigationAriaLive,
+          navigationLabel = _this$props11.navigationLabel,
+          next2AriaLabel = _this$props11.next2AriaLabel,
+          next2Label = _this$props11.next2Label,
+          nextAriaLabel = _this$props11.nextAriaLabel,
+          nextLabel = _this$props11.nextLabel,
+          prev2AriaLabel = _this$props11.prev2AriaLabel,
+          prev2Label = _this$props11.prev2Label,
+          prevAriaLabel = _this$props11.prevAriaLabel,
+          prevLabel = _this$props11.prevLabel,
+          showDoubleView = _this$props11.showDoubleView;
       return /*#__PURE__*/React.createElement(Navigation, {
@@ -705,7 +713,7 @@ activeStartDate: activeStartDate,
     value: function render() {
-      var _this$props11 = this.props,
-          className = _this$props11.className,
-          inputRef = _this$props11.inputRef,
-          selectRange = _this$props11.selectRange,
-          showDoubleView = _this$props11.showDoubleView;
+      var _this$props12 = this.props,
+          className = _this$props12.className,
+          inputRef = _this$props12.inputRef,
+          selectRange = _this$props12.selectRange,
+          showDoubleView = _this$props12.showDoubleView;
       var onMouseLeave = this.onMouseLeave,
@@ -730,2 +738,3 @@ value = this.value;
 Calendar.defaultProps = {
+  goToRangeStartOnSelect: true,
   maxDate: defaultMaxDate,
@@ -755,2 +764,3 @@ maxDetail: 'month',
   formatYear: PropTypes.func,
+  goToRangeStartOnSelect: PropTypes.bool,
   inputRef: isRef,
@@ -757,0 +767,0 @@ locale: PropTypes.string,

dist/esm/CenturyView/Decade.js

@@ -9,3 +9,3 @@ var _excluded = ["classes", "formatYear"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/esm/CenturyView/Decades.js

@@ -7,3 +7,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -10,0 +10,0 @@ import React from 'react';

dist/esm/DecadeView/Year.js

@@ -9,3 +9,3 @@ var _excluded = ["classes", "formatYear"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/esm/DecadeView/Years.js

@@ -7,3 +7,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -10,0 +10,0 @@ import React from 'react';

dist/esm/Flex.js

 var _excluded = ["children", "className", "direction", "count", "offset", "style", "wrap"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -5,0 +5,0 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

dist/esm/MonthView.js

 var _excluded = ["calendarType", "formatShortWeekday", "onClickWeekNumber", "showWeekNumbers"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -5,0 +5,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/esm/MonthView/Day.js

@@ -9,3 +9,3 @@ var _excluded = ["formatDay", "formatLongDate", "calendarType", "classes", "currentMonthIndex"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/esm/MonthView/Days.js

@@ -9,3 +9,3 @@ var _excluded = ["showFixedNumberOfWeeks", "showNeighboringMonth"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/esm/MonthView/Weekdays.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import mergeClassNames from 'merge-class-names';
 import { getYear, getMonth, getMonthStart } from '@wojtekmaj/date-utils';
 import Flex from '../Flex';
-import { getDayOfWeek } from '../shared/dates';
+import { getDayOfWeek, isWeekend } from '../shared/dates';
 import { formatWeekday, formatShortWeekday as defaultFormatShortWeekday } from '../shared/dateFormatter';
 import { isCalendarType } from '../shared/propTypes';
 var className = 'react-calendar__month-view__weekdays';
+var weekdayClassName = "".concat(className, "__weekday");
 export default function Weekdays(props) {
@@ -26,3 +28,3 @@ var calendarType = props.calendarType,
       key: weekday,
-      className: "".concat(className, "__weekday")
+      className: mergeClassNames(weekdayClassName, isWeekend(weekdayDate, calendarType) && "".concat(weekdayClassName, "--weekend"))
     }, /*#__PURE__*/React.createElement("abbr", {
@@ -29,0 +31,0 @@ "aria-label": abbr,

dist/esm/MonthView/WeekNumber.js

 var _excluded = ["date", "onClickWeekNumber", "weekNumber"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -5,0 +5,0 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

dist/esm/Tile.js

@@ -15,3 +15,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -26,3 +26,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -29,0 +29,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

dist/esm/TileGroup.js

@@ -9,3 +9,3 @@ var _excluded = ["className", "count", "dateTransform", "dateType", "end", "hover", "offset", "start", "step", "tile", "value", "valueType"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/esm/YearView/Month.js

@@ -9,3 +9,3 @@ var _excluded = ["classes", "formatMonth", "formatMonthYear"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -12,0 +12,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/esm/YearView/Months.js

@@ -7,3 +7,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -10,0 +10,0 @@ import React from 'react';

dist/umd/Calendar.js

@@ -38,3 +38,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -51,3 +51,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -62,3 +62,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -376,6 +376,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
     _defineProperty(_assertThisInitialized(_this), "onChange", function (value, event) {
-      var selectRange = _this.props.selectRange;
+      var _assertThisInitialize4 = _assertThisInitialized(_this),
+          previousValue = _assertThisInitialize4.value;
 
+      var _this$props2 = _this.props,
+          goToRangeStartOnSelect = _this$props2.goToRangeStartOnSelect,
+          selectRange = _this$props2.selectRange;
+
       _this.onClickTile(value, event);
 
+      var isFirstValueInRange = selectRange && !getIsSingleValue(previousValue);
       var nextValue;
@@ -385,7 +391,6 @@
         // Range selection turned on
-        var _assertThisInitialize4 = _assertThisInitialized(_this),
-            previousValue = _assertThisInitialize4.value,
-            valueType = _assertThisInitialize4.valueType;
+        var _assertThisInitialize5 = _assertThisInitialized(_this),
+            valueType = _assertThisInitialize5.valueType;
 
-        if (!getIsSingleValue(previousValue)) {
+        if (isFirstValueInRange) {
           // Value has 0 or 2 elements - either way we're starting a new array
@@ -403,5 +408,8 @@ // First value
 
-      var nextActiveStartDate = getActiveStartDate(_objectSpread(_objectSpread({}, _this.props), {}, {
+      var nextActiveStartDate = // Range selection turned off
+      !selectRange || // Range selection turned on, first value
+      isFirstValueInRange || // Range selection turned on, second value, goToRangeStartOnSelect toggled on
+      goToRangeStartOnSelect ? getActiveStartDate(_objectSpread(_objectSpread({}, _this.props), {}, {
         value: nextValue
-      }));
+      })) : null;
       event.persist();
@@ -417,10 +425,10 @@
     _defineProperty(_assertThisInitialized(_this), "onClickTile", function (value, event) {
-      var _assertThisInitialize5 = _assertThisInitialized(_this),
-          view = _assertThisInitialize5.view;
+      var _assertThisInitialize6 = _assertThisInitialized(_this),
+          view = _assertThisInitialize6.view;
 
-      var _this$props2 = _this.props,
-          onClickDay = _this$props2.onClickDay,
-          onClickDecade = _this$props2.onClickDecade,
-          onClickMonth = _this$props2.onClickMonth,
-          onClickYear = _this$props2.onClickYear;
+      var _this$props3 = _this.props,
+          onClickDay = _this$props3.onClickDay,
+          onClickDecade = _this$props3.onClickDecade,
+          onClickMonth = _this$props3.onClickMonth,
+          onClickYear = _this$props3.onClickYear;
 
@@ -480,5 +488,5 @@ var callback = function () {
     get: function get() {
-      var _this$props3 = this.props,
-          selectRange = _this$props3.selectRange,
-          valueProps = _this$props3.value;
+      var _this$props4 = this.props,
+          selectRange = _this$props4.selectRange,
+          valueProps = _this$props4.value;
       var valueState = this.state.value; // In the middle of range selection, use value from state
@@ -501,6 +509,6 @@
     get: function get() {
-      var _this$props4 = this.props,
-          minDetail = _this$props4.minDetail,
-          maxDetail = _this$props4.maxDetail,
-          viewProps = _this$props4.view;
+      var _this$props5 = this.props,
+          minDetail = _this$props5.minDetail,
+          maxDetail = _this$props5.maxDetail,
+          viewProps = _this$props5.view;
       var viewState = this.state.view;
@@ -512,5 +520,5 @@ return getView(viewProps || viewState, minDetail, maxDetail);
     get: function get() {
-      var _this$props5 = this.props,
-          minDetail = _this$props5.minDetail,
-          maxDetail = _this$props5.maxDetail;
+      var _this$props6 = this.props,
+          minDetail = _this$props6.minDetail,
+          maxDetail = _this$props6.maxDetail;
       return getLimitedViews(minDetail, maxDetail);
@@ -546,7 +554,7 @@ }
     value: function getProcessedValue(value) {
-      var _this$props6 = this.props,
-          minDate = _this$props6.minDate,
-          maxDate = _this$props6.maxDate,
-          maxDetail = _this$props6.maxDetail,
-          returnValue = _this$props6.returnValue;
+      var _this$props7 = this.props,
+          minDate = _this$props7.minDate,
+          maxDate = _this$props7.maxDate,
+          maxDetail = _this$props7.maxDetail,
+          returnValue = _this$props7.returnValue;
 
@@ -584,11 +592,11 @@ var processFunction = function () {
           view = this.view;
-      var _this$props7 = this.props,
-          calendarType = _this$props7.calendarType,
-          locale = _this$props7.locale,
-          maxDate = _this$props7.maxDate,
-          minDate = _this$props7.minDate,
-          selectRange = _this$props7.selectRange,
-          tileClassName = _this$props7.tileClassName,
-          tileContent = _this$props7.tileContent,
-          tileDisabled = _this$props7.tileDisabled;
+      var _this$props8 = this.props,
+          calendarType = _this$props8.calendarType,
+          locale = _this$props8.locale,
+          maxDate = _this$props8.maxDate,
+          minDate = _this$props8.minDate,
+          selectRange = _this$props8.selectRange,
+          tileClassName = _this$props8.tileClassName,
+          tileContent = _this$props8.tileContent,
+          tileDisabled = _this$props8.tileDisabled;
       var hover = this.hover;
@@ -631,5 +639,5 @@ var activeStartDate = next ? (0, _dates.getBeginNext)(view, currentActiveStartDate) : (0, _dates.getBegin)(view, currentActiveStartDate);
           {
-            var _this$props8 = this.props,
-                formatMonth = _this$props8.formatMonth,
-                formatMonthYear = _this$props8.formatMonthYear;
+            var _this$props9 = this.props,
+                formatMonth = _this$props9.formatMonth,
+                formatMonthYear = _this$props9.formatMonthYear;
             return /*#__PURE__*/_react["default"].createElement(_YearView["default"], _extends({
@@ -643,11 +651,11 @@ formatMonth: formatMonth,
           {
-            var _this$props9 = this.props,
-                formatDay = _this$props9.formatDay,
-                formatLongDate = _this$props9.formatLongDate,
-                formatShortWeekday = _this$props9.formatShortWeekday,
-                onClickWeekNumber = _this$props9.onClickWeekNumber,
-                showDoubleView = _this$props9.showDoubleView,
-                showFixedNumberOfWeeks = _this$props9.showFixedNumberOfWeeks,
-                showNeighboringMonth = _this$props9.showNeighboringMonth,
-                showWeekNumbers = _this$props9.showWeekNumbers;
+            var _this$props10 = this.props,
+                formatDay = _this$props10.formatDay,
+                formatLongDate = _this$props10.formatLongDate,
+                formatShortWeekday = _this$props10.formatShortWeekday,
+                onClickWeekNumber = _this$props10.onClickWeekNumber,
+                showDoubleView = _this$props10.showDoubleView,
+                showFixedNumberOfWeeks = _this$props10.showFixedNumberOfWeeks,
+                showNeighboringMonth = _this$props10.showNeighboringMonth,
+                showWeekNumbers = _this$props10.showWeekNumbers;
             var onMouseLeave = this.onMouseLeave;
@@ -683,20 +691,20 @@ return /*#__PURE__*/_react["default"].createElement(_MonthView["default"], _extends({
           views = this.views;
-      var _this$props10 = this.props,
-          formatMonthYear = _this$props10.formatMonthYear,
-          formatYear = _this$props10.formatYear,
-          locale = _this$props10.locale,
-          maxDate = _this$props10.maxDate,
-          minDate = _this$props10.minDate,
-          navigationAriaLabel = _this$props10.navigationAriaLabel,
-          navigationAriaLive = _this$props10.navigationAriaLive,
-          navigationLabel = _this$props10.navigationLabel,
-          next2AriaLabel = _this$props10.next2AriaLabel,
-          next2Label = _this$props10.next2Label,
-          nextAriaLabel = _this$props10.nextAriaLabel,
-          nextLabel = _this$props10.nextLabel,
-          prev2AriaLabel = _this$props10.prev2AriaLabel,
-          prev2Label = _this$props10.prev2Label,
-          prevAriaLabel = _this$props10.prevAriaLabel,
-          prevLabel = _this$props10.prevLabel,
-          showDoubleView = _this$props10.showDoubleView;
+      var _this$props11 = this.props,
+          formatMonthYear = _this$props11.formatMonthYear,
+          formatYear = _this$props11.formatYear,
+          locale = _this$props11.locale,
+          maxDate = _this$props11.maxDate,
+          minDate = _this$props11.minDate,
+          navigationAriaLabel = _this$props11.navigationAriaLabel,
+          navigationAriaLive = _this$props11.navigationAriaLive,
+          navigationLabel = _this$props11.navigationLabel,
+          next2AriaLabel = _this$props11.next2AriaLabel,
+          next2Label = _this$props11.next2Label,
+          nextAriaLabel = _this$props11.nextAriaLabel,
+          nextLabel = _this$props11.nextLabel,
+          prev2AriaLabel = _this$props11.prev2AriaLabel,
+          prev2Label = _this$props11.prev2Label,
+          prevAriaLabel = _this$props11.prevAriaLabel,
+          prevLabel = _this$props11.prevLabel,
+          showDoubleView = _this$props11.showDoubleView;
       return /*#__PURE__*/_react["default"].createElement(_Navigation["default"], {
@@ -730,7 +738,7 @@ activeStartDate: activeStartDate,
     value: function render() {
-      var _this$props11 = this.props,
-          className = _this$props11.className,
-          inputRef = _this$props11.inputRef,
-          selectRange = _this$props11.selectRange,
-          showDoubleView = _this$props11.showDoubleView;
+      var _this$props12 = this.props,
+          className = _this$props12.className,
+          inputRef = _this$props12.inputRef,
+          selectRange = _this$props12.selectRange,
+          showDoubleView = _this$props12.showDoubleView;
       var onMouseLeave = this.onMouseLeave,
@@ -755,2 +763,3 @@ value = this.value;
 Calendar.defaultProps = {
+  goToRangeStartOnSelect: true,
   maxDate: defaultMaxDate,
@@ -783,2 +792,3 @@ maxDetail: 'month',
   formatYear: _propTypes["default"].func,
+  goToRangeStartOnSelect: _propTypes["default"].bool,
   inputRef: _propTypes2.isRef,
@@ -785,0 +795,0 @@ locale: _propTypes["default"].string,

dist/umd/CenturyView/Decade.js

@@ -32,3 +32,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -35,0 +35,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/umd/CenturyView/Decades.js

@@ -28,3 +28,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -31,0 +31,0 @@ function Decades(props) {

dist/umd/DecadeView/Year.js

@@ -30,3 +30,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -33,0 +33,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/umd/DecadeView/Years.js

@@ -26,3 +26,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -29,0 +29,0 @@ function Years(props) {

dist/umd/Flex.js

@@ -16,3 +16,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -19,0 +19,0 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

dist/umd/MonthView.js

@@ -28,3 +28,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -31,0 +31,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/umd/MonthView/Day.js

@@ -32,3 +32,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -35,0 +35,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/umd/MonthView/Days.js

@@ -32,3 +32,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -35,0 +35,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/umd/MonthView/Weekdays.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _mergeClassNames = _interopRequireDefault(require("merge-class-names"));
+
 var _dateUtils = require("@wojtekmaj/date-utils");
@@ -26,2 +28,3 @@
 var className = 'react-calendar__month-view__weekdays';
+var weekdayClassName = "".concat(className, "__weekday");
 
@@ -45,3 +48,3 @@ function Weekdays(props) {
       key: weekday,
-      className: "".concat(className, "__weekday")
+      className: (0, _mergeClassNames["default"])(weekdayClassName, (0, _dates.isWeekend)(weekdayDate, calendarType) && "".concat(weekdayClassName, "--weekend"))
     }, /*#__PURE__*/_react["default"].createElement("abbr", {
@@ -48,0 +51,0 @@ "aria-label": abbr,

dist/umd/MonthView/WeekNumber.js

@@ -16,3 +16,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -19,0 +19,0 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

dist/umd/Tile.js

@@ -36,3 +36,3 @@ "use strict";
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -47,3 +47,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -50,0 +50,0 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

dist/umd/TileGroup.js

@@ -28,3 +28,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -31,0 +31,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/umd/YearView/Month.js

@@ -30,3 +30,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -33,0 +33,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

dist/umd/YearView/Months.js

@@ -28,3 +28,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -31,0 +31,0 @@ function Months(props) {

package.json

 {
   "name": "react-calendar",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "Ultimate calendar for your React app.",
@@ -79,8 +79,9 @@ "main": "dist/umd/index.js",
     "@babel/preset-react": "^7.14.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
-    "enzyme": "^3.10.0",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.0",
     "eslint": "^8.5.0",
     "eslint-config-wojtekmaj": "^0.6.5",
-    "husky": "^7.0.0",
-    "jest": "^27.0.0",
+    "husky": "^8.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
     "less": "^4.0.0",
@@ -87,0 +88,0 @@ "prettier": "^2.5.0",

README.md

@@ -102,2 +102,3 @@ [![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) [![CI](https://github.com/wojtekmaj/react-calendar/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-calendar/actions) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 | formatYear              | Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function.                                                                                                                                                                                                                                                                                     | (default formatter)                                   | `(locale, date) => formatDate(date, 'YYYY')`                                                                                                                                                                                                                                                         |
+| goToRangeStartOnSelect  | Whether to go to the beginning of the range when selecting the end of the range.                                                                                                                                                                                                                                                                                                                                           | `true`                                                | `false`                                                                                                                                                                                                                                                                                              |
 | inputRef                | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Calendar>` component.                                                                                                                                                                                                                                                                        | n/a                                                   | <ul><li>Function:<br />`(ref) => { this.myCalendar = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul> |
@@ -104,0 +105,0 @@ | locale                  | Locale that should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).                                                                                                                                                                                                                                                                                               | User's browser settings                               | `"hu-HU"`                                                                                                                                                                                                                                                                                            |

src/Calendar.jsx

@@ -375,11 +375,14 @@ import React, { Component } from 'react';
   onChange = (value, event) => {
-    const { selectRange } = this.props;
+    const { value: previousValue } = this;
+    const { goToRangeStartOnSelect, selectRange } = this.props;
 
     this.onClickTile(value, event);
 
+    const isFirstValueInRange = selectRange && !getIsSingleValue(previousValue);
+
     let nextValue;
     if (selectRange) {
       // Range selection turned on
-      const { value: previousValue, valueType } = this;
-      if (!getIsSingleValue(previousValue)) {
+      const { valueType } = this;
+      if (isFirstValueInRange) {
         // Value has 0 or 2 elements - either way we're starting a new array
@@ -397,6 +400,14 @@ // First value
 
-    const nextActiveStartDate = getActiveStartDate({
-      ...this.props,
-      value: nextValue,
-    });
+    const nextActiveStartDate =
+      // Range selection turned off
+      !selectRange ||
+      // Range selection turned on, first value
+      isFirstValueInRange ||
+      // Range selection turned on, second value, goToRangeStartOnSelect toggled on
+      goToRangeStartOnSelect
+        ? getActiveStartDate({
+            ...this.props,
+            value: nextValue,
+          })
+        : null;
 
@@ -627,2 +638,3 @@ event.persist();
 Calendar.defaultProps = {
+  goToRangeStartOnSelect: true,
   maxDate: defaultMaxDate,
@@ -654,2 +666,3 @@ maxDetail: 'month',
   formatYear: PropTypes.func,
+  goToRangeStartOnSelect: PropTypes.bool,
   inputRef: isRef,
@@ -656,0 +669,0 @@ locale: PropTypes.string,

src/Calendar.spec.jsx

@@ -1,3 +0,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
+import React, { createRef } from 'react';
+import { render } from '@testing-library/react';
 import { getMonthStart } from '@wojtekmaj/date-utils';
@@ -21,7 +21,7 @@
 
-    const component = shallow(<Calendar className={className} />);
+    const { container } = render(<Calendar className={className} />);
 
-    const wrapperClassName = component.find('.react-calendar').prop('className');
+    const wrapper = container.querySelector('.react-calendar');
 
-    expect(wrapperClassName.includes(className)).toBe(true);
+    expect(wrapper).toHaveClass(className);
   });
@@ -32,3 +32,3 @@
 
-    mount(<Calendar inputRef={inputRef} />);
+    render(<Calendar inputRef={inputRef} />);
 
@@ -40,51 +40,63 @@ expect(inputRef).toHaveBeenCalled();
   it('renders Navigation by default', () => {
-    const component = shallow(<Calendar />);
+    const { container } = render(<Calendar />);
 
-    const navigation = component.find('Navigation');
+    const navigation = container.querySelector('.react-calendar__navigation');
 
-    expect(navigation).toHaveLength(1);
+    expect(navigation).toBeInTheDocument();
   });
 
   it('does not render Navigation when showNavigation flag is set to false', () => {
-    const component = shallow(<Calendar showNavigation={false} />);
+    const { container } = render(<Calendar showNavigation={false} />);
 
-    const navigation = component.find('Navigation');
+    const navigation = container.querySelector('.react-calendar__navigation');
 
-    expect(navigation).toHaveLength(0);
+    expect(navigation).not.toBeInTheDocument();
   });
 
   it('uses given value when passed value using value prop', () => {
-    const component = shallow(<Calendar value={new Date(2019, 0, 1)} />);
+    const instance = createRef();
 
-    expect(component.instance().value).toEqual(new Date(2019, 0, 1));
+    render(<Calendar value={new Date(2019, 0, 1)} ref={instance} />);
+
+    expect(instance.current.value).toEqual(new Date(2019, 0, 1));
   });
 
   it('uses given value when passed value using defaultValue prop', () => {
-    const component = shallow(<Calendar defaultValue={new Date(2019, 0, 1)} />);
+    const instance = createRef();
 
-    expect(component.instance().value).toEqual(new Date(2019, 0, 1));
+    render(<Calendar defaultValue={new Date(2019, 0, 1)} ref={instance} />);
+
+    expect(instance.current.value).toEqual(new Date(2019, 0, 1));
   });
 
   it('renders given view when passed view using view prop', () => {
-    const component = shallow(<Calendar view="century" />);
+    const instance = createRef();
 
-    expect(component.instance().view).toBe('century');
+    render(<Calendar view="century" ref={instance} />);
+
+    expect(instance.current.view).toBe('century');
   });
 
   it('renders given view when passed view using defaultView prop', () => {
-    const component = shallow(<Calendar defaultView="century" />);
+    const instance = createRef();
 
-    expect(component.instance().view).toBe('century');
+    render(<Calendar defaultView="century" ref={instance} />);
+
+    expect(instance.current.view).toBe('century');
   });
 
   it('renders given active start date when passed active start date using activeStartDate prop', () => {
-    const component = shallow(<Calendar activeStartDate={new Date(2019, 0, 1)} />);
+    const instance = createRef();
 
-    expect(component.instance().activeStartDate).toEqual(new Date(2019, 0, 1));
+    render(<Calendar activeStartDate={new Date(2019, 0, 1)} ref={instance} />);
+
+    expect(instance.current.activeStartDate).toEqual(new Date(2019, 0, 1));
   });
 
   it('renders given active start date when passed active start date using activeStartDate prop', () => {
-    const component = shallow(<Calendar defaultActiveStartDate={new Date(2019, 0, 1)} />);
+    const instance = createRef();
 
-    expect(component.instance().activeStartDate).toEqual(new Date(2019, 0, 1));
+    render(<Calendar defaultActiveStartDate={new Date(2019, 0, 1)} ref={instance} />);
+
+    expect(instance.current.activeStartDate).toEqual(new Date(2019, 0, 1));
   });
@@ -96,8 +108,9 @@
     const newActiveStartDate = new Date(2018, 0, 1);
+    const instance = createRef();
 
-    const component = shallow(<Calendar value={value} />);
+    const { rerender } = render(<Calendar value={value} ref={instance} />);
 
-    component.setProps({ value: newValue });
+    rerender(<Calendar value={newValue} ref={instance} />);
 
-    expect(component.instance().activeStartDate).toEqual(newActiveStartDate);
+    expect(instance.current.activeStartDate).toEqual(newActiveStartDate);
   });
@@ -109,8 +122,9 @@
     const newActiveStartDate = new Date(2018, 0, 1);
+    const instance = createRef();
 
-    const component = shallow(<Calendar value={value} />);
+    render(<Calendar value={value} ref={instance} />);
 
-    component.instance().onChange(newValue, event);
+    instance.current.onChange(newValue, event);
 
-    expect(component.instance().activeStartDate).toEqual(newActiveStartDate);
+    expect(instance.current.activeStartDate).toEqual(newActiveStartDate);
   });
@@ -121,7 +135,9 @@
     const newActiveStartDate = new Date(2018, 0, 1);
-    const component = shallow(<Calendar activeStartDate={activeStartDate} />);
+    const instance = createRef();
 
-    component.setProps({ activeStartDate: newActiveStartDate });
+    const { rerender } = render(<Calendar activeStartDate={activeStartDate} ref={instance} />);
 
-    expect(component.instance().activeStartDate).toEqual(newActiveStartDate);
+    rerender(<Calendar activeStartDate={newActiveStartDate} ref={instance} />);
+
+    expect(instance.current.activeStartDate).toEqual(newActiveStartDate);
   });
@@ -131,101 +147,106 @@
     it('renders MonthView by default', () => {
-      const component = shallow(<Calendar />);
+      const { container } = render(<Calendar />);
 
-      const monthView = component.find('MonthView');
+      const monthView = container.querySelector('.react-calendar__month-view');
 
-      expect(monthView).toHaveLength(1);
+      expect(monthView).toBeInTheDocument();
     });
 
     it('renders MonthView when given view = "month"', () => {
-      const component = shallow(<Calendar view="month" />);
+      const { container } = render(<Calendar view="month" />);
 
-      const monthView = component.find('MonthView');
+      const monthView = container.querySelector('.react-calendar__month-view');
 
-      expect(monthView).toHaveLength(1);
+      expect(monthView).toBeInTheDocument();
     });
 
     it('renders YearView when given view = "year"', () => {
-      const component = shallow(<Calendar view="year" />);
+      const { container } = render(<Calendar view="year" />);
 
-      const yearView = component.find('YearView');
+      const yearView = container.querySelector('.react-calendar__year-view');
 
-      expect(yearView).toHaveLength(1);
+      expect(yearView).toBeInTheDocument();
     });
 
     it('renders DecadeView when given view = "decade"', () => {
-      const component = shallow(<Calendar view="decade" />);
+      const { container } = render(<Calendar view="decade" />);
 
-      const decadeView = component.find('DecadeView');
+      const decadeView = container.querySelector('.react-calendar__decade-view');
 
-      expect(decadeView).toHaveLength(1);
+      expect(decadeView).toBeInTheDocument();
     });
 
     it('renders CenturyView when given view = "century"', () => {
-      const component = shallow(<Calendar view="century" />);
+      const { container } = render(<Calendar view="century" />);
 
-      const centuryView = component.find('CenturyView');
+      const centuryView = container.querySelector('.react-calendar__century-view');
 
-      expect(centuryView).toHaveLength(1);
+      expect(centuryView).toBeInTheDocument();
     });
 
     it('renders maximum allowed view when given maxDetail', () => {
-      const component = shallow(<Calendar maxDetail="year" />);
+      const { container } = render(<Calendar maxDetail="year" />);
 
-      const yearView = component.find('YearView');
+      const yearView = container.querySelector('.react-calendar__year-view');
 
-      expect(yearView).toHaveLength(1);
+      expect(yearView).toBeInTheDocument();
     });
 
     it('renders maximum allowed view when given view that is not allowed', () => {
-      const component = shallow(<Calendar maxDetail="year" view="month" />);
+      const { container } = render(<Calendar maxDetail="year" view="month" />);
 
-      const yearView = component.find('YearView');
+      const yearView = container.querySelector('.react-calendar__year-view');
 
-      expect(yearView).toHaveLength(1);
+      expect(yearView).toBeInTheDocument();
     });
 
     it('renders maximum allowed view when attempting to externally switch to a view that is not allowed', () => {
-      const component = shallow(<Calendar maxDetail="year" view="year" />);
+      const { container, rerender } = render(<Calendar maxDetail="year" view="year" />);
 
-      component.setProps({ view: 'month' });
+      rerender(<Calendar maxDetail="year" view="month" />);
 
-      const yearView = component.find('YearView');
+      const yearView = container.querySelector('.react-calendar__year-view');
 
-      expect(yearView).toHaveLength(1);
+      expect(yearView).toBeInTheDocument();
     });
 
     it('renders maximum allowed view when given changed maxDetail', () => {
-      const component = shallow(<Calendar maxDetail="month" view="month" />);
+      const { container, rerender } = render(<Calendar maxDetail="month" view="month" />);
 
-      component.setProps({ maxDetail: 'year' });
-      component.update();
+      rerender(<Calendar maxDetail="year" view="month" />);
 
-      const yearView = component.find('YearView');
+      const yearView = container.querySelector('.react-calendar__year-view');
 
-      expect(yearView).toHaveLength(1);
+      expect(yearView).toBeInTheDocument();
     });
   });
 
-  it('does not pass showWeekNumbers flag to MonthView component by default', () => {
-    const component = shallow(<Calendar view="month" />);
+  it('does not render WeekNumbers component by default', () => {
+    const { container } = render(<Calendar view="month" />);
 
-    const monthView = component.find('MonthView');
+    const weekNumbers = container.querySelector('.react-calendar__month-view__weekNumbers');
 
-    expect(monthView.prop('showWeekNumbers')).toBeFalsy();
+    expect(weekNumbers).not.toBeInTheDocument();
   });
 
-  it('passes showWeekNumbers flag to MonthView component given showWeekNumbers flag', () => {
-    const component = shallow(<Calendar showWeekNumbers view="month" />);
+  it('renders WeekNumbers component given showWeekNumbers flag', () => {
+    const { container } = render(<Calendar showWeekNumbers view="month" />);
 
-    const monthView = component.find('MonthView');
+    const weekNumbers = container.querySelector('.react-calendar__month-view__weekNumbers');
 
-    expect(monthView.prop('showWeekNumbers')).toBeTruthy();
+    expect(weekNumbers).toBeInTheDocument();
   });
 
   it('passes showNeighboringMonth flag to MonthView component given showNeighboringMonth flag', () => {
-    const component = shallow(<Calendar showNeighboringMonth view="month" />);
+    const activeStartDate = new Date(2017, 0, 1);
 
-    const monthView = component.find('MonthView');
+    const { container } = render(
+      <Calendar activeStartDate={activeStartDate} showNeighboringMonth view="month" />,
+    );
 
-    expect(monthView.prop('showNeighboringMonth')).toBeTruthy();
+    const firstDayTile = container.querySelector('.react-calendar__tile');
+    const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
+
+    // The first date that this calendar should show is December 26, 2016.
+    expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2016, 11, 26)));
   });
@@ -236,7 +257,11 @@
       const defaultValue = new Date(2017, 0, 15);
-      const component = shallow(<Calendar defaultValue={defaultValue} />);
 
-      const monthView = component.find('MonthView');
+      const { container } = render(
+        <Calendar defaultValue={defaultValue} showNeighboringMonth={false} />,
+      );
 
-      expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1));
+      const firstDayTile = container.querySelector('.react-calendar__tile');
+      const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
+
+      expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2017, 0, 1)));
     });
@@ -246,7 +271,9 @@
       const value = new Date(2017, 0, 15);
-      const component = shallow(<Calendar value={value} />);
 
-      const monthView = component.find('MonthView');
+      const { container } = render(<Calendar value={value} showNeighboringMonth={false} />);
 
-      expect(monthView.prop('activeStartDate')).toEqual(new Date(2017, 0, 1));
+      const firstDayTile = container.querySelector('.react-calendar__tile');
+      const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
+
+      expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2017, 0, 1)));
     });
@@ -257,9 +284,15 @@
       const value = new Date(2018, 0, 15);
-      const component = shallow(
-        <Calendar defaultActiveStartDate={defaultActiveStartDate} value={value} />,
+
+      const { container } = render(
+        <Calendar
+          defaultActiveStartDate={defaultActiveStartDate}
+          showNeighboringMonth={false}
+          value={value}
+        />,
       );
 
-      const monthView = component.find('MonthView');
+      const firstDayTile = container.querySelector('.react-calendar__tile');
+      const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
 
-      expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate);
+      expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(defaultActiveStartDate));
     });
@@ -269,7 +302,11 @@
       const defaultActiveStartDate = new Date(2017, 0, 1);
-      const component = shallow(<Calendar defaultActiveStartDate={defaultActiveStartDate} />);
 
-      const monthView = component.find('MonthView');
+      const { container } = render(
+        <Calendar defaultActiveStartDate={defaultActiveStartDate} showNeighboringMonth={false} />,
+      );
 
-      expect(monthView.prop('activeStartDate')).toEqual(defaultActiveStartDate);
+      const firstDayTile = container.querySelector('.react-calendar__tile');
+      const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
+
+      expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(defaultActiveStartDate));
     });
@@ -279,7 +316,11 @@
       const activeStartDate = new Date(2017, 0, 1);
-      const component = shallow(<Calendar activeStartDate={activeStartDate} />);
 
-      const monthView = component.find('MonthView');
+      const { container } = render(
+        <Calendar activeStartDate={activeStartDate} showNeighboringMonth={false} />,
+      );
 
-      expect(monthView.prop('activeStartDate')).toEqual(activeStartDate);
+      const firstDayTile = container.querySelector('.react-calendar__tile');
+      const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
+
+      expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(activeStartDate));
     });
@@ -290,7 +331,9 @@
       const beginOfCurrentMonth = getMonthStart(today);
-      const component = shallow(<Calendar />);
 
-      const monthView = component.find('MonthView');
+      const { container } = render(<Calendar showNeighboringMonth={false} />);
 
-      expect(monthView.prop('activeStartDate')).toEqual(beginOfCurrentMonth);
+      const firstDayTile = container.querySelector('.react-calendar__tile');
+      const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
+
+      expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(beginOfCurrentMonth));
     });
@@ -300,9 +343,10 @@
       const defaultActiveStartDate = new Date(2012, 5, 6);
-      const component = mount(<Calendar defaultActiveStartDate={defaultActiveStartDate} />);
 
-      const firstDayTile = component.find('.react-calendar__tile').first();
-      const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label');
+      const { container } = render(<Calendar defaultActiveStartDate={defaultActiveStartDate} />);
 
+      const firstDayTile = container.querySelector('.react-calendar__tile');
+      const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
+
       // The date of the first Monday that this calendar should show is May 28, 2012.
-      expect(firstDayTileTimeAbbr).toBe(format(new Date(2012, 4, 28)));
+      expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2012, 4, 28)));
     });
@@ -312,9 +356,10 @@
       const activeStartDate = new Date(2012, 5, 6);
-      const component = mount(<Calendar activeStartDate={activeStartDate} />);
 
-      const firstDayTile = component.find('.react-calendar__tile').first();
-      const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label');
+      const { container } = render(<Calendar activeStartDate={activeStartDate} />);
 
+      const firstDayTile = container.querySelector('.react-calendar__tile');
+      const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
+
       // The date of the first Monday that this calendar should show is May 28, 2012.
-      expect(firstDayTileTimeAbbr).toBe(format(new Date(2012, 4, 28)));
+      expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(new Date(2012, 4, 28)));
     });
@@ -325,9 +370,10 @@ });
     it('drills up when allowed', () => {
-      const component = shallow(<Calendar />);
+      const instance = createRef();
 
-      component.setState({ view: 'month' });
+      render(<Calendar ref={instance} />);
 
-      component.instance().drillUp();
+      instance.current.setState({ view: 'month' });
+      instance.current.drillUp();
 
-      expect(component.instance().view).toBe('year');
+      expect(instance.current.view).toBe('year');
     });
@@ -337,8 +383,14 @@
       const onDrillUp = jest.fn();
+      const instance = createRef();
 
-      const component = shallow(
-        <Calendar activeStartDate={new Date(2017, 6, 1)} onDrillUp={onDrillUp} view="month" />,
+      render(
+        <Calendar
+          activeStartDate={new Date(2017, 6, 1)}
+          onDrillUp={onDrillUp}
+          view="month"
+          ref={instance}
+        />,
       );
 
-      component.instance().drillUp();
+      instance.current.drillUp();
 
@@ -354,11 +406,11 @@ expect(onDrillUp).toHaveBeenCalledWith({
       const onDrillUp = jest.fn();
+      const instance = createRef();
 
-      const component = shallow(
-        <Calendar activeStartDate={new Date(2017, 6, 1)} onDrillUp={onDrillUp} />,
+      render(
+        <Calendar activeStartDate={new Date(2017, 6, 1)} onDrillUp={onDrillUp} ref={instance} />,
       );
 
-      component.setState({ view: 'month' });
+      instance.current.setState({ view: 'month' });
+      instance.current.drillUp();
 
-      component.instance().drillUp();
-
       expect(onDrillUp).toHaveBeenCalledWith({
@@ -373,6 +425,7 @@ action: 'drillUp',
       const onDrillUp = jest.fn();
+      const instance = createRef();
 
-      const component = shallow(<Calendar onDrillUp={onDrillUp} view="century" />);
+      render(<Calendar onDrillUp={onDrillUp} view="century" ref={instance} />);
 
-      component.instance().drillUp();
+      instance.current.drillUp();
 
@@ -385,9 +438,10 @@ expect(onDrillUp).not.toHaveBeenCalled();
     it('drills down when allowed', () => {
-      const component = shallow(<Calendar />);
+      const instance = createRef();
 
-      component.setState({ view: 'century' });
+      render(<Calendar ref={instance} />);
 
-      component.instance().drillDown(new Date(2011, 0, 1));
+      instance.current.setState({ view: 'century' });
+      instance.current.drillDown(new Date(2011, 0, 1));
 
-      expect(component.instance().view).toBe('decade');
+      expect(instance.current.view).toBe('decade');
     });
@@ -397,4 +451,5 @@
       const onDrillDown = jest.fn();
+      const instance = createRef();
 
-      const component = shallow(
+      render(
         <Calendar
@@ -404,6 +459,7 @@ activeStartDate={new Date(2001, 0, 1)}
           view="century"
+          ref={instance}
         />,
       );
 
-      component.instance().drillDown(new Date(2011, 0, 1));
+      instance.current.drillDown(new Date(2011, 0, 1));
 
@@ -419,11 +475,15 @@ expect(onDrillDown).toHaveBeenCalledWith({
       const onDrillDown = jest.fn();
+      const instance = createRef();
 
-      const component = shallow(
-        <Calendar activeStartDate={new Date(2001, 0, 1)} onDrillDown={onDrillDown} />,
+      render(
+        <Calendar
+          activeStartDate={new Date(2001, 0, 1)}
+          onDrillDown={onDrillDown}
+          ref={instance}
+        />,
       );
 
-      component.setState({ view: 'century' });
+      instance.current.setState({ view: 'century' });
+      instance.current.drillDown(new Date(2011, 0, 1));
 
-      component.instance().drillDown(new Date(2011, 0, 1));
-
       expect(onDrillDown).toHaveBeenCalledWith({
@@ -438,6 +498,7 @@ action: 'drillDown',
       const onDrillDown = jest.fn();
+      const instance = createRef();
 
-      const component = shallow(<Calendar onDrillDown={onDrillDown} view="month" />);
+      render(<Calendar onDrillDown={onDrillDown} view="month" ref={instance} />);
 
-      component.instance().drillUp();
+      instance.current.drillUp();
 
@@ -450,7 +511,9 @@ expect(onDrillDown).not.toHaveBeenCalled();
     it('changes active start date when allowed', () => {
-      const component = shallow(<Calendar />);
+      const instance = createRef();
 
-      component.instance().setActiveStartDate(new Date(2019, 0, 1));
+      render(<Calendar ref={instance} />);
 
-      expect(component.instance().activeStartDate).toEqual(new Date(2019, 0, 1));
+      instance.current.setActiveStartDate(new Date(2019, 0, 1));
+
+      expect(instance.current.activeStartDate).toEqual(new Date(2019, 0, 1));
     });
@@ -462,7 +525,14 @@
       const onActiveStartDateChange = jest.fn();
-      const component = shallow(
-        <Calendar onActiveStartDateChange={onActiveStartDateChange} value={value} view="year" />,
+      const instance = createRef();
+
+      render(
+        <Calendar
+          onActiveStartDateChange={onActiveStartDateChange}
+          value={value}
+          view="year"
+          ref={instance}
+        />,
       );
 
-      component.instance().setActiveStartDate(newActiveStartDate);
+      instance.current.setActiveStartDate(newActiveStartDate);
 
@@ -481,3 +551,5 @@ expect(onActiveStartDateChange).toHaveBeenCalledWith({
       const onActiveStartDateChange = jest.fn();
-      const component = shallow(
+      const instance = createRef();
+
+      render(
         <Calendar
@@ -488,6 +560,7 @@ activeStartDate={activeStartDate}
           view="year"
+          ref={instance}
         />,
       );
 
-      component.instance().setActiveStartDate(newActiveStartDate);
+      instance.current.setActiveStartDate(newActiveStartDate);
 
@@ -505,3 +578,5 @@ expect(onActiveStartDateChange).toHaveBeenCalledWith({
       const onActiveStartDateChange = jest.fn();
-      const component = shallow(
+      const instance = createRef();
+
+      render(
         <Calendar
@@ -511,6 +586,7 @@ activeStartDate={activeStartDate}
           view="year"
+          ref={instance}
         />,
       );
 
-      component.instance().setActiveStartDate(newActiveStartDate);
+      instance.current.setActiveStartDate(newActiveStartDate);
 
@@ -524,7 +600,14 @@ expect(onActiveStartDateChange).not.toHaveBeenCalled();
       const onActiveStartDateChange = jest.fn();
-      const component = shallow(
-        <Calendar onActiveStartDateChange={onActiveStartDateChange} value={value} view="year" />,
+      const instance = createRef();
+
+      render(
+        <Calendar
+          onActiveStartDateChange={onActiveStartDateChange}
+          value={value}
+          view="year"
+          ref={instance}
+        />,
       );
 
-      component.instance().setActiveStartDate(newActiveStartDate);
+      instance.current.setActiveStartDate(newActiveStartDate);
 
@@ -541,7 +624,14 @@ expect(onActiveStartDateChange).not.toHaveBeenCalled();
       const onViewChange = jest.fn();
-      const component = shallow(
-        <Calendar activeStartDate={activeStartDate} onViewChange={onViewChange} value={value} />,
+      const instance = createRef();
+
+      render(
+        <Calendar
+          activeStartDate={activeStartDate}
+          onViewChange={onViewChange}
+          value={value}
+          ref={instance}
+        />,
       );
 
-      component.instance().setStateAndCallCallbacks({ view: newView });
+      instance.current.setStateAndCallCallbacks({ view: newView });
 
@@ -561,3 +651,5 @@ expect(onViewChange).toHaveBeenCalledWith({
       const onViewChange = jest.fn();
-      const component = shallow(
+      const instance = createRef();
+
+      render(
         <Calendar
@@ -568,6 +660,7 @@ activeStartDate={activeStartDate}
           view={view}
+          ref={instance}
         />,
       );
 
-      component.instance().setStateAndCallCallbacks({ view: newView });
+      instance.current.setStateAndCallCallbacks({ view: newView });
 
@@ -585,6 +678,8 @@ expect(onViewChange).toHaveBeenCalledWith({
       const onViewChange = jest.fn();
-      const component = shallow(<Calendar onViewChange={onViewChange} view={view} />);
+      const instance = createRef();
 
-      component.instance().setStateAndCallCallbacks({ view: newView });
+      render(<Calendar onViewChange={onViewChange} view={view} ref={instance} />);
 
+      instance.current.setStateAndCallCallbacks({ view: newView });
+
       expect(onViewChange).not.toHaveBeenCalled();
@@ -597,6 +692,8 @@ });
       const onChange = jest.fn();
-      const component = shallow(<Calendar onChange={onChange} view="month" />);
+      const instance = createRef();
 
-      component.instance().onChange(new Date(2017, 0, 1), event);
+      render(<Calendar onChange={onChange} view="month" ref={instance} />);
 
+      instance.current.onChange(new Date(2017, 0, 1), event);
+
       expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1), event);
@@ -607,6 +704,8 @@ });
       const onChange = jest.fn();
-      const component = shallow(<Calendar onChange={onChange} returnValue="start" view="month" />);
+      const instance = createRef();
 
-      component.instance().onChange(new Date(2017, 0, 1), event);
+      render(<Calendar onChange={onChange} returnValue="start" view="month" ref={instance} />);
 
+      instance.current.onChange(new Date(2017, 0, 1), event);
+
       expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1), event);
@@ -617,6 +716,8 @@ });
       const onChange = jest.fn();
-      const component = shallow(<Calendar onChange={onChange} returnValue="end" view="month" />);
+      const instance = createRef();
 
-      component.instance().onChange(new Date(2017, 0, 1), event);
+      render(<Calendar onChange={onChange} returnValue="end" view="month" ref={instance} />);
 
+      instance.current.onChange(new Date(2017, 0, 1), event);
+
       expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1, 23, 59, 59, 999), event);
@@ -627,6 +728,8 @@ });
       const onChange = jest.fn();
-      const component = shallow(<Calendar onChange={onChange} returnValue="range" view="month" />);
+      const instance = createRef();
 
-      component.instance().onChange(new Date(2017, 0, 1), event);
+      render(<Calendar onChange={onChange} returnValue="range" view="month" ref={instance} />);
 
+      instance.current.onChange(new Date(2017, 0, 1), event);
+
       expect(onChange).toHaveBeenCalledWith(
@@ -640,3 +743,5 @@ [new Date(2017, 0, 1), new Date(2017, 0, 1, 23, 59, 59, 999)],
       const onChange = jest.fn();
-      const component = shallow(
+      const instance = createRef();
+
+      render(
         <Calendar
@@ -647,6 +752,7 @@ minDate={new Date(2017, 0, 1, 12)}
           view="month"
+          ref={instance}
         />,
       );
 
-      component.instance().onChange(new Date(2017, 0, 1), event);
+      instance.current.onChange(new Date(2017, 0, 1), event);
 
@@ -658,3 +764,5 @@ expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1, 12), event);
       const onChange = jest.fn();
-      const component = shallow(
+      const instance = createRef();
+
+      render(
         <Calendar
@@ -665,6 +773,7 @@ maxDate={new Date(2017, 0, 1, 12)}
           view="month"
+          ref={instance}
         />,
       );
 
-      component.instance().onChange(new Date(2017, 0, 2), event);
+      instance.current.onChange(new Date(2017, 0, 2), event);
 
@@ -676,3 +785,5 @@ expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1, 12), event);
       const onChange = jest.fn();
-      const component = shallow(
+      const instance = createRef();
+
+      render(
         <Calendar
@@ -683,6 +794,7 @@ minDate={new Date(2017, 0, 2, 12)}
           view="month"
+          ref={instance}
         />,
       );
 
-      component.instance().onChange(new Date(2017, 0, 1), event);
+      instance.current.onChange(new Date(2017, 0, 1), event);
 
@@ -694,3 +806,5 @@ expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 2, 12), event);
       const onChange = jest.fn();
-      const component = shallow(
+      const instance = createRef();
+
+      render(
         <Calendar
@@ -701,6 +815,7 @@ maxDate={new Date(2017, 0, 1, 12)}
           view="month"
+          ref={instance}
         />,
       );
 
-      component.instance().onChange(new Date(2017, 0, 2), event);
+      instance.current.onChange(new Date(2017, 0, 2), event);
 
@@ -712,6 +827,8 @@ expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1, 12), event);
       const onChange = jest.fn();
-      const component = shallow(<Calendar onChange={onChange} selectRange view="month" />);
+      const instance = createRef();
 
-      component.instance().onChange(new Date(2018, 0, 1), event);
+      render(<Calendar onChange={onChange} selectRange view="month" ref={instance} />);
 
+      instance.current.onChange(new Date(2018, 0, 1), event);
+
       expect(onChange).not.toHaveBeenCalled();
@@ -722,7 +839,15 @@ });
       const onChange = jest.fn();
-      const component = shallow(
-        <Calendar allowPartialRange={false} onChange={onChange} selectRange view="month" />,
+      const instance = createRef();
+
+      render(
+        <Calendar
+          allowPartialRange={false}
+          onChange={onChange}
+          selectRange
+          view="month"
+          ref={instance}
+        />,
       );
 
-      component.instance().onChange(new Date(2018, 0, 1), event);
+      instance.current.onChange(new Date(2018, 0, 1), event);
 
@@ -734,7 +859,9 @@ expect(onChange).not.toHaveBeenCalled();
       const onChange = jest.fn();
-      const component = shallow(
-        <Calendar allowPartialRange onChange={onChange} selectRange view="month" />,
+      const instance = createRef();
+
+      render(
+        <Calendar allowPartialRange onChange={onChange} selectRange view="month" ref={instance} />,
       );
 
-      component.instance().onChange(new Date(2018, 0, 1), event);
+      instance.current.onChange(new Date(2018, 0, 1), event);
 
@@ -747,7 +874,9 @@ expect(onChange).toHaveBeenCalledTimes(1);
       const onChange = jest.fn();
-      const component = shallow(<Calendar onChange={onChange} selectRange view="month" />);
+      const instance = createRef();
 
-      component.instance().onChange(new Date(2018, 0, 1), event);
-      component.instance().onChange(new Date(2018, 6, 1), event);
+      render(<Calendar onChange={onChange} selectRange view="month" ref={instance} />);
 
+      instance.current.onChange(new Date(2018, 0, 1), event);
+      instance.current.onChange(new Date(2018, 6, 1), event);
+
       expect(onChange).toHaveBeenCalledTimes(1);
@@ -762,7 +891,9 @@ expect(onChange).toHaveBeenCalledWith(
       const onChange = jest.fn();
-      const component = shallow(<Calendar onChange={onChange} selectRange view="month" />);
+      const instance = createRef();
 
-      component.instance().onChange(new Date(2018, 6, 1), event);
-      component.instance().onChange(new Date(2018, 0, 1), event);
+      render(<Calendar onChange={onChange} selectRange view="month" ref={instance} />);
 
+      instance.current.onChange(new Date(2018, 6, 1), event);
+      instance.current.onChange(new Date(2018, 0, 1), event);
+
       expect(onChange).toHaveBeenCalledTimes(1);
@@ -778,7 +909,8 @@ expect(onChange).toHaveBeenCalledWith(
     const formatMonthYear = () => 'Month year';
-    const component = shallow(<Calendar formatMonthYear={formatMonthYear} />);
 
-    const navigation = component.find('Navigation');
+    const { container } = render(<Calendar formatMonthYear={formatMonthYear} />);
 
-    expect(navigation.prop('formatMonthYear')).toBe(formatMonthYear);
+    const navigation = container.querySelector('.react-calendar__navigation');
+
+    expect(navigation).toHaveTextContent('Month year');
   });
@@ -788,7 +920,8 @@
     const formatYear = () => 'Year';
-    const component = shallow(<Calendar formatYear={formatYear} />);
 
-    const navigation = component.find('Navigation');
+    const { container } = render(<Calendar formatYear={formatYear} view="year" />);
 
-    expect(navigation.prop('formatYear')).toBe(formatYear);
+    const navigation = container.querySelector('.react-calendar__navigation');
+
+    expect(navigation).toHaveTextContent('Year');
   });
@@ -798,7 +931,8 @@
     const formatDay = () => 'Day';
-    const component = shallow(<Calendar formatDay={formatDay} />);
 
-    const monthView = component.find('MonthView');
+    const { container } = render(<Calendar formatDay={formatDay} />);
 
-    expect(monthView.prop('formatDay')).toBe(formatDay);
+    const monthView = container.querySelector('.react-calendar__month-view');
+
+    expect(monthView).toHaveTextContent('Day');
   });
@@ -808,7 +942,9 @@
     const formatLongDate = () => 'Long date';
-    const component = shallow(<Calendar formatLongDate={formatLongDate} />);
 
-    const monthView = component.find('MonthView');
+    const { container } = render(<Calendar formatLongDate={formatLongDate} />);
 
-    expect(monthView.prop('formatLongDate')).toBe(formatLongDate);
+    const firstDayTile = container.querySelector('.react-calendar__tile');
+    const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
+
+    expect(firstDayTileTimeAbbr).toHaveAccessibleName('Long date');
   });
@@ -818,7 +954,8 @@
     const formatShortWeekday = () => 'Weekday';
-    const component = shallow(<Calendar formatShortWeekday={formatShortWeekday} />);
 
-    const monthView = component.find('MonthView');
+    const { container } = render(<Calendar formatShortWeekday={formatShortWeekday} />);
 
-    expect(monthView.prop('formatShortWeekday')).toBe(formatShortWeekday);
+    const monthView = container.querySelector('.react-calendar__month-view');
+
+    expect(monthView).toHaveTextContent('Weekday');
   });
@@ -828,7 +965,8 @@
     const formatMonth = () => 'Month';
-    const component = shallow(<Calendar formatMonth={formatMonth} view="year" />);
 
-    const yearView = component.find('YearView');
+    const { container } = render(<Calendar formatMonth={formatMonth} view="year" />);
 
-    expect(yearView.prop('formatMonth')).toBe(formatMonth);
+    const yearView = container.querySelector('.react-calendar__year-view');
+
+    expect(yearView).toHaveTextContent('Month');
   });
@@ -838,7 +976,8 @@
     const formatYear = () => 'Year';
-    const component = shallow(<Calendar formatYear={formatYear} view="decade" />);
 
-    const decadeView = component.find('DecadeView');
+    const { container } = render(<Calendar formatYear={formatYear} view="decade" />);
 
-    expect(decadeView.prop('formatYear')).toBe(formatYear);
+    const decadeView = container.querySelector('.react-calendar__decade-view');
+
+    expect(decadeView).toHaveTextContent('Year');
   });
@@ -848,8 +987,9 @@
     const formatYear = () => 'Year';
-    const component = shallow(<Calendar formatYear={formatYear} view="century" />);
 
-    const centuryView = component.find('CenturyView');
+    const { container } = render(<Calendar formatYear={formatYear} view="century" />);
 
-    expect(centuryView.prop('formatYear')).toBe(formatYear);
+    const centuryView = container.querySelector('.react-calendar__century-view');
+
+    expect(centuryView).toHaveTextContent('Year');
   });
 });

src/Calendar/Navigation.spec.jsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
@@ -17,5 +17,5 @@ import Navigation from './Navigation';
   it('renders prev2, prev, drill up, next and next2 buttons', () => {
-    const component = shallow(<Navigation {...defaultProps} view="month" />);
+    const { container } = render(<Navigation {...defaultProps} view="month" />);
 
-    const children = component.children();
+    const children = [...container.firstChild.children];
 
@@ -33,5 +33,5 @@ const [prev2, prev, drillUp, next, next2] = children;
   it('renders prev, drill up, next and buttons only for century view', () => {
-    const component = shallow(<Navigation {...defaultProps} view="century" />);
+    const { container } = render(<Navigation {...defaultProps} view="century" />);
 
-    const children = component.children();
+    const children = [...container.firstChild.children];
 
@@ -47,43 +47,43 @@ const [prev, drillUp, next] = children;
   it('displays proper title for month view', () => {
-    const component = shallow(<Navigation {...defaultProps} view="month" />);
+    const { container } = render(<Navigation {...defaultProps} view="month" />);
 
-    const drillUp = component.find('.react-calendar__navigation__label');
+    const drillUp = container.querySelector('.react-calendar__navigation__label');
 
-    expect(drillUp.text()).toBe('January 2017');
+    expect(drillUp).toHaveTextContent('January 2017');
   });
 
   it('displays proper title for year view', () => {
-    const component = shallow(<Navigation {...defaultProps} view="year" />);
+    const { container } = render(<Navigation {...defaultProps} view="year" />);
 
-    const drillUp = component.find('.react-calendar__navigation__label');
+    const drillUp = container.querySelector('.react-calendar__navigation__label');
 
-    expect(drillUp.text()).toBe('2017');
+    expect(drillUp).toHaveTextContent('2017');
   });
 
   it('displays proper title for decade view', () => {
-    const component = shallow(<Navigation {...defaultProps} view="decade" />);
+    const { container } = render(<Navigation {...defaultProps} view="decade" />);
 
-    const drillUp = component.find('.react-calendar__navigation__label');
+    const drillUp = container.querySelector('.react-calendar__navigation__label');
 
-    expect(drillUp.text()).toBe('2011 – 2020');
+    expect(drillUp).toHaveTextContent('2011 – 2020');
   });
 
   it('displays proper title for century view', () => {
-    const component = shallow(<Navigation {...defaultProps} view="century" />);
+    const { container } = render(<Navigation {...defaultProps} view="century" />);
 
-    const drillUp = component.find('.react-calendar__navigation__label');
+    const drillUp = container.querySelector('.react-calendar__navigation__label');
 
-    expect(drillUp.text()).toBe('2001 – 2100');
+    expect(drillUp).toHaveTextContent('2001 – 2100');
   });
 
   it('displays proper title for month view given showDouble flags is set to true', () => {
-    const component = shallow(<Navigation {...defaultProps} showDoubleView view="month" />);
+    const { container } = render(<Navigation {...defaultProps} showDoubleView view="month" />);
 
-    const drillUp = component.find('.react-calendar__navigation__label');
+    const drillUp = container.querySelector('.react-calendar__navigation__label');
 
-    expect(drillUp.text()).toBe('January 2017 – February 2017');
+    expect(drillUp).toHaveTextContent('January 2017 – February 2017');
   });
 
   it('displays proper user-defined labels on prev2, prev, next and next2 buttons', () => {
-    const component = shallow(
+    const { container } = render(
       <Navigation
@@ -99,22 +99,22 @@ {...defaultProps}
 
-    const [prev2, prev, , next, next2] = component.children();
+    const [prev2, prev, , next, next2] = [...container.firstChild.children];
 
-    expect(prev2.props.children).toBe('prev2Label');
-    expect(prev.props.children).toBe('prevLabel');
-    expect(next.props.children).toBe('nextLabel');
-    expect(next2.props.children).toBe('next2Label');
+    expect(prev2).toHaveTextContent('prev2Label');
+    expect(prev).toHaveTextContent('prevLabel');
+    expect(next).toHaveTextContent('nextLabel');
+    expect(next2).toHaveTextContent('next2Label');
   });
 
   it('uses proper user-defined ARIA live on navigation button', () => {
-    const component = shallow(
+    const { container } = render(
       <Navigation {...defaultProps} navigationAriaLive="polite" view="month" />,
     );
 
-    const [, , navigation] = component.children();
+    const [, , navigation] = [...container.firstChild.children];
 
-    expect(navigation.props['aria-live']).toBe('polite');
+    expect(navigation).toHaveAttribute('aria-live', 'polite');
   });
 
   it('displays proper user-defined ARIA labels on prev2, prev, navigation, next and next2 buttons', () => {
-    const component = shallow(
+    const { container } = render(
       <Navigation
@@ -131,9 +131,9 @@ {...defaultProps}
 
-    const [prev2, prev, navigation, next, next2] = component.children();
+    const [prev2, prev, navigation, next, next2] = [...container.firstChild.children];
 
-    expect(prev2.props['aria-label']).toBe('prev2AriaLabel');
-    expect(prev.props['aria-label']).toBe('prevAriaLabel');
-    expect(navigation.props['aria-label']).toBe('navigationAriaLabel');
-    expect(next.props['aria-label']).toBe('nextAriaLabel');
-    expect(next2.props['aria-label']).toBe('next2AriaLabel');
+    expect(prev2).toHaveAccessibleName('prev2AriaLabel');
+    expect(prev).toHaveAccessibleName('prevAriaLabel');
+    expect(navigation).toHaveAccessibleName('navigationAriaLabel');
+    expect(next).toHaveAccessibleName('nextAriaLabel');
+    expect(next2).toHaveAccessibleName('next2AriaLabel');
   });
@@ -143,8 +143,9 @@
     const drillUpFn = jest.fn();
-    const component = shallow(<Navigation {...defaultProps} drillUp={drillUpFn} view="month" />);
 
-    const button = component.find('button.react-calendar__navigation__label');
+    const { container } = render(<Navigation {...defaultProps} drillUp={drillUpFn} view="month" />);
 
-    button.simulate('click');
+    const button = container.querySelector('button.react-calendar__navigation__label');
 
+    fireEvent.click(button);
+
     expect(drillUpFn).toHaveBeenCalledTimes(1);
@@ -155,17 +156,18 @@ });
     const setActiveStartDateFn = jest.fn();
-    const component = shallow(
+
+    const { container } = render(
       <Navigation {...defaultProps} setActiveStartDate={setActiveStartDateFn} view="month" />,
     );
 
-    const arrows = component.find('button.react-calendar__navigation__arrow');
+    const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow');
 
-    const prev2 = arrows.at(0);
-    const prev = arrows.at(1);
-    const next = arrows.at(2);
-    const next2 = arrows.at(3);
+    const prev2 = arrows[0];
+    const prev = arrows[1];
+    const next = arrows[2];
+    const next2 = arrows[3];
 
-    prev2.simulate('click');
-    prev.simulate('click');
-    next.simulate('click');
-    next2.simulate('click');
+    fireEvent.click(prev2);
+    fireEvent.click(prev);
+    fireEvent.click(next);
+    fireEvent.click(next2);
 
@@ -175,244 +177,272 @@ expect(setActiveStartDateFn).toHaveBeenCalledTimes(4);
 
-  const monthSetActiveStartDateFn = jest.fn();
+  describe('month navigation', () => {
+    const monthSetActiveStartDateFn = jest.fn();
+    let monthViewArrows;
 
-  const monthViewComponent = shallow(
-    <Navigation {...defaultProps} setActiveStartDate={monthSetActiveStartDateFn} view="month" />,
-  );
+    beforeEach(() => {
+      const { container: monthContainer } = render(
+        <Navigation
+          {...defaultProps}
+          setActiveStartDate={monthSetActiveStartDateFn}
+          view="month"
+        />,
+      );
 
-  const monthViewArrows = monthViewComponent.find('button.react-calendar__navigation__arrow');
+      monthViewArrows = monthContainer.querySelectorAll('button.react-calendar__navigation__arrow');
+    });
 
-  it('jumps 12 months back on prev2 button click for month view', () => {
-    const prev2 = monthViewArrows.at(0);
+    it('jumps 12 months back on prev2 button click for month view', () => {
+      const prev2 = monthViewArrows[0];
 
-    prev2.simulate('click');
+      fireEvent.click(prev2);
 
-    expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 0, 1), 'prev2');
-  });
+      expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 0, 1), 'prev2');
+    });
 
-  it('jumps 1 month back on prev button click for month view', () => {
-    const prev = monthViewArrows.at(1);
+    it('jumps 1 month back on prev button click for month view', () => {
+      const prev = monthViewArrows[1];
 
-    prev.simulate('click');
+      fireEvent.click(prev);
 
-    expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 11, 1), 'prev');
-  });
+      expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 11, 1), 'prev');
+    });
 
-  it('jumps 1 month forward on next button click for month view', () => {
-    const next = monthViewArrows.at(2);
+    it('jumps 1 month forward on next button click for month view', () => {
+      const next = monthViewArrows[2];
 
-    next.simulate('click');
+      fireEvent.click(next);
 
-    expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2017, 1, 1), 'next');
-  });
+      expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2017, 1, 1), 'next');
+    });
 
-  it('jumps 12 months forward on next2 button click for month view', () => {
-    const next2 = monthViewArrows.at(3);
+    it('jumps 12 months forward on next2 button click for month view', () => {
+      const next2 = monthViewArrows[3];
 
-    next2.simulate('click');
+      fireEvent.click(next2);
 
-    expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2018, 0, 1), 'next2');
+      expect(monthSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2018, 0, 1), 'next2');
+    });
   });
 
-  const yearSetActiveStartDateFn = jest.fn();
+  describe('year navigation', () => {
+    const yearSetActiveStartDateFn = jest.fn();
+    let yearViewArrows;
 
-  const yearViewComponent = shallow(
-    <Navigation {...defaultProps} setActiveStartDate={yearSetActiveStartDateFn} view="year" />,
-  );
+    beforeEach(() => {
+      const { container: yearContainer } = render(
+        <Navigation {...defaultProps} setActiveStartDate={yearSetActiveStartDateFn} view="year" />,
+      );
 
-  const yearViewArrows = yearViewComponent.find('button.react-calendar__navigation__arrow');
+      yearViewArrows = yearContainer.querySelectorAll('button.react-calendar__navigation__arrow');
+    });
 
-  it('jumps 10 years back on prev2 button click for year view', () => {
-    const prev2 = yearViewArrows.at(0);
+    it('jumps 10 years back on prev2 button click for year view', () => {
+      const prev2 = yearViewArrows[0];
 
-    prev2.simulate('click');
+      fireEvent.click(prev2);
 
-    expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2007, 0, 1), 'prev2');
-  });
+      expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2007, 0, 1), 'prev2');
+    });
 
-  it('jumps 1 year back on prev button click for year view', () => {
-    const prev2 = yearViewArrows.at(1);
+    it('jumps 1 year back on prev button click for year view', () => {
+      const prev2 = yearViewArrows[1];
 
-    prev2.simulate('click');
+      fireEvent.click(prev2);
 
-    expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 0, 1), 'prev');
-  });
+      expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2016, 0, 1), 'prev');
+    });
 
-  it('jumps 1 year forward on next button click for year view', () => {
-    const next = yearViewArrows.at(2);
+    it('jumps 1 year forward on next button click for year view', () => {
+      const next = yearViewArrows[2];
 
-    next.simulate('click');
+      fireEvent.click(next);
 
-    expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2018, 0, 1), 'next');
-  });
+      expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2018, 0, 1), 'next');
+    });
 
-  it('jumps 10 years forward on next2 button click for year view', () => {
-    const next2 = yearViewArrows.at(3);
+    it('jumps 10 years forward on next2 button click for year view', () => {
+      const next2 = yearViewArrows[3];
 
-    next2.simulate('click');
+      fireEvent.click(next2);
 
-    expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2027, 0, 1), 'next2');
+      expect(yearSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2027, 0, 1), 'next2');
+    });
   });
 
-  const decadeSetActiveStartDateFn = jest.fn();
+  describe('decade navigation', () => {
+    const decadeSetActiveStartDateFn = jest.fn();
+    let decadeViewArrows;
 
-  const decadeViewComponent = shallow(
-    <Navigation {...defaultProps} setActiveStartDate={decadeSetActiveStartDateFn} view="decade" />,
-  );
+    beforeEach(() => {
+      const { container: decadeContainer } = render(
+        <Navigation
+          {...defaultProps}
+          setActiveStartDate={decadeSetActiveStartDateFn}
+          view="decade"
+        />,
+      );
 
-  const decadeViewArrows = decadeViewComponent.find('button.react-calendar__navigation__arrow');
+      decadeViewArrows = decadeContainer.querySelectorAll(
+        'button.react-calendar__navigation__arrow',
+      );
+    });
 
-  it('jumps 10 decades back on prev2 button click for decade view', () => {
-    const prev2 = decadeViewArrows.at(0);
+    it('jumps 10 decades back on prev2 button click for decade view', () => {
+      const prev2 = decadeViewArrows[0];
 
-    prev2.simulate('click');
+      fireEvent.click(prev2);
 
-    expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(1911, 0, 1), 'prev2');
-  });
+      expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(1911, 0, 1), 'prev2');
+    });
 
-  it('jumps 1 decade back on prev button click for decade view', () => {
-    const prev = decadeViewArrows.at(1);
+    it('jumps 1 decade back on prev button click for decade view', () => {
+      const prev = decadeViewArrows[1];
 
-    prev.simulate('click');
+      fireEvent.click(prev);
 
-    expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2001, 0, 1), 'prev');
-  });
+      expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2001, 0, 1), 'prev');
+    });
 
-  it('jumps 1 decade forward on next button click for decade view', () => {
-    const next = decadeViewArrows.at(2);
+    it('jumps 1 decade forward on next button click for decade view', () => {
+      const next = decadeViewArrows[2];
 
-    next.simulate('click');
+      fireEvent.click(next);
 
-    expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2021, 0, 1), 'next');
-  });
+      expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2021, 0, 1), 'next');
+    });
 
-  it('jumps 10 decades forward on next2 button click for decade view', () => {
-    const next2 = decadeViewArrows.at(3);
+    it('jumps 10 decades forward on next2 button click for decade view', () => {
+      const next2 = decadeViewArrows[3];
 
-    next2.simulate('click');
+      fireEvent.click(next2);
 
-    expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2111, 0, 1), 'next2');
+      expect(decadeSetActiveStartDateFn).toHaveBeenCalledWith(new Date(2111, 0, 1), 'next2');
+    });
   });
 
-  const centurySetActiveStartDateFn = jest.fn();
+  describe('century navigation', () => {
+    const centurySetActiveStartDateFn = jest.fn();
+    let centuryViewArrows;
 
-  const centuryViewComponent = shallow(
-    <Navigation
-      {...defaultProps}
-      setActiveStartDate={centurySetActiveStartDateFn}
-      view="century"
-    />,
-  );
+    beforeEach(() => {
+      const { container: centuryContainer } = render(
+        <Navigation
+          {...defaultProps}
+          setActiveStartDate={centurySetActiveStartDateFn}
+          view="century"
+        />,
+      );
 
-  const centuryViewArrows = centuryViewComponent.find('button.react-calendar__navigation__arrow');
+      centuryViewArrows = centuryContainer.querySelectorAll(
+        'button.react-calendar__navigation__arrow',
+      );
+    });
 
-  it('jumps 1 century back on prev button click for century view', () => {
-    const prev = centuryViewArrows.at(0);
+    it('jumps 1 century back on prev button click for century view', () => {
+      const prev = centuryViewArrows[0];
 
-    prev.simulate('click');
+      fireEvent.click(prev);
 
-    expect(centurySetActiveStartDateFn).toHaveBeenCalledWith(new Date(1901, 0, 1), 'prev');
-  });
+      expect(centurySetActiveStartDateFn).toHaveBeenCalledWith(new Date(1901, 0, 1), 'prev');
+    });
 
-  it('jumps 1 century forward on next button click for century view', () => {
-    const next = centuryViewArrows.at(1);
+    it('jumps 1 century forward on next button click for century view', () => {
+      const next = centuryViewArrows[1];
 
-    next.simulate('click');
+      fireEvent.click(next);
 
-    expect(centurySetActiveStartDateFn).toHaveBeenCalledWith(new Date(2101, 0, 1), 'next');
+      expect(centurySetActiveStartDateFn).toHaveBeenCalledWith(new Date(2101, 0, 1), 'next');
+    });
   });
 
   it('correctly marks drillUp button as disabled when already on top allowed view', () => {
-    const component = shallow(<Navigation {...defaultProps} view="century" />);
+    const { container } = render(<Navigation {...defaultProps} view="century" />);
 
-    const button = component.find('button.react-calendar__navigation__label');
+    const button = container.querySelector('button.react-calendar__navigation__label');
 
-    expect(button.prop('disabled')).toBeTruthy();
+    expect(button).toBeDisabled();
   });
 
   it('disallows navigating before minDate', () => {
-    const component = shallow(
+    const { container } = render(
       <Navigation {...defaultProps} minDate={new Date(2017, 0, 1)} view="month" />,
     );
 
-    const arrows = component.find('button.react-calendar__navigation__arrow');
+    const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow');
 
-    const prev2 = arrows.at(0);
-    const prev = arrows.at(1);
+    const prev2 = arrows[0];
+    const prev = arrows[1];
 
-    expect(prev2.prop('disabled')).toBeTruthy();
-    expect(prev.prop('disabled')).toBeTruthy();
+    expect(prev2).toBeDisabled();
+    expect(prev).toBeDisabled();
   });
 
   it('disallows navigating before dynamically set minDate', () => {
-    const component = shallow(<Navigation {...defaultProps} view="month" />);
+    const { container, rerender } = render(<Navigation {...defaultProps} view="month" />);
 
-    component.setProps({
-      minDate: new Date(2017, 0, 1),
-    });
+    rerender(<Navigation {...defaultProps} minDate={new Date(2017, 0, 1)} view="month" />);
 
-    const arrows = component.find('button.react-calendar__navigation__arrow');
+    const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow');
 
-    const prev2 = arrows.at(0);
-    const prev = arrows.at(1);
+    const prev2 = arrows[0];
+    const prev = arrows[1];
 
-    expect(prev2.prop('disabled')).toBeTruthy();
-    expect(prev.prop('disabled')).toBeTruthy();
+    expect(prev2).toBeDisabled();
+    expect(prev).toBeDisabled();
   });
 
   it('disallows navigating after maxDate', () => {
-    const component = shallow(
+    const { container } = render(
       <Navigation {...defaultProps} maxDate={new Date(2017, 0, 31)} view="month" />,
     );
 
-    const arrows = component.find('button.react-calendar__navigation__arrow');
+    const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow');
 
-    const next = arrows.at(2);
-    const next2 = arrows.at(3);
+    const next = arrows[2];
+    const next2 = arrows[3];
 
-    expect(next.prop('disabled')).toBeTruthy();
-    expect(next2.prop('disabled')).toBeTruthy();
+    expect(next).toBeDisabled();
+    expect(next2).toBeDisabled();
   });
 
   it('does not disallow navigating to next month when maxDate is set to first day of the next month', () => {
-    const component = shallow(
+    const { container } = render(
       <Navigation {...defaultProps} maxDate={new Date(2017, 1, 1)} view="month" />,
     );
 
-    const arrows = component.find('button.react-calendar__navigation__arrow');
+    const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow');
 
-    const next = arrows.at(2);
-    const next2 = arrows.at(3);
+    const next = arrows[2];
+    const next2 = arrows[3];
 
-    expect(next.prop('disabled')).toBeFalsy();
-    expect(next2.prop('disabled')).toBeTruthy();
+    expect(next).toBeEnabled();
+    expect(next2).toBeDisabled();
   });
 
   it('does not disallow navigating to next year when maxDate is set to first day of the next year', () => {
-    const component = shallow(
+    const { container } = render(
       <Navigation {...defaultProps} maxDate={new Date(2018, 0, 1)} view="month" />,
     );
 
-    const arrows = component.find('button.react-calendar__navigation__arrow');
+    const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow');
 
-    const next = arrows.at(2);
-    const next2 = arrows.at(3);
+    const next = arrows[2];
+    const next2 = arrows[3];
 
-    expect(next.prop('disabled')).toBeFalsy();
-    expect(next2.prop('disabled')).toBeFalsy();
+    expect(next).toBeEnabled();
+    expect(next2).toBeEnabled();
   });
 
   it('disallows navigating after dynamically set maxDate', () => {
-    const component = shallow(<Navigation {...defaultProps} view="month" />);
+    const { container, rerender } = render(<Navigation {...defaultProps} view="month" />);
 
-    component.setProps({
-      maxDate: new Date(2017, 0, 31),
-    });
+    rerender(<Navigation {...defaultProps} maxDate={new Date(2017, 0, 31)} view="month" />);
 
-    const arrows = component.find('button.react-calendar__navigation__arrow');
+    const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow');
 
-    const next = arrows.at(2);
-    const next2 = arrows.at(3);
+    const next = arrows[2];
+    const next2 = arrows[3];
 
-    expect(next.prop('disabled')).toBeTruthy();
-    expect(next2.prop('disabled')).toBeTruthy();
+    expect(next).toBeDisabled();
+    expect(next2).toBeDisabled();
   });
@@ -424,13 +454,13 @@
 
-    const component = shallow(
+    const { container } = render(
       <Navigation {...defaultProps} activeStartDate={activeStartDate} view="year" />,
     );
 
-    const arrows = component.find('button.react-calendar__navigation__arrow');
+    const arrows = container.querySelectorAll('button.react-calendar__navigation__arrow');
 
-    const prev2 = arrows.at(0);
-    const prev = arrows.at(1);
+    const prev2 = arrows[0];
+    const prev = arrows[1];
 
-    expect(prev2.prop('disabled')).toBeTruthy();
-    expect(prev.prop('disabled')).toBeTruthy();
+    expect(prev2).toBeDisabled();
+    expect(prev).toBeDisabled();
   });
@@ -446,3 +476,3 @@
 
-    const component = shallow(
+    const { container } = render(
       <Navigation
@@ -457,3 +487,3 @@ {...defaultProps}
 
-    const drillUp = component.find('.react-calendar__navigation__label');
+    const drillUp = container.querySelector('.react-calendar__navigation__label');
 
@@ -466,3 +496,3 @@ expect(navigationLabel).toHaveBeenCalledWith({
     });
-    expect(drillUp.text()).toBe(label);
+    expect(drillUp).toHaveTextContent(label);
   });
@@ -472,41 +502,41 @@
     it('displays calendar with custom month year navigation label', () => {
-      const component = shallow(
+      const { container } = render(
         <Navigation {...defaultProps} formatMonthYear={() => 'MonthYear'} view="month" />,
       );
 
-      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+      const navigationLabel = container.querySelector('.react-calendar__navigation__label');
 
-      expect(navigationLabel.text()).toBe('MonthYear');
+      expect(navigationLabel).toHaveTextContent('MonthYear');
     });
 
     it('displays calendar with custom year navigation label', () => {
-      const component = shallow(
+      const { container } = render(
         <Navigation {...defaultProps} formatYear={() => 'Year'} view="year" />,
       );
 
-      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+      const navigationLabel = container.querySelector('.react-calendar__navigation__label');
 
-      expect(navigationLabel.text()).toBe('Year');
+      expect(navigationLabel).toHaveTextContent('Year');
     });
 
     it('displays calendar with custom decade navigation label', () => {
-      const component = shallow(
+      const { container } = render(
         <Navigation {...defaultProps} formatYear={() => 'Year'} view="decade" />,
       );
 
-      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+      const navigationLabel = container.querySelector('.react-calendar__navigation__label');
 
-      expect(navigationLabel.text()).toBe('Year – Year');
+      expect(navigationLabel).toHaveTextContent('Year – Year');
     });
 
     it('displays calendar with custom century navigation label', () => {
-      const component = shallow(
+      const { container } = render(
         <Navigation {...defaultProps} formatYear={() => 'Year'} view="century" />,
       );
 
-      const navigationLabel = component.find('.react-calendar__navigation__label').first();
+      const navigationLabel = container.querySelector('.react-calendar__navigation__label');
 
-      expect(navigationLabel.text()).toBe('Year – Year');
+      expect(navigationLabel).toHaveTextContent('Year – Year');
     });
   });
 });

src/CenturyView.spec.jsx

 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils';
@@ -14,3 +14,4 @@
     const activeStartDate = new Date(2001, 0, 1);
-    const component = mount(
+
+    const { container } = render(
       <CenturyView
@@ -23,5 +24,5 @@ {...defaultProps}
 
-    const firstDayTile = component.find('.react-calendar__tile').first();
+    const firstDayTile = container.querySelector('.react-calendar__tile');
 
-    expect(firstDayTile.text()).toBe(
+    expect(firstDayTile).toHaveTextContent(
       `${getDecadeStart(activeStartDate).getFullYear()} – ${getDecadeEnd(
@@ -35,10 +36,10 @@ activeStartDate,
     const tileClassName = 'testClassName';
-    const component = mount(
+
+    const { container } = render(
       <CenturyView {...defaultProps} showNeighboringMonth={false} tileClassName={tileClassName} />,
     );
 
-    const firstDayTile = component.find('.react-calendar__tile').first();
-    const firstDayTileClassName = firstDayTile.prop('className');
+    const firstDayTile = container.querySelector('.react-calendar__tile');
 
-    expect(firstDayTileClassName.includes(tileClassName)).toBe(true);
+    expect(firstDayTile).toHaveClass(tileClassName);
   });
@@ -55,3 +56,4 @@
     };
-    const component = mount(
+
+    const { container } = render(
       <CenturyView
@@ -65,11 +67,7 @@ {...defaultProps}
 
-    const tiles = component.find('.react-calendar__tile');
+    const tiles = container.querySelectorAll('.react-calendar__tile');
+    const [firstDayTile, secondDayTile] = tiles;
 
-    const firstDayTile = tiles.first();
-    const firstDayTileClassName = firstDayTile.prop('className');
-    const secondDayTile = tiles.at(1);
-    const secondDayTileClassName = secondDayTile.prop('className');
-
-    expect(firstDayTileClassName.includes('firstDayOfTheMonth')).toBe(true);
-    expect(secondDayTileClassName.includes('firstDayOfTheMonth')).toBe(false);
+    expect(firstDayTile).toHaveClass('firstDayOfTheMonth');
+    expect(secondDayTile).not.toHaveClass('firstDayOfTheMonth');
   });
@@ -79,12 +77,13 @@
     const tileContent = <div className="testContent" />;
-    const component = mount(
+
+    const { container } = render(
       <CenturyView {...defaultProps} showNeighboringMonth={false} tileContent={tileContent} />,
     );
 
-    const tiles = component.find('.react-calendar__tile');
+    const tiles = container.querySelectorAll('.react-calendar__tile');
+    const [firstDayTile] = tiles;
 
-    const firstDayTile = tiles.first();
-    const firstDayTileContent = firstDayTile.find('.testContent');
+    const firstDayTileContent = firstDayTile.querySelector('.testContent');
 
-    expect(firstDayTileContent).toHaveLength(1);
+    expect(firstDayTileContent).toBeInTheDocument();
   });
@@ -101,3 +100,4 @@
     };
-    const component = mount(
+
+    const { container } = render(
       <CenturyView
@@ -111,22 +111,21 @@ {...defaultProps}
 
-    const tiles = component.find('.react-calendar__tile');
+    const tiles = container.querySelectorAll('.react-calendar__tile');
+    const [firstDayTile, secondDayTile] = tiles;
 
-    const firstDayTile = tiles.first();
-    const firstDayTileContent = firstDayTile.find('.testContent');
-    const secondDayTile = tiles.at(1);
-    const secondDayTileContent = secondDayTile.find('.testContent');
+    const firstDayTileContent = firstDayTile.querySelector('.testContent');
+    const secondDayTileContent = secondDayTile.querySelector('.testContent');
 
-    expect(firstDayTileContent).toHaveLength(1);
-    expect(secondDayTileContent).toHaveLength(0);
+    expect(firstDayTileContent).toBeInTheDocument();
+    expect(secondDayTileContent).not.toBeInTheDocument();
   });
 
-  it('passes formatYear flag to Decades component', () => {
+  it('displays century view with custom year formatting', () => {
     const formatYear = () => 'Year';
 
-    const component = shallow(<CenturyView {...defaultProps} formatYear={formatYear} />);
+    const { container } = render(<CenturyView {...defaultProps} formatYear={formatYear} />);
 
-    const years = component.find('Decades');
+    const year = container.querySelector('.react-calendar__century-view__decades');
 
-    expect(years.prop('formatYear')).toBe(formatYear);
+    expect(year).toHaveTextContent('Year');
   });
 });

src/CenturyView/Decade.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
@@ -15,3 +15,3 @@ import Decade from './Decade';
   it('applies given classNames properly', () => {
-    const component = mount(
+    const { container } = render(
       <Decade
@@ -24,49 +24,59 @@ {...tileProps}
 
-    const wrapperClassName = component.find('.react-calendar__tile').prop('className');
+    const wrapper = container.querySelector('.react-calendar__tile');
 
-    expect(wrapperClassName.includes('react-calendar__tile')).toBe(true);
-    expect(wrapperClassName.includes('react-calendar__tile--flag')).toBe(true);
-    expect(wrapperClassName.includes('react-calendar__century-view__decades__decade')).toBe(true);
-    expect(wrapperClassName.includes('testFunctionClassName')).toBe(true);
+    expect(wrapper).toHaveClass('react-calendar__tile');
+    expect(wrapper).toHaveClass('react-calendar__tile--flag');
+    expect(wrapper).toHaveClass('react-calendar__century-view__decades__decade');
+    expect(wrapper).toHaveClass('testFunctionClassName');
   });
 
   it('renders component without abbreviation', () => {
-    const component = mount(<Decade {...tileProps} date={new Date(2018, 0, 1)} decade={2011} />);
+    const { container } = render(
+      <Decade {...tileProps} date={new Date(2018, 0, 1)} decade={2011} />,
+    );
 
-    const abbr = component.find('abbr');
+    const abbr = container.querySelector('abbr');
 
-    expect(abbr).toHaveLength(0);
-    expect(component.text()).toBe('2011 – 2020');
+    expect(abbr).not.toBeInTheDocument();
+    expect(container).toHaveTextContent('2011 – 2020');
   });
 
   it("is disabled when date is before beginning of minDate's decade", () => {
-    const component = mount(
+    const { container } = render(
       <Decade {...tileProps} date={new Date(2010, 0, 1)} minDate={new Date(2020, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeDisabled();
   });
 
   it("is not disabled when date is after beginning of minDate's decade", () => {
-    const component = mount(
+    const { container } = render(
       <Decade {...tileProps} date={new Date(2010, 0, 1)} minDate={new Date(2010, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeEnabled();
   });
 
   it("is disabled when date is after end of maxDate's decade", () => {
-    const component = mount(
+    const { container } = render(
       <Decade {...tileProps} date={new Date(2020, 0, 1)} maxDate={new Date(2010, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeDisabled();
   });
 
   it("is not disabled when date is before end of maxDate's decade", () => {
-    const component = mount(
+    const { container } = render(
       <Decade {...tileProps} date={new Date(2010, 0, 1)} maxDate={new Date(2010, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeEnabled();
   });
@@ -78,5 +88,5 @@
 
-    const component = mount(<Decade {...tileProps} date={date} onClick={onClick} />);
+    const { container } = render(<Decade {...tileProps} date={date} onClick={onClick} />);
 
-    component.find('.react-calendar__tile').simulate('click');
+    fireEvent.click(container.querySelector('.react-calendar__tile'));
 
@@ -91,5 +101,6 @@ expect(onClick).toHaveBeenCalled();
 
-    const component = mount(<Decade {...tileProps} date={date} onMouseOver={onMouseOver} />);
+    const { container } = render(<Decade {...tileProps} date={date} onMouseOver={onMouseOver} />);
 
-    component.find('.react-calendar__tile').simulate('mouseOver');
+    const tile = container.querySelector('.react-calendar__tile');
+    fireEvent.mouseOver(tile);
 
@@ -104,5 +115,6 @@ expect(onMouseOver).toHaveBeenCalled();
 
-    const component = mount(<Decade {...tileProps} date={date} onMouseOver={onMouseOver} />);
+    const { container } = render(<Decade {...tileProps} date={date} onMouseOver={onMouseOver} />);
 
-    component.find('.react-calendar__tile').simulate('focus');
+    const tile = container.querySelector('.react-calendar__tile');
+    fireEvent.focus(tile);
 
@@ -114,9 +126,9 @@ expect(onMouseOver).toHaveBeenCalled();
   it('renders tileContent properly', () => {
-    const component = mount(
+    const { container } = render(
       <Decade {...tileProps} tileContent={<div className="testContent" />} />,
     );
 
-    const testContent = component.find('.testContent');
+    const testContent = container.querySelector('.testContent');
 
-    expect(testContent).toHaveLength(1);
+    expect(testContent).toBeInTheDocument();
   });
@@ -129,5 +141,5 @@
 
-    const component = mount(<Decade {...tileProps} date={date} tileContent={tileContent} />);
+    const { container } = render(<Decade {...tileProps} date={date} tileContent={tileContent} />);
 
-    const testContent = component.find('.testContent');
+    const testContent = container.querySelector('.testContent');
 
@@ -140,3 +152,3 @@ expect(tileContent).toHaveBeenCalled();
     });
-    expect(testContent).toHaveLength(1);
+    expect(testContent).toBeInTheDocument();
   });
@@ -150,12 +162,12 @@
 
-    const component = mount(
+    const { container } = render(
       <Decade {...tileProps} date={date} formatYear={formatYear} locale={locale} />,
     );
 
-    const tile = component.find('Tile');
+    const tile = container.querySelector('.react-calendar__tile');
 
     expect(formatYear).toHaveBeenCalledTimes(2);
     expect(formatYear).toHaveBeenCalledWith(locale, new Date(2011, 0, 1));
-    expect(tile.text()).toBe('Mock format – Mock format');
+    expect(tile).toHaveTextContent('Mock format – Mock format');
   });
 });

src/DecadeView.spec.jsx

 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -13,3 +13,4 @@ import DecadeView from './DecadeView';
     const activeStartDate = new Date(2011, 0, 1);
-    const component = mount(
+
+    const { container } = render(
       <DecadeView
@@ -22,5 +23,5 @@ {...defaultProps}
 
-    const firstDayTile = component.find('.react-calendar__tile').first();
+    const firstDayTile = container.querySelector('.react-calendar__tile');
 
-    expect(firstDayTile.text()).toBe(`${activeStartDate.getFullYear()}`);
+    expect(firstDayTile).toHaveTextContent(`${activeStartDate.getFullYear()}`);
   });
@@ -30,10 +31,10 @@
     const tileClassName = 'testClassName';
-    const component = mount(
+
+    const { container } = render(
       <DecadeView {...defaultProps} showNeighboringMonth={false} tileClassName={tileClassName} />,
     );
 
-    const firstDayTile = component.find('.react-calendar__tile').first();
-    const firstDayTileClassName = firstDayTile.prop('className');
+    const firstDayTile = container.querySelector('.react-calendar__tile');
 
-    expect(firstDayTileClassName.includes(tileClassName)).toBe(true);
+    expect(firstDayTile).toHaveClass(tileClassName);
   });
@@ -50,3 +51,4 @@
     };
-    const component = mount(
+
+    const { container } = render(
       <DecadeView
@@ -60,11 +62,7 @@ {...defaultProps}
 
-    const tiles = component.find('.react-calendar__tile');
+    const tiles = container.querySelectorAll('.react-calendar__tile');
+    const [firstDayTile, secondDayTile] = tiles;
 
-    const firstDayTile = tiles.first();
-    const firstDayTileClassName = firstDayTile.prop('className');
-    const secondDayTile = tiles.at(1);
-    const secondDayTileClassName = secondDayTile.prop('className');
-
-    expect(firstDayTileClassName.includes('firstDayOfTheMonth')).toBe(true);
-    expect(secondDayTileClassName.includes('firstDayOfTheMonth')).toBe(false);
+    expect(firstDayTile).toHaveClass('firstDayOfTheMonth');
+    expect(secondDayTile).not.toHaveClass('firstDayOfTheMonth');
   });
@@ -74,12 +72,11 @@
     const tileContent = <div className="testContent" />;
-    const component = mount(
+
+    const { container } = render(
       <DecadeView {...defaultProps} showNeighboringMonth={false} tileContent={tileContent} />,
     );
 
-    const tiles = component.find('.react-calendar__tile');
+    const firstDayTile = container.querySelector('.react-calendar__tile');
+    const firstDayTileContent = firstDayTile.querySelector('.testContent');
 
-    const firstDayTile = tiles.first();
-    const firstDayTileContent = firstDayTile.find('.testContent');
-
-    expect(firstDayTileContent).toHaveLength(1);
+    expect(firstDayTileContent).toBeInTheDocument();
   });
@@ -96,3 +93,4 @@
     };
-    const component = mount(
+
+    const { container } = render(
       <DecadeView
@@ -106,22 +104,21 @@ {...defaultProps}
 
-    const tiles = component.find('.react-calendar__tile');
+    const tiles = container.querySelectorAll('.react-calendar__tile');
+    const [firstDayTile, secondDayTile] = tiles;
 
-    const firstDayTile = tiles.first();
-    const firstDayTileContent = firstDayTile.find('.testContent');
-    const secondDayTile = tiles.at(1);
-    const secondDayTileContent = secondDayTile.find('.testContent');
+    const firstDayTileContent = firstDayTile.querySelector('.testContent');
+    const secondDayTileContent = secondDayTile.querySelector('.testContent');
 
-    expect(firstDayTileContent).toHaveLength(1);
-    expect(secondDayTileContent).toHaveLength(0);
+    expect(firstDayTileContent).toBeInTheDocument();
+    expect(secondDayTileContent).not.toBeInTheDocument();
   });
 
-  it('passes formatYear flag to Years component', () => {
+  it('passes decade view with custom year formatting', () => {
     const formatYear = () => 'Year';
 
-    const component = shallow(<DecadeView {...defaultProps} formatYear={formatYear} />);
+    const { container } = render(<DecadeView {...defaultProps} formatYear={formatYear} />);
 
-    const years = component.find('Years');
+    const year = container.querySelector('.react-calendar__decade-view__years__year');
 
-    expect(years.prop('formatYear')).toBe(formatYear);
+    expect(year).toHaveTextContent('Year');
   });
 });

src/DecadeView/Year.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
@@ -15,3 +15,3 @@ import Year from './Year';
   it('applies given classNames properly', () => {
-    const component = mount(
+    const { container } = render(
       <Year
@@ -24,49 +24,57 @@ {...tileProps}
 
-    const wrapperClassName = component.find('.react-calendar__tile').prop('className');
+    const wrapper = container.querySelector('.react-calendar__tile');
 
-    expect(wrapperClassName.includes('react-calendar__tile')).toBe(true);
-    expect(wrapperClassName.includes('react-calendar__tile--flag')).toBe(true);
-    expect(wrapperClassName.includes('react-calendar__decade-view__years__year')).toBe(true);
-    expect(wrapperClassName.includes('testFunctionClassName')).toBe(true);
+    expect(wrapper).toHaveClass('react-calendar__tile');
+    expect(wrapper).toHaveClass('react-calendar__tile--flag');
+    expect(wrapper).toHaveClass('react-calendar__decade-view__years__year');
+    expect(wrapper).toHaveClass('testFunctionClassName');
   });
 
   it('renders component without abbreviation', () => {
-    const component = mount(<Year {...tileProps} date={new Date(2018, 0, 1)} year={2018} />);
+    const { container } = render(<Year {...tileProps} date={new Date(2018, 0, 1)} year={2018} />);
 
-    const abbr = component.find('abbr');
+    const abbr = container.querySelector('abbr');
 
-    expect(abbr).toHaveLength(0);
-    expect(component.text()).toBe('2018');
+    expect(abbr).not.toBeInTheDocument();
+    expect(container).toHaveTextContent('2018');
   });
 
   it("is disabled when date is before beginning of minDate's year", () => {
-    const component = mount(
+    const { container } = render(
       <Year {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2019, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeDisabled();
   });
 
   it("is not disabled when date is after beginning of minDate's year", () => {
-    const component = mount(
+    const { container } = render(
       <Year {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2018, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeEnabled();
   });
 
   it("is disabled when date is after end of maxDate's year", () => {
-    const component = mount(
+    const { container } = render(
       <Year {...tileProps} date={new Date(2018, 0, 1)} maxDate={new Date(2017, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeDisabled();
   });
 
   it("is not disabled when date is before end of maxDate's year", () => {
-    const component = mount(
+    const { container } = render(
       <Year {...tileProps} date={new Date(2018, 0, 1)} maxDate={new Date(2018, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeEnabled();
   });
@@ -78,5 +86,5 @@
 
-    const component = mount(<Year {...tileProps} date={date} onClick={onClick} />);
+    const { container } = render(<Year {...tileProps} date={date} onClick={onClick} />);
 
-    component.find('.react-calendar__tile').simulate('click');
+    fireEvent.click(container.querySelector('.react-calendar__tile'));
 
@@ -91,5 +99,6 @@ expect(onClick).toHaveBeenCalled();
 
-    const component = mount(<Year {...tileProps} date={date} onMouseOver={onMouseOver} />);
+    const { container } = render(<Year {...tileProps} date={date} onMouseOver={onMouseOver} />);
 
-    component.find('.react-calendar__tile').simulate('mouseOver');
+    const tile = container.querySelector('.react-calendar__tile');
+    fireEvent.mouseOver(tile);
 
@@ -104,5 +113,6 @@ expect(onMouseOver).toHaveBeenCalled();
 
-    const component = mount(<Year {...tileProps} date={date} onMouseOver={onMouseOver} />);
+    const { container } = render(<Year {...tileProps} date={date} onMouseOver={onMouseOver} />);
 
-    component.find('.react-calendar__tile').simulate('focus');
+    const tile = container.querySelector('.react-calendar__tile');
+    fireEvent.focus(tile);
 
@@ -114,7 +124,9 @@ expect(onMouseOver).toHaveBeenCalled();
   it('renders tileContent properly', () => {
-    const component = mount(<Year {...tileProps} tileContent={<div className="testContent" />} />);
+    const { container } = render(
+      <Year {...tileProps} tileContent={<div className="testContent" />} />,
+    );
 
-    const testContent = component.find('.testContent');
+    const testContent = container.querySelector('.testContent');
 
-    expect(testContent).toHaveLength(1);
+    expect(testContent).toBeInTheDocument();
   });
@@ -127,5 +139,5 @@
 
-    const component = mount(<Year {...tileProps} date={date} tileContent={tileContent} />);
+    const { container } = render(<Year {...tileProps} date={date} tileContent={tileContent} />);
 
-    const testContent = component.find('.testContent');
+    const testContent = container.querySelector('.testContent');
 
@@ -138,3 +150,3 @@ expect(tileContent).toHaveBeenCalled();
     });
-    expect(testContent).toHaveLength(1);
+    expect(testContent).toBeInTheDocument();
   });
@@ -148,12 +160,12 @@
 
-    const component = mount(
+    const { container } = render(
       <Year {...tileProps} date={date} formatYear={formatYear} locale={locale} />,
     );
 
-    const tile = component.find('Tile');
+    const tile = container.querySelector('.react-calendar__tile');
 
     expect(formatYear).toHaveBeenCalled();
     expect(formatYear).toHaveBeenCalledWith(locale, date);
-    expect(tile.text()).toBe('Mock format');
+    expect(tile).toHaveTextContent('Mock format');
   });
 });

src/Flex.spec.jsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -8,3 +8,3 @@ import Flex from './Flex';
   it('styles itself properly with wrap flag set to false', () => {
-    const noWrapComponent = shallow(
+    const { container } = render(
       <Flex count={3} wrap={false}>
@@ -17,8 +17,10 @@ <div>Hey</div>
 
-    expect(noWrapComponent.prop('style').display).toBe('flex');
-    expect(noWrapComponent.prop('style').flexWrap).toBe('no-wrap');
+    const wrapper = container.firstChild;
+
+    expect(wrapper).toHaveStyle('display: flex');
+    expect(wrapper).toHaveStyle('flex-wrap: no-wrap');
   });
 
   it('styles itself properly with wrap flag set to true', () => {
-    const wrapComponent = shallow(
+    const { container } = render(
       <Flex count={3} wrap>
@@ -31,8 +33,10 @@ <div>Hey</div>
 
-    expect(wrapComponent.prop('style').display).toBe('flex');
-    expect(wrapComponent.prop('style').flexWrap).toBe('wrap');
+    const wrapper = container.firstChild;
+
+    expect(wrapper).toHaveStyle('display: flex');
+    expect(wrapper).toHaveStyle('flex-wrap: wrap');
   });
 
   it('renders all given children', () => {
-    const component = shallow(
+    const { container } = render(
       <Flex count={3}>
@@ -45,12 +49,12 @@ <div>Hey</div>
 
-    const children = component.children();
+    const children = [...container.firstChild.children];
 
     expect(children).toHaveLength(3);
-    expect(children.at(0).text()).toBe('Hey');
-    expect(children.at(1).text()).toBe('Hi');
-    expect(children.at(2).text()).toBe('Hello');
+    expect(children[0]).toHaveTextContent('Hey');
+    expect(children[1]).toHaveTextContent('Hi');
+    expect(children[2]).toHaveTextContent('Hello');
   });
 
   it('properly sizes and positions all the elements', () => {
-    const component = shallow(
+    const { container } = render(
       <Flex count={3} offset={1}>
@@ -62,9 +66,7 @@ <div>Hey</div>
 
-    const children = component.children();
+    const children = [...container.firstChild.children];
 
-    children.forEach((child) =>
-      expect(parseFloat(child.prop('style').flexBasis)).toBeCloseTo(33.33),
-    );
-    expect(parseFloat(children.first().prop('style').marginLeft)).toBeCloseTo(33.33);
+    children.forEach((child) => expect(child).toHaveStyle('flex-basis: 33.333333333333336%'));
+    expect(children[0]).toHaveStyle('margin-left: 33.333333333333336%');
   });
 });

src/MonthView.spec.jsx

 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import MonthView from './MonthView';
+import { formatShortWeekday } from './shared/dateFormatter';
 
@@ -19,3 +20,4 @@ const { format } = new Intl.DateTimeFormat('en-US', {
     const activeStartDate = new Date(2017, 0, 1);
-    const component = mount(
+
+    const { container } = render(
       <MonthView
@@ -28,6 +30,6 @@ {...defaultProps}
 
-    const firstDayTile = component.find('.react-calendar__tile').first();
-    const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label');
+    const firstDayTile = container.querySelector('.react-calendar__tile');
+    const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
 
-    expect(firstDayTileTimeAbbr).toBe(format(activeStartDate));
+    expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(activeStartDate));
   });
@@ -37,10 +39,10 @@
     const tileClassName = 'testClassName';
-    const component = mount(
+
+    const { container } = render(
       <MonthView {...defaultProps} showNeighboringMonth={false} tileClassName={tileClassName} />,
     );
 
-    const firstDayTile = component.find('.react-calendar__tile').first();
-    const firstDayTileClassName = firstDayTile.prop('className');
+    const firstDayTile = container.querySelector('.react-calendar__tile');
 
-    expect(firstDayTileClassName.includes(tileClassName)).toBe(true);
+    expect(firstDayTile).toHaveClass(tileClassName);
   });
@@ -57,3 +59,4 @@
     };
-    const component = mount(
+
+    const { container } = render(
       <MonthView
@@ -67,11 +70,7 @@ {...defaultProps}
 
-    const tiles = component.find('.react-calendar__tile');
+    const tiles = container.querySelectorAll('.react-calendar__tile');
+    const [firstDayTile, secondDayTile] = tiles;
 
-    const firstDayTile = tiles.first();
-    const firstDayTileClassName = firstDayTile.prop('className');
-    const secondDayTile = tiles.at(1);
-    const secondDayTileClassName = secondDayTile.prop('className');
-
-    expect(firstDayTileClassName.includes('firstDayOfTheMonth')).toBe(true);
-    expect(secondDayTileClassName.includes('firstDayOfTheMonth')).toBe(false);
+    expect(firstDayTile).toHaveClass('firstDayOfTheMonth');
+    expect(secondDayTile).not.toHaveClass('firstDayOfTheMonth');
   });
@@ -81,12 +80,11 @@
     const tileContent = <div className="testContent" />;
-    const component = mount(
+
+    const { container } = render(
       <MonthView {...defaultProps} showNeighboringMonth={false} tileContent={tileContent} />,
     );
 
-    const tiles = component.find('.react-calendar__tile');
+    const firstDayTile = container.querySelector('.react-calendar__tile');
+    const firstDayTileContent = firstDayTile.querySelector('.testContent');
 
-    const firstDayTile = tiles.first();
-    const firstDayTileContent = firstDayTile.find('.testContent');
-
-    expect(firstDayTileContent).toHaveLength(1);
+    expect(firstDayTileContent).toBeInTheDocument();
   });
@@ -104,3 +102,3 @@
 
-    const component = mount(
+    const { container } = render(
       <MonthView
@@ -114,23 +112,26 @@ {...defaultProps}
 
-    const tiles = component.find('.react-calendar__tile');
+    const tiles = container.querySelectorAll('.react-calendar__tile');
+    const [firstDayTile, secondDayTile] = tiles;
 
-    const firstDayTile = tiles.first();
-    const firstDayTileContent = firstDayTile.find('.testContent');
-    const secondDayTile = tiles.at(1);
-    const secondDayTileContent = secondDayTile.find('.testContent');
+    const firstDayTileContent = firstDayTile.querySelector('.testContent');
+    const secondDayTileContent = secondDayTile.querySelector('.testContent');
 
-    expect(firstDayTileContent).toHaveLength(1);
-    expect(secondDayTileContent).toHaveLength(0);
+    expect(firstDayTileContent).toBeInTheDocument();
+    expect(secondDayTileContent).not.toBeInTheDocument();
   });
 
   it('does not render WeekNumbers component by default', () => {
-    const component = mount(<MonthView {...defaultProps} />);
+    const { container } = render(<MonthView {...defaultProps} />);
 
-    expect(component.find('WeekNumbers')).toHaveLength(0);
+    const weekNumbers = container.querySelector('.react-calendar__month-view__weekNumbers');
+
+    expect(weekNumbers).not.toBeInTheDocument();
   });
 
   it('renders WeekNumbers component by given showWeekNumbers flag', () => {
-    const component = mount(<MonthView {...defaultProps} showWeekNumbers />);
+    const { container } = render(<MonthView {...defaultProps} showWeekNumbers />);
 
-    expect(component.find('WeekNumbers')).toHaveLength(1);
+    const weekNumbers = container.querySelector('.react-calendar__month-view__weekNumbers');
+
+    expect(weekNumbers).toBeInTheDocument();
   });
@@ -141,7 +142,8 @@
 
-    const component = shallow(<MonthView {...defaultProps} calendarType={calendarType} />);
+    const { container } = render(<MonthView {...defaultProps} calendarType={calendarType} />);
 
-    const weekdays = component.find('Weekdays');
+    const firstWeekday = container.querySelector('.react-calendar__month-view__weekdays__weekday');
 
-    expect(weekdays.prop('calendarType')).toBe(calendarType);
+    // ISO 8601 calendar week starts on Monday
+    expect(firstWeekday).toHaveTextContent('Mon');
   });
@@ -152,19 +154,20 @@
 
-    const component = shallow(<MonthView {...defaultProps} locale={locale} />);
+    const { container } = render(<MonthView {...defaultProps} locale={locale} />);
 
-    const weekdays = component.find('Weekdays');
+    const firstWeekday = container.querySelector('.react-calendar__month-view__weekdays__weekday');
 
-    expect(weekdays.prop('calendarType')).toBe('US');
+    // US calendar week starts on Sunday
+    expect(firstWeekday).toHaveTextContent('Sun');
   });
 
-  it('passes formatShortWeekday flag to Weekdays component', () => {
+  it('passes formatShortWeekday to Weekdays component', () => {
     const formatShortWeekday = () => 'Weekday';
 
-    const component = shallow(
+    const { container } = render(
       <MonthView {...defaultProps} formatShortWeekday={formatShortWeekday} />,
     );
 
-    const weekdays = component.find('Weekdays');
+    const weekdays = container.querySelector('.react-calendar__month-view__weekdays');
 
-    expect(weekdays.prop('formatShortWeekday')).toBe(formatShortWeekday);
+    expect(weekdays).toHaveTextContent('Weekday');
   });
@@ -175,7 +178,15 @@
 
-    const component = shallow(<MonthView {...defaultProps} calendarType={calendarType} />);
+    const { container } = render(
+      <MonthView
+        {...defaultProps}
+        calendarType={calendarType}
+        formatDay={formatShortWeekday}
+        showNeighboringMonth
+      />,
+    );
 
-    const days = component.find('Days');
+    const firstDay = container.querySelector('.react-calendar__month-view__days__day');
 
-    expect(days.prop('calendarType')).toBe(calendarType);
+    // ISO 8601 calendar week starts on Monday
+    expect(firstDay).toHaveTextContent('Mon');
   });
@@ -186,28 +197,26 @@
 
-    const component = shallow(<MonthView {...defaultProps} locale={locale} />);
+    const { container } = render(
+      <MonthView
+        {...defaultProps}
+        formatDay={formatShortWeekday}
+        locale={locale}
+        showNeighboringMonth
+      />,
+    );
 
-    const days = component.find('Days');
+    const firstDay = container.querySelector('.react-calendar__month-view__days__day');
 
-    expect(days.prop('calendarType')).toBe('US');
+    // US calendar week starts on Sunday
+    expect(firstDay).toHaveTextContent('Sun');
   });
 
-  it('passes formatDay flag to Days component', () => {
+  it('displays month view with custom day formatting', () => {
     const formatDay = () => 'Day';
 
-    const component = shallow(<MonthView {...defaultProps} formatDay={formatDay} />);
+    const { container } = render(<MonthView {...defaultProps} formatDay={formatDay} />);
 
-    const days = component.find('Days');
+    const day = container.querySelector('.react-calendar__month-view__days__day');
 
-    expect(days.prop('formatDay')).toBe(formatDay);
+    expect(day).toHaveTextContent('Day');
   });
-
-  it('passes formatLongDate flag to Days component', () => {
-    const formatLongDate = () => 'Long date';
-
-    const component = shallow(<MonthView {...defaultProps} formatLongDate={formatLongDate} />);
-
-    const days = component.find('Days');
-
-    expect(days.prop('formatLongDate')).toBe(formatLongDate);
-  });
 });

src/MonthView/Day.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
@@ -15,3 +15,3 @@ import Day from './Day';
   it('applies given classNames properly', () => {
-    const component = mount(
+    const { container } = render(
       <Day
@@ -24,12 +24,12 @@ {...tileProps}
 
-    const wrapperClassName = component.find('.react-calendar__tile').prop('className');
+    const wrapper = container.querySelector('.react-calendar__tile');
 
-    expect(wrapperClassName.includes('react-calendar__tile')).toBe(true);
-    expect(wrapperClassName.includes('react-calendar__tile--flag')).toBe(true);
-    expect(wrapperClassName.includes('react-calendar__month-view__days__day')).toBe(true);
-    expect(wrapperClassName.includes('testFunctionClassName')).toBe(true);
+    expect(wrapper).toHaveClass('react-calendar__tile');
+    expect(wrapper).toHaveClass('react-calendar__tile--flag');
+    expect(wrapper).toHaveClass('react-calendar__month-view__days__day');
+    expect(wrapper).toHaveClass('testFunctionClassName');
   });
 
   it('applies additional classNames for weekends', () => {
-    const component = mount(
+    const { container } = render(
       <Day
@@ -41,57 +41,63 @@ {...tileProps}
 
-    const wrapperClassName = component.find('.react-calendar__tile').prop('className');
+    const wrapper = container.querySelector('.react-calendar__tile');
 
-    expect(wrapperClassName.includes('react-calendar__month-view__days__day--weekend')).toBe(true);
+    expect(wrapper).toHaveClass('react-calendar__month-view__days__day--weekend');
   });
 
   it('applies additional classNames for neighboring months', () => {
-    const component = mount(<Day {...tileProps} date={new Date(2018, 1, 2)} />);
+    const { container } = render(<Day {...tileProps} date={new Date(2018, 1, 2)} />);
 
-    const wrapperClassName = component.find('.react-calendar__tile').prop('className');
+    const wrapper = container.querySelector('.react-calendar__tile');
 
-    expect(
-      wrapperClassName.includes('react-calendar__month-view__days__day--neighboringMonth'),
-    ).toBe(true);
+    expect(wrapper).toHaveClass('react-calendar__month-view__days__day--neighboringMonth');
   });
 
   it('renders component with proper abbreviation', () => {
-    const component = mount(<Day {...tileProps} date={new Date(2018, 0, 1)} />);
+    const { container } = render(<Day {...tileProps} date={new Date(2018, 0, 1)} />);
 
-    const abbr = component.find('abbr');
+    const abbr = container.querySelector('abbr');
 
-    expect(abbr).toHaveLength(1);
-    expect(abbr.prop('aria-label')).toBe('January 1, 2018');
-    expect(component.text()).toBe('1');
+    expect(abbr).toBeInTheDocument();
+    expect(abbr).toHaveAccessibleName('January 1, 2018');
+    expect(container).toHaveTextContent('1');
   });
 
   it("is disabled when date is before beginning of minDate's day", () => {
-    const component = mount(
+    const { container } = render(
       <Day {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2018, 0, 2)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeDisabled();
   });
 
   it("is not disabled when date is after beginning of minDate's day", () => {
-    const component = mount(
+    const { container } = render(
       <Day {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2018, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeEnabled();
   });
 
   it("is disabled when date is after end of maxDate's day", () => {
-    const component = mount(
+    const { container } = render(
       <Day {...tileProps} date={new Date(2018, 0, 2)} maxDate={new Date(2018, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeDisabled();
   });
 
   it("is not disabled when date is before end of maxDate's day", () => {
-    const component = mount(
+    const { container } = render(
       <Day {...tileProps} date={new Date(2018, 0, 1)} maxDate={new Date(2018, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeEnabled();
   });
@@ -103,5 +109,5 @@
 
-    const component = mount(<Day {...tileProps} date={date} onClick={onClick} />);
+    const { container } = render(<Day {...tileProps} date={date} onClick={onClick} />);
 
-    component.find('.react-calendar__tile').simulate('click');
+    fireEvent.click(container.querySelector('.react-calendar__tile'));
 
@@ -116,5 +122,6 @@ expect(onClick).toHaveBeenCalled();
 
-    const component = mount(<Day {...tileProps} date={date} onMouseOver={onMouseOver} />);
+    const { container } = render(<Day {...tileProps} date={date} onMouseOver={onMouseOver} />);
 
-    component.find('.react-calendar__tile').simulate('mouseOver');
+    const tile = container.querySelector('.react-calendar__tile');
+    fireEvent.mouseOver(tile);
 
@@ -129,5 +136,6 @@ expect(onMouseOver).toHaveBeenCalled();
 
-    const component = mount(<Day {...tileProps} date={date} onMouseOver={onMouseOver} />);
+    const { container } = render(<Day {...tileProps} date={date} onMouseOver={onMouseOver} />);
 
-    component.find('.react-calendar__tile').simulate('focus');
+    const tile = container.querySelector('.react-calendar__tile');
+    fireEvent.focus(tile);
 
@@ -139,7 +147,9 @@ expect(onMouseOver).toHaveBeenCalled();
   it('renders tileContent properly', () => {
-    const component = mount(<Day {...tileProps} tileContent={<div className="testContent" />} />);
+    const { container } = render(
+      <Day {...tileProps} tileContent={<div className="testContent" />} />,
+    );
 
-    const testContent = component.find('.testContent');
+    const testContent = container.querySelector('.testContent');
 
-    expect(testContent).toHaveLength(1);
+    expect(testContent).toBeInTheDocument();
   });
@@ -152,5 +162,5 @@
 
-    const component = mount(<Day {...tileProps} date={date} tileContent={tileContent} />);
+    const { container } = render(<Day {...tileProps} date={date} tileContent={tileContent} />);
 
-    const testContent = component.find('.testContent');
+    const testContent = container.querySelector('.testContent');
 
@@ -163,3 +173,3 @@ expect(tileContent).toHaveBeenCalled();
     });
-    expect(testContent).toHaveLength(1);
+    expect(testContent).toBeInTheDocument();
   });
@@ -173,11 +183,11 @@
 
-    const component = mount(
+    const { container } = render(
       <Day {...tileProps} date={date} formatDay={formatDay} locale={locale} />,
     );
 
-    const tile = component.find('Tile');
+    const tile = container.querySelector('.react-calendar__tile');
 
     expect(formatDay).toHaveBeenCalled();
     expect(formatDay).toHaveBeenCalledWith(locale, date);
-    expect(tile.text()).toBe('Mock format');
+    expect(tile).toHaveTextContent('Mock format');
   });
@@ -191,12 +201,12 @@
 
-    const component = mount(
+    const { container } = render(
       <Day {...tileProps} date={date} formatLongDate={formatLongDate} locale={locale} />,
     );
 
-    const abbr = component.find('abbr');
+    const abbr = container.querySelector('abbr');
 
     expect(formatLongDate).toHaveBeenCalled();
     expect(formatLongDate).toHaveBeenCalledWith(locale, date);
-    expect(abbr.prop('aria-label')).toBe('Mock format');
+    expect(abbr).toHaveAccessibleName('Mock format');
   });
 });

src/MonthView/Weekdays.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import mergeClassNames from 'merge-class-names';
 import { getYear, getMonth, getMonthStart } from '@wojtekmaj/date-utils';
@@ -7,3 +8,3 @@
 
-import { getDayOfWeek } from '../shared/dates';
+import { getDayOfWeek, isWeekend } from '../shared/dates';
 import {
@@ -16,2 +17,3 @@ formatWeekday,
 const className = 'react-calendar__month-view__weekdays';
+const weekdayClassName = `${className}__weekday`;
 
@@ -43,3 +45,9 @@ export default function Weekdays(props) {
     weekdays.push(
-      <div key={weekday} className={`${className}__weekday`}>
+      <div
+        key={weekday}
+        className={mergeClassNames(
+          weekdayClassName,
+          isWeekend(weekdayDate, calendarType) && `${weekdayClassName}--weekend`,
+        )}
+      >
         <abbr aria-label={abbr} title={abbr}>
@@ -46,0 +54,0 @@ {formatShortWeekday(locale, weekdayDate).replace('.', '')}

src/MonthView/Weekdays.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -12,33 +12,35 @@ import Weekdays from './Weekdays';
   it('renders proper weekdays (ISO 8601)', () => {
-    const component = mount(<Weekdays {...defaultProps} calendarType="ISO 8601" />);
+    const { container } = render(<Weekdays {...defaultProps} calendarType="ISO 8601" />);
 
-    const weekdays = component.find('.react-calendar__month-view__weekdays__weekday');
-    const firstWeekday = weekdays.first();
-    const firstWeekdayAbbr = firstWeekday.find('abbr');
+    const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday');
+    const firstWeekday = weekdays[0];
+    const firstWeekdayAbbr = firstWeekday.querySelector('abbr');
 
     expect(weekdays).toHaveLength(7);
-    expect(firstWeekday.text()).toBe('Mon');
-    expect(firstWeekdayAbbr.prop('aria-label')).toBe('Monday');
+    expect(firstWeekday).toHaveTextContent('Mon');
+    expect(firstWeekdayAbbr).toHaveAccessibleName('Monday');
   });
 
   it('renders proper weekdays (US)', () => {
-    const component = mount(<Weekdays {...defaultProps} calendarType="US" />);
+    const { container } = render(<Weekdays {...defaultProps} calendarType="US" />);
 
-    const weekdays = component.find('.react-calendar__month-view__weekdays__weekday');
-    const firstWeekday = weekdays.first();
-    const firstWeekdayAbbr = firstWeekday.find('abbr');
+    const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday');
+    const firstWeekday = weekdays[0];
+    const firstWeekdayAbbr = firstWeekday.querySelector('abbr');
 
     expect(weekdays).toHaveLength(7);
-    expect(firstWeekday.text()).toBe('Sun');
-    expect(firstWeekdayAbbr.prop('aria-label')).toBe('Sunday');
+    expect(firstWeekday).toHaveTextContent('Sun');
+    expect(firstWeekdayAbbr).toHaveAccessibleName('Sunday');
   });
 
   it('renders weekdays with custom weekdays formatting', () => {
-    const component = mount(<Weekdays {...defaultProps} formatShortWeekday={() => 'Weekday'} />);
+    const { container } = render(
+      <Weekdays {...defaultProps} formatShortWeekday={() => 'Weekday'} />,
+    );
 
-    const weekdays = component.find('.react-calendar__month-view__weekdays__weekday');
-    const firstWeekday = weekdays.first();
+    const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday');
+    const firstWeekday = weekdays[0];
 
-    expect(firstWeekday.text()).toBe('Weekday');
+    expect(firstWeekday).toHaveTextContent('Weekday');
   });
 });

src/MonthView/WeekNumber.spec.jsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -13,5 +13,5 @@ import WeekNumber from './WeekNumber';
   it('renders div by default', () => {
-    const component = shallow(<WeekNumber {...defaultProps} />);
+    const { container } = render(<WeekNumber {...defaultProps} />);
 
-    expect(component.find('div')).toHaveLength(1);
+    expect(container.querySelector('div')).toBeInTheDocument();
   });
@@ -22,7 +22,7 @@
 
-    const component = shallow(
+    const { container } = render(
       <WeekNumber {...defaultProps} onClickWeekNumber={onClickWeekNumber} />,
     );
 
-    expect(component.find('button')).toHaveLength(1);
+    expect(container.querySelector('button')).toBeInTheDocument();
   });
@@ -33,6 +33,6 @@
 
-    const component = shallow(<WeekNumber {...defaultProps} weekNumber={weekNumber} />);
+    const { container } = render(<WeekNumber {...defaultProps} weekNumber={weekNumber} />);
 
-    expect(component.text()).toBe(weekNumber);
+    expect(container).toHaveTextContent(weekNumber);
   });
 });

src/MonthView/WeekNumbers.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
 import WeekNumbers from './WeekNumbers';
 
-describe('WeekNumbers', () => {
+describe('.react-calendar__month-view__weekNumbers', () => {
   const defaultProps = {
@@ -12,3 +12,3 @@ activeStartDate: new Date(2017, 0, 1),
   it('renders proper weekNumbers for a year that starts in week 1 (ISO 8601)', () => {
-    const component = mount(
+    const { container } = render(
       <WeekNumbers
@@ -21,10 +21,10 @@ {...defaultProps}
 
-    const weekNumbers = component.find('WeekNumber');
+    const weekNumbers = container.querySelectorAll('.react-calendar__tile');
 
     expect(weekNumbers).toHaveLength(5);
-    expect(weekNumbers.first().text()).toBe('1');
+    expect(weekNumbers[0]).toHaveTextContent('1');
   });
 
   it('renders proper weekNumbers for a year that starts on week 52 (ISO 8601)', () => {
-    const component = mount(
+    const { container } = render(
       <WeekNumbers
@@ -37,10 +37,10 @@ {...defaultProps}
 
-    const weekNumbers = component.find('WeekNumber');
+    const weekNumbers = container.querySelectorAll('.react-calendar__tile');
 
     expect(weekNumbers).toHaveLength(6);
-    expect(weekNumbers.first().text()).toBe('52');
+    expect(weekNumbers[0]).toHaveTextContent('52');
   });
 
   it('renders proper weekNumbers for a year that starts on week 53 (ISO 8601)', () => {
-    const component = mount(
+    const { container } = render(
       <WeekNumbers
@@ -53,17 +53,17 @@ {...defaultProps}
 
-    const weekNumbers = component.find('WeekNumber');
+    const weekNumbers = container.querySelectorAll('.react-calendar__tile');
 
     expect(weekNumbers).toHaveLength(5);
-    expect(weekNumbers.first().text()).toBe('53');
+    expect(weekNumbers[0]).toHaveTextContent('53');
   });
 
   it('renders proper weekNumbers for a year that starts in week 1 (US)', () => {
-    const component = mount(
+    const { container } = render(
       <WeekNumbers {...defaultProps} activeStartDate={new Date(2017, 0, 1)} calendarType="US" />,
     );
 
-    const weekNumbers = component.find('WeekNumber');
+    const weekNumbers = container.querySelectorAll('.react-calendar__tile');
 
     expect(weekNumbers).toHaveLength(5);
-    expect(weekNumbers.first().text()).toBe('1');
+    expect(weekNumbers[0]).toHaveTextContent('1');
   });
@@ -73,3 +73,3 @@
     // Same config as in first test which gives 5 weeks, except for the flag
-    const component = mount(
+    const { container } = render(
       <WeekNumbers
@@ -83,12 +83,12 @@ {...defaultProps}
 
-    const weekNumbers = component.find('WeekNumber');
+    const weekNumbers = container.querySelectorAll('.react-calendar__tile');
 
     expect(weekNumbers).toHaveLength(6);
-    expect(weekNumbers.first().text()).toBe('1');
+    expect(weekNumbers[0]).toHaveTextContent('1');
   });
 
   it('renders static divs as children when not given onClickWeekNumber', () => {
-    const component = mount(<WeekNumbers {...defaultProps} calendarType="ISO 8601" />);
+    const { container } = render(<WeekNumbers {...defaultProps} calendarType="ISO 8601" />);
 
-    const children = component.find('div.react-calendar__tile');
+    const children = container.querySelectorAll('div.react-calendar__tile');
 
@@ -99,7 +99,7 @@ expect(children).toHaveLength(6);
   it('renders buttons as children when given onClickWeekNumber', () => {
-    const component = mount(
+    const { container } = render(
       <WeekNumbers {...defaultProps} calendarType="ISO 8601" onClickWeekNumber={jest.fn()} />,
     );
 
-    const children = component.find('button.react-calendar__tile');
+    const children = container.querySelectorAll('button.react-calendar__tile');
 
@@ -111,3 +111,3 @@ expect(children).toHaveLength(6);
     const onClickWeekNumber = jest.fn();
-    const component = mount(
+    const { container } = render(
       <WeekNumbers
@@ -120,5 +120,5 @@ {...defaultProps}
 
-    const children = component.find('button.react-calendar__tile');
+    const children = container.querySelectorAll('button.react-calendar__tile');
 
-    children.first().simulate('click');
+    fireEvent.click(children[0]);
     expect(onClickWeekNumber).toHaveBeenCalledWith(52, new Date(2016, 11, 26), expect.any(Object));
@@ -129,11 +129,11 @@ });
     const onClickWeekNumber = jest.fn();
-    const component = mount(
+    const { container } = render(
       <WeekNumbers {...defaultProps} calendarType="US" onClickWeekNumber={onClickWeekNumber} />,
     );
 
-    const children = component.find('button.react-calendar__tile');
+    const children = container.querySelectorAll('button.react-calendar__tile');
 
-    children.first().simulate('click');
+    fireEvent.click(children[0]);
     expect(onClickWeekNumber).toHaveBeenCalledWith(1, new Date(2017, 0, 1), expect.any(Object));
   });
 });

src/Tile.spec.jsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
@@ -17,5 +17,5 @@ import Tile from './Tile';
   it('renders button properly', () => {
-    const component = shallow(<Tile {...defaultProps} />);
+    const { container } = render(<Tile {...defaultProps} />);
 
-    expect(component.find('button')).toHaveLength(1);
+    expect(container.querySelector('button')).toBeInTheDocument();
   });
@@ -26,7 +26,7 @@
 
-    const component = shallow(<Tile {...defaultProps} onClick={onClick} />);
+    const { container } = render(<Tile {...defaultProps} onClick={onClick} />);
 
-    const button = component.find('button');
+    const button = container.querySelector('button');
 
-    button.simulate('click');
+    fireEvent.click(button);
 
@@ -39,8 +39,8 @@ expect(onClick).toHaveBeenCalledTimes(1);
 
-    const component = shallow(<Tile {...defaultProps} classes={classes} />);
+    const { container } = render(<Tile {...defaultProps} classes={classes} />);
 
-    const button = component.find('button');
+    const button = container.querySelector('button');
 
     classes.forEach((className) => {
-      expect(button.prop('className')).toMatch(className);
+      expect(button).toHaveClass(className);
     });
@@ -52,11 +52,11 @@ });
 
-    const component = shallow(<Tile {...defaultProps}>{children}</Tile>);
+    const { container } = render(<Tile {...defaultProps}>{children}</Tile>);
 
-    expect(component.text()).toBe(children);
+    expect(container).toHaveTextContent(children);
   });
 
   it('does not render abbr by default', () => {
-    const component = shallow(<Tile {...defaultProps} />);
+    const { container } = render(<Tile {...defaultProps} />);
 
-    expect(component.find('abbr')).toHaveLength(0);
+    expect(container.querySelector('abbr')).not.toBeInTheDocument();
   });
@@ -69,3 +69,3 @@
 
-    shallow(<Tile {...defaultProps} date={date} formatAbbr={formatAbbr} locale={locale} />);
+    render(<Tile {...defaultProps} date={date} formatAbbr={formatAbbr} locale={locale} />);
 
@@ -81,3 +81,3 @@ expect(formatAbbr).toHaveBeenCalledTimes(1);
 
-    const component = shallow(
+    const { container } = render(
       <Tile {...defaultProps} formatAbbr={formatAbbr}>
@@ -88,7 +88,7 @@ {children}
 
-    const abbr = component.find('abbr');
+    const abbr = container.querySelector('abbr');
 
-    expect(abbr).toHaveLength(1);
-    expect(abbr.text()).toBe(children);
-    expect(abbr.prop('aria-label')).toBe(ariaLabel);
+    expect(abbr).toBeInTheDocument();
+    expect(abbr).toHaveTextContent(children);
+    expect(abbr).toHaveAccessibleName(ariaLabel);
   });
@@ -102,3 +102,3 @@
 
-    const component = shallow(
+    const { rerender } = render(
       <Tile
@@ -114,5 +114,12 @@ {...defaultProps}
     // Trigger any unrelated prop change
-    component.setProps({
-      tileContent: 'a',
-    });
+    rerender(
+      <Tile
+        {...defaultProps}
+        activeStartDate={activeStartDate}
+        date={date}
+        tileClassName={tileClassName}
+        tileContent="a"
+        view={view}
+      />,
+    );
 
@@ -131,7 +138,7 @@ expect(tileClassName).toHaveBeenCalledTimes(1);
 
-    const component = shallow(<Tile {...defaultProps} tileClassName={tileClassName} />);
+    const { container } = render(<Tile {...defaultProps} tileClassName={tileClassName} />);
 
-    const button = component.find('button');
+    const button = container.querySelector('button');
 
-    expect(button.prop('className')).toMatch(className);
+    expect(button).toHaveClass(className);
   });
@@ -142,7 +149,7 @@
 
-    const component = shallow(<Tile {...defaultProps} tileClassName={className} />);
+    const { container } = render(<Tile {...defaultProps} tileClassName={className} />);
 
-    const button = component.find('button');
+    const button = container.querySelector('button');
 
-    expect(button.prop('className')).toMatch(className);
+    expect(button).toHaveClass(className);
   });
@@ -156,3 +163,3 @@
 
-    const component = shallow(
+    const { rerender } = render(
       <Tile
@@ -168,5 +175,12 @@ {...defaultProps}
     // Trigger any unrelated prop change
-    component.setProps({
-      tileClassName: 'a',
-    });
+    rerender(
+      <Tile
+        {...defaultProps}
+        activeStartDate={activeStartDate}
+        date={date}
+        tileClassName="a"
+        tileContent={tileContent}
+        view={view}
+      />,
+    );
 
@@ -185,7 +199,7 @@ expect(tileContent).toHaveBeenCalledTimes(1);
 
-    const component = shallow(<Tile {...defaultProps} tileContent={tileContent} />);
+    const { container } = render(<Tile {...defaultProps} tileContent={tileContent} />);
 
-    const button = component.find('button');
+    const button = container.querySelector('button');
 
-    expect(button.text()).toMatch(content);
+    expect(button).toHaveTextContent(content);
   });
@@ -196,7 +210,7 @@
 
-    const component = shallow(<Tile {...defaultProps} tileContent={content} />);
+    const { container } = render(<Tile {...defaultProps} tileContent={content} />);
 
-    const button = component.find('button');
+    const button = container.querySelector('button');
 
-    expect(button.text()).toMatch(content);
+    expect(button).toHaveTextContent(content);
   });
@@ -210,3 +224,3 @@
 
-    shallow(
+    render(
       <Tile
@@ -232,8 +246,8 @@ {...defaultProps}
 
-    const component = shallow(<Tile {...defaultProps} tileDisabled={tileDisabled} />);
+    const { container } = render(<Tile {...defaultProps} tileDisabled={tileDisabled} />);
 
-    const button = component.find('button');
+    const button = container.querySelector('button');
 
-    expect(button.prop('disabled')).toBeTruthy();
+    expect(button).toBeDisabled();
   });
 });

src/YearView.spec.jsx

 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -15,10 +15,11 @@ import YearView from './YearView';
     const activeStartDate = new Date(2017, 0, 1);
-    const component = mount(
+
+    const { container } = render(
       <YearView {...defaultProps} activeStartDate={activeStartDate} showNeighboringMonth={false} />,
     );
 
-    const firstDayTile = component.find('.react-calendar__tile').first();
-    const firstDayTileTimeAbbr = firstDayTile.find('abbr').prop('aria-label');
+    const firstDayTile = container.querySelector('.react-calendar__tile');
+    const firstDayTileTimeAbbr = firstDayTile.querySelector('abbr');
 
-    expect(firstDayTileTimeAbbr).toBe(format(activeStartDate));
+    expect(firstDayTileTimeAbbr).toHaveAccessibleName(format(activeStartDate));
   });
@@ -28,10 +29,10 @@
     const tileClassName = 'testClassName';
-    const component = mount(
+
+    const { container } = render(
       <YearView {...defaultProps} showNeighboringMonth={false} tileClassName={tileClassName} />,
     );
 
-    const firstDayTile = component.find('.react-calendar__tile').first();
-    const firstDayTileClassName = firstDayTile.prop('className');
+    const firstDayTile = container.querySelector('.react-calendar__tile');
 
-    expect(firstDayTileClassName.includes(tileClassName)).toBe(true);
+    expect(firstDayTile).toHaveClass(tileClassName);
   });
@@ -48,3 +49,4 @@
     };
-    const component = mount(
+
+    const { container } = render(
       <YearView
@@ -58,11 +60,7 @@ {...defaultProps}
 
-    const tiles = component.find('.react-calendar__tile');
+    const tiles = container.querySelectorAll('.react-calendar__tile');
+    const [firstDayTile, secondDayTile] = tiles;
 
-    const firstDayTile = tiles.first();
-    const firstDayTileClassName = firstDayTile.prop('className');
-    const secondDayTile = tiles.at(1);
-    const secondDayTileClassName = secondDayTile.prop('className');
-
-    expect(firstDayTileClassName.includes('firstDayOfTheMonth')).toBe(true);
-    expect(secondDayTileClassName.includes('firstDayOfTheMonth')).toBe(false);
+    expect(firstDayTile).toHaveClass('firstDayOfTheMonth');
+    expect(secondDayTile).not.toHaveClass('firstDayOfTheMonth');
   });
@@ -72,12 +70,11 @@
     const tileContent = <div className="testContent" />;
-    const component = mount(
+
+    const { container } = render(
       <YearView {...defaultProps} showNeighboringMonth={false} tileContent={tileContent} />,
     );
 
-    const tiles = component.find('.react-calendar__tile');
+    const firstDayTile = container.querySelector('.react-calendar__tile');
+    const firstDayTileContent = firstDayTile.querySelector('.testContent');
 
-    const firstDayTile = tiles.first();
-    const firstDayTileContent = firstDayTile.find('.testContent');
-
-    expect(firstDayTileContent).toHaveLength(1);
+    expect(firstDayTileContent).toBeInTheDocument();
   });
@@ -94,3 +91,4 @@
     };
-    const component = mount(
+
+    const { container } = render(
       <YearView
@@ -104,30 +102,19 @@ {...defaultProps}
 
-    const tiles = component.find('.react-calendar__tile');
+    const tiles = container.querySelectorAll('.react-calendar__tile');
+    const [firstDayTile, secondDayTile] = tiles;
 
-    const firstDayTile = tiles.first();
-    const firstDayTileContent = firstDayTile.find('.testContent');
-    const secondDayTile = tiles.at(1);
-    const secondDayTileContent = secondDayTile.find('.testContent');
+    const firstDayTileContent = firstDayTile.querySelector('.testContent');
+    const secondDayTileContent = secondDayTile.querySelector('.testContent');
 
-    expect(firstDayTileContent).toHaveLength(1);
-    expect(secondDayTileContent).toHaveLength(0);
+    expect(firstDayTileContent).toBeInTheDocument();
+    expect(secondDayTileContent).not.toBeInTheDocument();
   });
 
   it('displays year view with custom month formatting', () => {
-    const component = mount(<YearView {...defaultProps} formatMonth={() => 'Month'} />);
+    const { container } = render(<YearView {...defaultProps} formatMonth={() => 'Month'} />);
 
-    const month = component.find('.react-calendar__year-view__months__month').first();
+    const month = container.querySelector('.react-calendar__year-view__months__month');
 
-    expect(month.text()).toBe('Month');
+    expect(month).toHaveTextContent('Month');
   });
-
-  it('passes formatMonth flag to Days component', () => {
-    const formatMonth = () => 'Month';
-
-    const component = shallow(<YearView {...defaultProps} formatMonth={formatMonth} />);
-
-    const months = component.find('Months');
-
-    expect(months.prop('formatMonth')).toBe(formatMonth);
-  });
 });

src/YearView/Month.spec.jsx

 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
@@ -14,3 +14,3 @@ import Month from './Month';
   it('applies given classNames properly', () => {
-    const component = mount(
+    const { container } = render(
       <Month
@@ -23,50 +23,58 @@ {...tileProps}
 
-    const wrapperClassName = component.find('.react-calendar__tile').prop('className');
+    const wrapper = container.querySelector('.react-calendar__tile');
 
-    expect(wrapperClassName.includes('react-calendar__tile')).toBe(true);
-    expect(wrapperClassName.includes('react-calendar__tile--flag')).toBe(true);
-    expect(wrapperClassName.includes('react-calendar__year-view__months__month')).toBe(true);
-    expect(wrapperClassName.includes('testFunctionClassName')).toBe(true);
+    expect(wrapper).toHaveClass('react-calendar__tile');
+    expect(wrapper).toHaveClass('react-calendar__tile--flag');
+    expect(wrapper).toHaveClass('react-calendar__year-view__months__month');
+    expect(wrapper).toHaveClass('testFunctionClassName');
   });
 
   it('renders component with proper abbreviation', () => {
-    const component = mount(<Month {...tileProps} date={new Date(2018, 0, 1)} month={2018} />);
+    const { container } = render(<Month {...tileProps} date={new Date(2018, 0, 1)} month={2018} />);
 
-    const abbr = component.find('abbr');
+    const abbr = container.querySelector('abbr');
 
-    expect(abbr).toHaveLength(1);
-    expect(abbr.prop('aria-label')).toBe('January 2018');
-    expect(component.text()).toBe('January');
+    expect(abbr).toBeInTheDocument();
+    expect(abbr).toHaveAccessibleName('January 2018');
+    expect(container).toHaveTextContent('January');
   });
 
   it("is disabled when date is before beginning of minDate's month", () => {
-    const component = mount(
+    const { container } = render(
       <Month {...tileProps} date={new Date(2018, 6, 1)} minDate={new Date(2018, 7, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeDisabled();
   });
 
   it("is not disabled when date is after beginning of minDate's month", () => {
-    const component = mount(
+    const { container } = render(
       <Month {...tileProps} date={new Date(2018, 0, 1)} minDate={new Date(2018, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeEnabled();
   });
 
   it("is disabled when date is after end of maxDate's month", () => {
-    const component = mount(
+    const { container } = render(
       <Month {...tileProps} date={new Date(2018, 6, 1)} maxDate={new Date(2018, 5, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeTruthy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeDisabled();
   });
 
   it("is not disabled when date is before end of maxDate's month", () => {
-    const component = mount(
+    const { container } = render(
       <Month {...tileProps} date={new Date(2018, 0, 1)} maxDate={new Date(2018, 0, 1)} />,
     );
 
-    expect(component.find('.react-calendar__tile').prop('disabled')).toBeFalsy();
+    const tile = container.querySelector('.react-calendar__tile');
+
+    expect(tile).toBeEnabled();
   });
@@ -78,5 +86,5 @@
 
-    const component = mount(<Month {...tileProps} date={date} onClick={onClick} />);
+    const { container } = render(<Month {...tileProps} date={date} onClick={onClick} />);
 
-    component.find('.react-calendar__tile').simulate('click');
+    fireEvent.click(container.querySelector('.react-calendar__tile'));
 
@@ -91,5 +99,6 @@ expect(onClick).toHaveBeenCalled();
 
-    const component = mount(<Month {...tileProps} date={date} onMouseOver={onMouseOver} />);
+    const { container } = render(<Month {...tileProps} date={date} onMouseOver={onMouseOver} />);
 
-    component.find('.react-calendar__tile').simulate('mouseOver');
+    const tile = container.querySelector('.react-calendar__tile');
+    fireEvent.mouseOver(tile);
 
@@ -104,5 +113,6 @@ expect(onMouseOver).toHaveBeenCalled();
 
-    const component = mount(<Month {...tileProps} date={date} onMouseOver={onMouseOver} />);
+    const { container } = render(<Month {...tileProps} date={date} onMouseOver={onMouseOver} />);
 
-    component.find('.react-calendar__tile').simulate('focus');
+    const tile = container.querySelector('.react-calendar__tile');
+    fireEvent.focus(tile);
 
@@ -114,7 +124,9 @@ expect(onMouseOver).toHaveBeenCalled();
   it('renders tileContent properly', () => {
-    const component = mount(<Month {...tileProps} tileContent={<div className="testContent" />} />);
+    const { container } = render(
+      <Month {...tileProps} tileContent={<div className="testContent" />} />,
+    );
 
-    const testContent = component.find('.testContent');
+    const testContent = container.querySelector('.testContent');
 
-    expect(testContent).toHaveLength(1);
+    expect(testContent).toBeInTheDocument();
   });
@@ -127,5 +139,5 @@
 
-    const component = mount(<Month {...tileProps} date={date} tileContent={tileContent} />);
+    const { container } = render(<Month {...tileProps} date={date} tileContent={tileContent} />);
 
-    const testContent = component.find('.testContent');
+    const testContent = container.querySelector('.testContent');
 
@@ -138,3 +150,3 @@ expect(tileContent).toHaveBeenCalled();
     });
-    expect(testContent).toHaveLength(1);
+    expect(testContent).toBeInTheDocument();
   });
@@ -148,11 +160,11 @@
 
-    const component = mount(
+    const { container } = render(
       <Month {...tileProps} date={date} formatMonth={formatMonth} locale={locale} />,
     );
 
-    const tile = component.find('Tile');
+    const tile = container.querySelector('.react-calendar__tile');
 
     expect(formatMonth).toHaveBeenCalled();
     expect(formatMonth).toHaveBeenCalledWith(locale, date);
-    expect(tile.text()).toBe('Mock format');
+    expect(tile).toHaveTextContent('Mock format');
   });
@@ -166,12 +178,12 @@
 
-    const component = mount(
+    const { container } = render(
       <Month {...tileProps} date={date} formatMonthYear={formatMonthYear} locale={locale} />,
     );
 
-    const abbr = component.find('abbr');
+    const abbr = container.querySelector('abbr');
 
     expect(formatMonthYear).toHaveBeenCalled();
     expect(formatMonthYear).toHaveBeenCalledWith(locale, date);
-    expect(abbr.prop('aria-label')).toBe('Mock format');
+    expect(abbr).toHaveAccessibleName('Mock format');
   });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

515841

increased by1.86%

Lines of code

10217

increased by1.99%

Number of lines in readme file

202

increased by0.5%

Worsened metrics

Dev dependency count

17

increased by6.25%

No dependency changes