Merge pull request #61 from flextremedev/update-dependencies

Update react and more

Author: flextremedev

package.json

@@ -4,13 +4,13 @@
   "private": true,
   "homepage": "https://workout-interval-timer.netlify.com",
   "dependencies": {
-    "@testing-library/react": "^9.1.4",
+    "@testing-library/react": "^11.2.5",
     "@xstate/react": "^0.8.1",
     "date-fns": "^2.1.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-scripts": "3.1.1",
+    "react-scripts": "^4.0.3",
     "xstate": "^4.11.0"
   },
   "scripts": {

src/App.test.js

@@ -4,7 +4,6 @@ import { makeAdvanceDateNowBy } from './utils/test-utils/makeAdvanceDateNowBy';
 import { renderApp } from './utils/test-utils/renderApp';
 import { MockWorker } from './__mocks__/Worker';
 
-jest.useFakeTimers();
 const startDate = 1587574443099;
 const play = jest.fn();
 
@@ -21,6 +20,7 @@ describe('App', () => {
   beforeEach(() => {
     HTMLMediaElement.prototype.play = play;
     window.Worker = MockWorker;
+    jest.useFakeTimers('modern');
   });
 
   it('should run intervals correctly', () => {

src/components/DurationInput/DurationInput.js

@@ -15,6 +15,18 @@ export function DurationInput({
   const formattedSeconds = format(value, 'ss');
   const minutesRef = React.useRef(null);
   const secondsRef = React.useRef(null);
+
+  React.useEffect(() => {
+    /* istanbul ignore else */
+    if (secondsRef.current) {
+      secondsRef.current.setSelectionRange(0, 0);
+    }
+    /* istanbul ignore else */
+    if (minutesRef.current) {
+      minutesRef.current.setSelectionRange(0, 0);
+    }
+  }, []);
+
   const handleChange = e => {
     e.stopPropagation();
     const { value: targetValue, name } = e.target;

src/components/DurationInput/DurationInput.test.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, cleanup } from '@testing-library/react';
 import { DurationInput } from './DurationInput';
 describe('DurationInput', () => {
+  afterEach(() => {
+    cleanup();
+  });
   it('should call onChange when minutes changed', () => {
     const handleChange = jest.fn();
     const { getByTestId } = render(