react-clock - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0

dist/esm/Clock.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import mergeClassNames from 'merge-class-names';
+import clsx from 'clsx';
 import { getHours, getMinutes, getSeconds } from '@wojtekmaj/date-utils';
@@ -11,40 +11,39 @@ import Hand from './Hand';
   var className = _ref.className,
-      formatHour = _ref.formatHour,
-      _ref$hourHandLength = _ref.hourHandLength,
-      hourHandLength = _ref$hourHandLength === void 0 ? 50 : _ref$hourHandLength,
-      hourHandOppositeLength = _ref.hourHandOppositeLength,
-      _ref$hourHandWidth = _ref.hourHandWidth,
-      hourHandWidth = _ref$hourHandWidth === void 0 ? 4 : _ref$hourHandWidth,
-      _ref$hourMarksLength = _ref.hourMarksLength,
-      hourMarksLength = _ref$hourMarksLength === void 0 ? 10 : _ref$hourMarksLength,
-      _ref$hourMarksWidth = _ref.hourMarksWidth,
-      hourMarksWidth = _ref$hourMarksWidth === void 0 ? 3 : _ref$hourMarksWidth,
-      locale = _ref.locale,
-      _ref$minuteHandLength = _ref.minuteHandLength,
-      minuteHandLength = _ref$minuteHandLength === void 0 ? 70 : _ref$minuteHandLength,
-      minuteHandOppositeLength = _ref.minuteHandOppositeLength,
-      _ref$minuteHandWidth = _ref.minuteHandWidth,
-      minuteHandWidth = _ref$minuteHandWidth === void 0 ? 2 : _ref$minuteHandWidth,
-      _ref$minuteMarksLengt = _ref.minuteMarksLength,
-      minuteMarksLength = _ref$minuteMarksLengt === void 0 ? 6 : _ref$minuteMarksLengt,
-      _ref$minuteMarksWidth = _ref.minuteMarksWidth,
-      minuteMarksWidth = _ref$minuteMarksWidth === void 0 ? 1 : _ref$minuteMarksWidth,
-      _ref$renderHourMarks = _ref.renderHourMarks,
-      renderHourMarks = _ref$renderHourMarks === void 0 ? true : _ref$renderHourMarks,
-      _ref$renderMinuteHand = _ref.renderMinuteHand,
-      renderMinuteHand = _ref$renderMinuteHand === void 0 ? true : _ref$renderMinuteHand,
-      _ref$renderMinuteMark = _ref.renderMinuteMarks,
-      renderMinuteMarks = _ref$renderMinuteMark === void 0 ? true : _ref$renderMinuteMark,
-      renderNumbers = _ref.renderNumbers,
-      _ref$renderSecondHand = _ref.renderSecondHand,
-      renderSecondHand = _ref$renderSecondHand === void 0 ? true : _ref$renderSecondHand,
-      _ref$secondHandLength = _ref.secondHandLength,
-      secondHandLength = _ref$secondHandLength === void 0 ? 90 : _ref$secondHandLength,
-      secondHandOppositeLength = _ref.secondHandOppositeLength,
-      _ref$secondHandWidth = _ref.secondHandWidth,
-      secondHandWidth = _ref$secondHandWidth === void 0 ? 1 : _ref$secondHandWidth,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 150 : _ref$size,
-      value = _ref.value;
-
+    formatHour = _ref.formatHour,
+    _ref$hourHandLength = _ref.hourHandLength,
+    hourHandLength = _ref$hourHandLength === void 0 ? 50 : _ref$hourHandLength,
+    hourHandOppositeLength = _ref.hourHandOppositeLength,
+    _ref$hourHandWidth = _ref.hourHandWidth,
+    hourHandWidth = _ref$hourHandWidth === void 0 ? 4 : _ref$hourHandWidth,
+    _ref$hourMarksLength = _ref.hourMarksLength,
+    hourMarksLength = _ref$hourMarksLength === void 0 ? 10 : _ref$hourMarksLength,
+    _ref$hourMarksWidth = _ref.hourMarksWidth,
+    hourMarksWidth = _ref$hourMarksWidth === void 0 ? 3 : _ref$hourMarksWidth,
+    locale = _ref.locale,
+    _ref$minuteHandLength = _ref.minuteHandLength,
+    minuteHandLength = _ref$minuteHandLength === void 0 ? 70 : _ref$minuteHandLength,
+    minuteHandOppositeLength = _ref.minuteHandOppositeLength,
+    _ref$minuteHandWidth = _ref.minuteHandWidth,
+    minuteHandWidth = _ref$minuteHandWidth === void 0 ? 2 : _ref$minuteHandWidth,
+    _ref$minuteMarksLengt = _ref.minuteMarksLength,
+    minuteMarksLength = _ref$minuteMarksLengt === void 0 ? 6 : _ref$minuteMarksLengt,
+    _ref$minuteMarksWidth = _ref.minuteMarksWidth,
+    minuteMarksWidth = _ref$minuteMarksWidth === void 0 ? 1 : _ref$minuteMarksWidth,
+    _ref$renderHourMarks = _ref.renderHourMarks,
+    renderHourMarks = _ref$renderHourMarks === void 0 ? true : _ref$renderHourMarks,
+    _ref$renderMinuteHand = _ref.renderMinuteHand,
+    renderMinuteHand = _ref$renderMinuteHand === void 0 ? true : _ref$renderMinuteHand,
+    _ref$renderMinuteMark = _ref.renderMinuteMarks,
+    renderMinuteMarks = _ref$renderMinuteMark === void 0 ? true : _ref$renderMinuteMark,
+    renderNumbers = _ref.renderNumbers,
+    _ref$renderSecondHand = _ref.renderSecondHand,
+    renderSecondHand = _ref$renderSecondHand === void 0 ? true : _ref$renderSecondHand,
+    _ref$secondHandLength = _ref.secondHandLength,
+    secondHandLength = _ref$secondHandLength === void 0 ? 90 : _ref$secondHandLength,
+    secondHandOppositeLength = _ref.secondHandOppositeLength,
+    _ref$secondHandWidth = _ref.secondHandWidth,
+    secondHandWidth = _ref$secondHandWidth === void 0 ? 1 : _ref$secondHandWidth,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 150 : _ref$size,
+    value = _ref.value;
   function renderMinuteMarksFn() {
@@ -54,8 +53,5 @@ if (!renderMinuteMarks) {
     }
-
     var minuteMarks = [];
-
     for (var i = 1; i <= 60; i += 1) {
       var isHourMark = renderHourMarks && !(i % 5);
-
       if (!isHourMark) {
@@ -71,6 +67,4 @@ minuteMarks.push( /*#__PURE__*/React.createElement(MinuteMark, {
     }
-
     return minuteMarks;
   }
-
   function renderHourMarksFn() {
@@ -80,5 +74,3 @@ if (!renderHourMarks) {
     }
-
     var hourMarks = [];
-
     for (var i = 1; i <= 12; i += 1) {
@@ -96,6 +88,4 @@ hourMarks.push( /*#__PURE__*/React.createElement(HourMark, {
     }
-
     return hourMarks;
   }
-
   function renderFace() {
@@ -106,3 +96,2 @@ return /*#__PURE__*/React.createElement("div", {
   }
-
   function renderHourHandFn() {
@@ -118,3 +107,2 @@ var angle = value ? getHours(value) * 30 + getMinutes(value) / 2 + getSeconds(value) / 600 : 0;
   }
-
   function renderMinuteHandFn() {
@@ -124,3 +112,2 @@ if (!renderMinuteHand) {
     }
-
     var angle = value ? getHours(value) * 360 + getMinutes(value) * 6 + getSeconds(value) / 10 : 0;
@@ -135,3 +122,2 @@ return /*#__PURE__*/React.createElement(Hand, {
   }
-
   function renderSecondHandFn() {
@@ -141,3 +127,2 @@ if (!renderSecondHand) {
     }
-
     var angle = value ? getMinutes(value) * 360 + getSeconds(value) * 6 : 0;
@@ -152,5 +137,4 @@ return /*#__PURE__*/React.createElement(Hand, {
   }
-
   return /*#__PURE__*/React.createElement("time", {
-    className: mergeClassNames('react-clock', className),
+    className: clsx('react-clock', className),
     dateTime: value instanceof Date ? value.toISOString() : value,
@@ -157,0 +141,0 @@ style: {

dist/esm/Hand.js

@@ -6,10 +6,10 @@ import React from 'react';
   var _ref$angle = _ref.angle,
-      angle = _ref$angle === void 0 ? 0 : _ref$angle,
-      name = _ref.name,
-      _ref$length = _ref.length,
-      length = _ref$length === void 0 ? 100 : _ref$length,
-      _ref$oppositeLength = _ref.oppositeLength,
-      oppositeLength = _ref$oppositeLength === void 0 ? 10 : _ref$oppositeLength,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 1 : _ref$width;
+    angle = _ref$angle === void 0 ? 0 : _ref$angle,
+    name = _ref.name,
+    _ref$length = _ref.length,
+    length = _ref$length === void 0 ? 100 : _ref$length,
+    _ref$oppositeLength = _ref.oppositeLength,
+    oppositeLength = _ref$oppositeLength === void 0 ? 10 : _ref$oppositeLength,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 1 : _ref$width;
   return /*#__PURE__*/React.createElement("div", {
@@ -16,0 +16,0 @@ className: "react-clock__hand react-clock__".concat(name, "-hand"),

dist/esm/HourMark.js

 var _excluded = ["formatHour", "locale", "number"];
-
-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); }
 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; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
@@ -15,7 +11,6 @@ import PropTypes from 'prop-types';
   var _ref$formatHour = _ref.formatHour,
-      formatHour = _ref$formatHour === void 0 ? defaultFormatHour : _ref$formatHour,
-      locale = _ref.locale,
-      number = _ref.number,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-
+    formatHour = _ref$formatHour === void 0 ? defaultFormatHour : _ref$formatHour,
+    locale = _ref.locale,
+    number = _ref.number,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Mark, _extends({
@@ -22,0 +17,0 @@ number: number && formatHour(locale, number)

dist/esm/Mark.js

@@ -6,9 +6,9 @@ import React from 'react';
   var _ref$angle = _ref.angle,
-      angle = _ref$angle === void 0 ? 0 : _ref$angle,
-      _ref$length = _ref.length,
-      length = _ref$length === void 0 ? 10 : _ref$length,
-      name = _ref.name,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 1 : _ref$width,
-      number = _ref.number;
+    angle = _ref$angle === void 0 ? 0 : _ref$angle,
+    _ref$length = _ref.length,
+    length = _ref$length === void 0 ? 10 : _ref$length,
+    name = _ref.name,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 1 : _ref$width,
+    number = _ref.number;
   return /*#__PURE__*/React.createElement("div", {
@@ -15,0 +15,0 @@ className: "react-clock__mark react-clock__".concat(name, "-mark"),

dist/esm/shared/propTypes.js

 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); }
-
 import { isDefined } from './utils';
-
 var isNumberBetween = function isNumberBetween(min, max) {
   return function (props, propName, componentName) {
     var value = props[propName];
-
     if (isDefined(value)) {
@@ -13,13 +10,11 @@ if (typeof value !== 'number') {
       }
-
       if (value < min || value > max) {
         return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(value), "` supplied to `").concat(componentName, "`, length must be between ").concat(min, " and ").concat(max, "."));
       }
-    } // Everything is fine
+    }
 
-
+    // Everything is fine
     return null;
   };
 };
-
 export var isHandLength = isNumberBetween(0, 100);
@@ -29,3 +24,2 @@ export var isOppositeHandLength = isNumberBetween(-100, 100);
   var width = props[propName];
-
   if (isDefined(width)) {
@@ -35,9 +29,8 @@ if (typeof width !== 'number') {
     }
-
     if (width < 0) {
       return new Error("Invalid prop `".concat(propName, "` of type `").concat(_typeof(width), "` supplied to `").concat(componentName, "`, width must be greater or equal to 0."));
     }
-  } // Everything is fine
+  }
 
-
+  // Everything is fine
   return null;
@@ -44,0 +37,0 @@ };

package.json

 {
   "name": "react-clock",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "An analog clock for your React app.",
-  "main": "dist/umd/index.js",
+  "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -13,6 +13,6 @@ "source": "src/index.js",
   "scripts": {
-    "build": "yarn build-js-all && yarn copy-styles && yarn build-styles",
-    "build-js-all": "yarn build-js-esm && yarn build-js-umd",
+    "build": "yarn build-js && yarn copy-styles && yarn build-styles",
+    "build-js": "yarn build-js-esm && yarn build-js-cjs",
     "build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js,**/*.spec.jsx\"",
-    "build-js-umd": "BABEL_ENV=production-umd babel src -d dist/umd --ignore \"**/*.spec.js,**/*.spec.jsx\"",
+    "build-js-cjs": "BABEL_ENV=production-cjs babel src -d dist/cjs --ignore \"**/*.spec.js,**/*.spec.jsx\"",
     "build-styles": "lessc ./dist/Clock.less ./dist/Clock.css",
@@ -22,5 +22,6 @@ "clean": "rimraf dist",
     "jest": "jest",
-    "lint": "eslint sample/ src/ test/ --ext .jsx,.js",
+    "lint": "eslint sample src test --ext .jsx,.js",
     "prepack": "yarn clean && yarn build",
-    "test": "yarn lint && yarn jest"
+    "prettier": "prettier --check . --cache",
+    "test": "yarn lint && yarn prettier && yarn jest"
   },
@@ -47,4 +48,4 @@ "keywords": [
     "@wojtekmaj/date-utils": "^1.0.0",
+    "clsx": "^1.2.1",
     "get-user-locale": "^1.4.0",
-    "merge-class-names": "^1.1.1",
     "prop-types": "^15.6.0"
@@ -57,18 +58,19 @@ },
     "@babel/preset-react": "^7.14.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
-    "enzyme": "^3.10.0",
-    "eslint": "^8.5.0",
-    "eslint-config-wojtekmaj": "^0.6.5",
-    "husky": "^7.0.0",
-    "jest": "^27.0.0",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^13.4.0",
+    "eslint": "^8.26.0",
+    "eslint-config-wojtekmaj": "^0.7.1",
+    "husky": "^8.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
     "less": "^4.0.0",
-    "prettier": "^2.5.0",
+    "prettier": "^2.7.0",
     "pretty-quick": "^3.1.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -75,0 +77,0 @@ "resolutions": {

src/Clock.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import mergeClassNames from 'merge-class-names';
+import clsx from 'clsx';
 import { getHours, getMinutes, getSeconds } from '@wojtekmaj/date-utils';
@@ -155,3 +155,3 @@
     <time
-      className={mergeClassNames('react-clock', className)}
+      className={clsx('react-clock', className)}
       dateTime={value instanceof Date ? value.toISOString() : value}
@@ -158,0 +158,0 @@ style={{

src/Clock.spec.jsx

 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -9,16 +9,16 @@ import Clock from './Clock';
     it('is rendered properly', () => {
-      const component = shallow(<Clock />);
+      const { container } = render(<Clock />);
 
-      const time = component.find('time');
+      const time = container.querySelector('time');
 
-      expect(time).toHaveLength(1);
+      expect(time).toBeInTheDocument();
     });
 
     it('has 150px size by default', () => {
-      const component = shallow(<Clock />);
+      const { container } = render(<Clock />);
 
-      const time = component.find('time');
+      const time = container.querySelector('time');
 
-      expect(time.prop('style').width).toBe('150px');
-      expect(time.prop('style').height).toBe('150px');
+      expect(time).toHaveStyle('width: 150px');
+      expect(time).toHaveStyle('height: 150px');
     });
@@ -29,8 +29,7 @@
 
-      const component = shallow(<Clock size={size} />);
+      const { container } = render(<Clock size={size} />);
 
-      const time = component.find('time');
+      const time = container.querySelector('time');
 
-      expect(time.prop('style').width).toBe(`${size}px`);
-      expect(time.prop('style').height).toBe(`${size}px`);
+      expect(time).toHaveAttribute('style', `width: ${size}px; height: ${size}px;`);
     });
@@ -41,7 +40,7 @@
 
-      const component = shallow(<Clock value={date} />);
+      const { container } = render(<Clock value={date} />);
 
-      const time = component.find('time');
+      const time = container.querySelector('time');
 
-      expect(time.prop('dateTime')).toBe(date.toISOString());
+      expect(time).toHaveAttribute('datetime', date.toISOString());
     });
@@ -52,7 +51,7 @@
 
-      const component = shallow(<Clock value={date} />);
+      const { container } = render(<Clock value={date} />);
 
-      const time = component.find('time');
+      const time = container.querySelector('time');
 
-      expect(time.prop('dateTime')).toBe(date);
+      expect(time).toHaveAttribute('datetime', date);
     });
@@ -63,14 +62,14 @@ });
     it('is rendered properly', () => {
-      const component = shallow(<Clock />);
+      const { container } = render(<Clock />);
 
-      const face = component.find('.react-clock__face');
+      const face = container.querySelector('.react-clock__face');
 
-      expect(face).toHaveLength(1);
+      expect(face).toBeInTheDocument();
     });
 
     it('has hour and minute marks by default', () => {
-      const component = shallow(<Clock />);
+      const { container } = render(<Clock />);
 
-      const hourMarks = component.find('HourMark');
-      const minuteMarks = component.find('MinuteMark');
+      const hourMarks = container.querySelectorAll('.react-clock__hour-mark');
+      const minuteMarks = container.querySelectorAll('.react-clock__minute-mark');
 
@@ -82,18 +81,16 @@ expect(hourMarks).toHaveLength(12);
     it('does not have hour numbers rendered by default', () => {
-      const component = shallow(<Clock />);
+      const { container } = render(<Clock />);
 
-      const hourMarks = component.find('HourMark');
+      const hourMarks = container.querySelectorAll('.react-clock__hour-mark');
 
-      expect(hourMarks.at(0).prop('number')).toBeFalsy();
+      expect(hourMarks[0]).not.toHaveTextContent('1');
     });
 
     it('has hour numbers given renderNumbers flag', () => {
-      const component = shallow(<Clock renderNumbers />);
+      const { container } = render(<Clock renderNumbers />);
 
-      const hourMarks = component.find('HourMark');
+      const hourMarks = container.querySelectorAll('.react-clock__hour-mark');
 
       hourMarks.forEach((hourMark, index) => {
-        const hourMarkNumber = hourMark.prop('number');
-
-        expect(hourMarkNumber).toBe(index + 1);
+        expect(hourMark).toHaveTextContent(index + 1);
       });
@@ -104,14 +101,14 @@ });
       const formatHour = () => 'H';
-      const component = shallow(<Clock formatHour={formatHour} renderNumbers />);
+      const { container } = render(<Clock formatHour={formatHour} renderNumbers />);
 
-      const hourMarks = component.find('HourMark');
+      const hourMarks = container.querySelectorAll('.react-clock__hour-mark');
 
-      expect(hourMarks.at(0).prop('formatHour')).toBe(formatHour);
+      expect(hourMarks[0]).toHaveTextContent('H');
     });
 
     it('has only minute marks when renderHourMarks is false', () => {
-      const component = shallow(<Clock renderHourMarks={false} />);
+      const { container } = render(<Clock renderHourMarks={false} />);
 
-      const hourMarks = component.find('HourMark');
-      const minuteMarks = component.find('MinuteMark');
+      const hourMarks = container.querySelectorAll('.react-clock__hour-mark');
+      const minuteMarks = container.querySelectorAll('.react-clock__minute-mark');
 
@@ -123,6 +120,6 @@ expect(hourMarks).toHaveLength(0);
     it('has only hour marks when renderMinuteMarks is false', () => {
-      const component = shallow(<Clock renderMinuteMarks={false} />);
+      const { container } = render(<Clock renderMinuteMarks={false} />);
 
-      const hourMarks = component.find('HourMark');
-      const minuteMarks = component.find('MinuteMark');
+      const hourMarks = container.querySelectorAll('.react-clock__hour-mark');
+      const minuteMarks = container.querySelectorAll('.react-clock__minute-mark');
 
@@ -134,6 +131,6 @@ expect(hourMarks).toHaveLength(12);
     it('has no marks when renderHourMarks and renderMinuteMarks are false', () => {
-      const component = shallow(<Clock renderHourMarks={false} renderMinuteMarks={false} />);
+      const { container } = render(<Clock renderHourMarks={false} renderMinuteMarks={false} />);
 
-      const hourMarks = component.find('HourMark');
-      const minuteMarks = component.find('MinuteMark');
+      const hourMarks = container.querySelectorAll('.react-clock__hour-mark');
+      const minuteMarks = container.querySelectorAll('.react-clock__minute-mark');
 
@@ -153,11 +150,11 @@ expect(hourMarks).toHaveLength(0);
   const getDeg = (transform) => parseFloat(transform.match(/rotate\(([0-9.]*)deg\)/)[1]);
-  const getAngle = (hand) => getDeg(hand.prop('style').transform) % 360;
+  const getAngle = (hand) => getDeg(window.getComputedStyle(hand).transform) % 360;
 
   describe('hour hand', () => {
     it('is rendered properly', () => {
-      const component = mount(<Clock />);
+      const { container } = render(<Clock />);
 
-      const face = component.find('.react-clock__hour-hand');
+      const hand = container.querySelector('.react-clock__hour-hand');
 
-      expect(face).toHaveLength(1);
+      expect(hand).toBeInTheDocument();
     });
@@ -170,5 +167,5 @@
 
-      const component = mount(<Clock value={date} />);
+      const { container } = render(<Clock value={date} />);
 
-      const hand = component.find('.react-clock__hour-hand');
+      const hand = container.querySelector('.react-clock__hour-hand');
 
@@ -181,15 +178,15 @@ expect(getAngle(hand)).toBeCloseTo(hour * hourAngle + minute * hourMinuteAngle);
     it('is rendered properly', () => {
-      const component = mount(<Clock />);
+      const { container } = render(<Clock />);
 
-      const face = component.find('.react-clock__minute-hand');
+      const hand = container.querySelector('.react-clock__minute-hand');
 
-      expect(face).toHaveLength(1);
+      expect(hand).toBeInTheDocument();
     });
 
     it('is not rendered when renderMinuteHand is false', () => {
-      const component = mount(<Clock renderMinuteHand={false} />);
+      const { container } = render(<Clock renderMinuteHand={false} />);
 
-      const face = component.find('.react-clock__minute-hand');
+      const hand = container.querySelector('.react-clock__minute-hand');
 
-      expect(face).toHaveLength(0);
+      expect(hand).not.toBeInTheDocument();
     });
@@ -203,5 +200,5 @@
 
-      const component = mount(<Clock value={date} />);
+      const { container } = render(<Clock value={date} />);
 
-      const hand = component.find('.react-clock__minute-hand');
+      const hand = container.querySelector('.react-clock__minute-hand');
 
@@ -214,15 +211,15 @@ expect(getAngle(hand)).toBeCloseTo(minute * minuteAngle + second * minuteSecondAngle);
     it('is rendered properly', () => {
-      const component = mount(<Clock />);
+      const { container } = render(<Clock />);
 
-      const face = component.find('.react-clock__second-hand');
+      const hand = container.querySelector('.react-clock__second-hand');
 
-      expect(face).toHaveLength(1);
+      expect(hand).toBeInTheDocument();
     });
 
     it('is not rendered when renderSecondHand is false', () => {
-      const component = mount(<Clock renderSecondHand={false} />);
+      const { container } = render(<Clock renderSecondHand={false} />);
 
-      const face = component.find('.react-clock__second-hand');
+      const hand = container.querySelector('.react-clock__second-hand');
 
-      expect(face).toHaveLength(0);
+      expect(hand).not.toBeInTheDocument();
     });
@@ -236,5 +233,5 @@
 
-      const component = mount(<Clock value={date} />);
+      const { container } = render(<Clock value={date} />);
 
-      const hand = component.find('.react-clock__second-hand');
+      const hand = container.querySelector('.react-clock__second-hand');
 
@@ -241,0 +238,0 @@ expect(getAngle(hand)).toBeCloseTo(second * secondAngle);

src/Hand.spec.jsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -8,74 +8,74 @@ import Hand from './Hand';
   it('renders a hand with given name', () => {
-    const component = shallow(<Hand name="minute" />);
+    const { container } = render(<Hand name="minute" />);
 
-    const hand = component.find('.react-clock__hand');
-    const handBody = component.find('.react-clock__hand__body');
+    const hand = container.querySelector('.react-clock__hand');
+    const handBody = container.querySelector('.react-clock__hand__body');
 
-    expect(hand.hasClass('react-clock__minute-hand')).toBe(true);
-    expect(handBody.hasClass('react-clock__minute-hand__body')).toBe(true);
+    expect(hand).toHaveClass('react-clock__minute-hand');
+    expect(handBody).toHaveClass('react-clock__minute-hand__body');
   });
 
   it('renders hand angled at 0° by default', () => {
-    const component = shallow(<Hand name="minute" />);
+    const { container } = render(<Hand name="minute" />);
 
-    const hand = component.find('.react-clock__hand');
+    const hand = container.querySelector('.react-clock__hand');
 
-    expect(hand.prop('style').transform).toBe('rotate(0deg)');
+    expect(hand).toHaveStyle('transform: rotate(0deg)');
   });
 
   it('renders properly angled hand given angle prop', () => {
-    const component = shallow(<Hand angle={15} name="minute" />);
+    const { container } = render(<Hand angle={15} name="minute" />);
 
-    const hand = component.find('.react-clock__hand');
+    const hand = container.querySelector('.react-clock__hand');
 
-    expect(hand.prop('style').transform).toBe('rotate(15deg)');
+    expect(hand).toHaveStyle('transform: rotate(15deg)');
   });
 
   it('renders hand with 100% length by default', () => {
-    const component = shallow(<Hand name="minute" />);
+    const { container } = render(<Hand name="minute" />);
 
-    const handBody = component.find('.react-clock__hand__body');
+    const handBody = container.querySelector('.react-clock__hand__body');
 
-    expect(handBody.prop('style').top).toBe('0%');
+    expect(handBody).toHaveStyle('top: 0%');
   });
 
   it('renders hand with proper length given length prop', () => {
-    const component = shallow(<Hand length={50} name="minute" />);
+    const { container } = render(<Hand length={50} name="minute" />);
 
-    const handBody = component.find('.react-clock__hand__body');
+    const handBody = container.querySelector('.react-clock__hand__body');
 
-    expect(handBody.prop('style').top).toBe('25%');
+    expect(handBody).toHaveStyle('top: 25%');
   });
 
   it('renders hand with 10% oppositeLength by default', () => {
-    const component = shallow(<Hand name="minute" />);
+    const { container } = render(<Hand name="minute" />);
 
-    const handBody = component.find('.react-clock__hand__body');
+    const handBody = container.querySelector('.react-clock__hand__body');
 
-    expect(handBody.prop('style').bottom).toBe('45%');
+    expect(handBody).toHaveStyle('bottom: 45%');
   });
 
   it('renders hand with proper oppositeLength given oppositeLength prop', () => {
-    const component = shallow(<Hand name="minute" oppositeLength={50} />);
+    const { container } = render(<Hand name="minute" oppositeLength={50} />);
 
-    const handBody = component.find('.react-clock__hand__body');
+    const handBody = container.querySelector('.react-clock__hand__body');
 
-    expect(handBody.prop('style').bottom).toBe('25%');
+    expect(handBody).toHaveStyle('bottom: 25%');
   });
 
   it('renders hand with 1px width by default', () => {
-    const component = shallow(<Hand name="minute" />);
+    const { container } = render(<Hand name="minute" />);
 
-    const handBody = component.find('.react-clock__hand__body');
+    const handBody = container.querySelector('.react-clock__hand__body');
 
-    expect(handBody.prop('style').width).toBe('1px');
+    expect(handBody).toHaveStyle('width: 1px');
   });
 
   it('renders hand with proper width given length prop', () => {
-    const component = shallow(<Hand name="minute" width={5} />);
+    const { container } = render(<Hand name="minute" width={5} />);
 
-    const handBody = component.find('.react-clock__hand__body');
+    const handBody = container.querySelector('.react-clock__hand__body');
 
-    expect(handBody.prop('style').width).toBe('5px');
+    expect(handBody).toHaveStyle('width: 5px');
   });
 });

src/HourMark.spec.jsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -8,5 +8,7 @@ import HourMark from './HourMark';
   it('renders Mark', () => {
-    const component = shallow(<HourMark name="hour" />);
+    const { container } = render(<HourMark name="hour" />);
 
-    expect(component.find('Mark')).toHaveLength(1);
+    const mark = container.querySelector('.react-clock__hour-mark');
+
+    expect(mark).toBeInTheDocument();
   });
@@ -20,12 +22,12 @@
 
-    const component = shallow(
+    const { container } = render(
       <HourMark name="hour" formatHour={formatHour} locale={locale} number={number} />,
     );
 
-    const mark = component.find('Mark');
+    const mark = container.querySelector('.react-clock__hour-mark');
 
     expect(formatHour).toHaveBeenCalled();
     expect(formatHour).toHaveBeenCalledWith(locale, number);
-    expect(mark.prop('number')).toBe('H');
+    expect(mark).toHaveTextContent('H');
   });
 });

src/Mark.spec.jsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -8,82 +8,82 @@ import Mark from './Mark';
   it('renders a hand with given name', () => {
-    const component = shallow(<Mark name="minute" />);
+    const { container } = render(<Mark name="minute" />);
 
-    const mark = component.find('.react-clock__mark');
-    const markBody = component.find('.react-clock__mark__body');
+    const mark = container.querySelector('.react-clock__mark');
+    const markBody = container.querySelector('.react-clock__mark__body');
 
-    expect(mark.hasClass('react-clock__minute-mark')).toBe(true);
-    expect(markBody.hasClass('react-clock__minute-mark__body')).toBe(true);
+    expect(mark).toHaveClass('react-clock__minute-mark');
+    expect(markBody).toHaveClass('react-clock__minute-mark__body');
   });
 
   it('renders mark angled at 0° by default', () => {
-    const component = shallow(<Mark name="minute" />);
+    const { container } = render(<Mark name="minute" />);
 
-    const mark = component.find('.react-clock__mark');
+    const mark = container.querySelector('.react-clock__mark');
 
-    expect(mark.prop('style').transform).toBe('rotate(0deg)');
+    expect(mark).toHaveStyle('transform: rotate(0deg)');
   });
 
   it('renders properly angled mark given angle prop', () => {
-    const component = shallow(<Mark angle={15} name="minute" />);
+    const { container } = render(<Mark angle={15} name="minute" />);
 
-    const mark = component.find('.react-clock__mark');
+    const mark = container.querySelector('.react-clock__mark');
 
-    expect(mark.prop('style').transform).toBe('rotate(15deg)');
+    expect(mark).toHaveStyle('transform: rotate(15deg)');
   });
 
   it('renders mark with 10% length by default', () => {
-    const component = shallow(<Mark name="minute" />);
+    const { container } = render(<Mark name="minute" />);
 
-    const markBody = component.find('.react-clock__mark__body');
+    const markBody = container.querySelector('.react-clock__mark__body');
 
-    expect(markBody.prop('style').bottom).toBe('95%');
+    expect(markBody).toHaveStyle('bottom: 95%');
   });
 
   it('renders mark with proper length given length prop', () => {
-    const component = shallow(<Mark length={50} name="minute" />);
+    const { container } = render(<Mark length={50} name="minute" />);
 
-    const markBody = component.find('.react-clock__mark__body');
+    const markBody = container.querySelector('.react-clock__mark__body');
 
-    expect(markBody.prop('style').bottom).toBe('75%');
+    expect(markBody).toHaveStyle('bottom: 75%');
   });
 
   it('renders mark with 1px width by default', () => {
-    const component = shallow(<Mark name="minute" />);
+    const { container } = render(<Mark name="minute" />);
 
-    const markBody = component.find('.react-clock__mark__body');
+    const markBody = container.querySelector('.react-clock__mark__body');
 
-    expect(markBody.prop('style').width).toBe('1px');
+    expect(markBody).toHaveStyle('width: 1px');
   });
 
   it('renders mark with proper length given length prop', () => {
-    const component = shallow(<Mark name="minute" width={5} />);
+    const { container } = render(<Mark name="minute" width={5} />);
 
-    const markBody = component.find('.react-clock__mark__body');
+    const markBody = container.querySelector('.react-clock__mark__body');
 
-    expect(markBody.prop('style').width).toBe('5px');
+    expect(markBody).toHaveStyle('width: 5px');
   });
 
   it('renders number given number prop', () => {
-    const component = shallow(<Mark name="minute" number={1} />);
+    const { container } = render(<Mark name="minute" number={1} />);
 
-    const markNumber = component.find('.react-clock__mark__number');
+    const markNumber = container.querySelector('.react-clock__mark__number');
 
-    expect(markNumber).toHaveLength(1);
+    expect(markNumber).toBeInTheDocument();
   });
 
   it('renders number angled at 0° by default', () => {
-    const component = shallow(<Mark name="minute" number={1} />);
+    const { container } = render(<Mark name="minute" number={1} />);
 
-    const markNumber = component.find('.react-clock__mark__number');
+    const markNumber = container.querySelector('.react-clock__mark__number');
 
-    expect(markNumber.prop('style').transform).toBe('rotate(-0deg)');
+    expect(markNumber).toHaveStyle('transform: rotate(-0deg)');
   });
 
   it('renders properly angled mark given angle prop', () => {
-    const component = shallow(<Mark angle={15} name="minute" number={1} />);
+    const { container } = render(<Mark angle={15} name="minute" number={1} />);
 
-    const markNumber = component.find('.react-clock__mark__number');
+    const markNumber = container.querySelector('.react-clock__mark__number');
 
-    expect(markNumber.prop('style').transform).toBe('rotate(-15deg)');
+    expect(markNumber).toHaveStyle('transform: rotate(-15deg)');
   });
 });

src/MinuteMark.spec.jsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
@@ -8,6 +8,8 @@ import MinuteMark from './MinuteMark';
   it('renders Mark', () => {
-    const component = shallow(<MinuteMark name="minute" />);
+    const { container } = render(<MinuteMark name="minute" />);
 
-    expect(component.find('Mark')).toHaveLength(1);
+    const mark = container.querySelector('.react-clock__minute-mark');
+
+    expect(mark).toBeInTheDocument();
   });
 });

No alert changes

Improved metrics

Total package byte prevSize

67472

increased by0.71%

Lines of code

1335

increased by0.3%

Worsened metrics

Dev dependency count

17

increased by6.25%

Dependency changes

• + Addedclsx@^1.2.1

• + Addedclsx@1.2.1(transitive)

• - Removedmerge-class-names@^1.1.1

• - Removedmerge-class-names@1.4.2(transitive)