refactor: migrate to Create React App v5

Author: mrholek

src/App.test.js

@@ -1,14 +1,9 @@
 import React from 'react'
-import { shallow } from 'enzyme/build'
+import { render, screen } from '@testing-library/react'
 import App from './App'
-import Dashboard from './views/dashboard/Dashboard.js'
 
-it('mounts App without crashing', () => {
-  const wrapper = shallow(<App />)
-  wrapper.unmount()
-})
-
-it('mounts Dashboard without crashing', () => {
-  const wrapper = shallow(<Dashboard />)
-  wrapper.unmount()
+test('renders learn react link', () => {
+  render(<App />)
+  const linkElement = screen.getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
 })

src/index.js

@@ -3,7 +3,7 @@ import 'core-js'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
-import * as serviceWorker from './serviceWorker'
+import reportWebVitals from './reportWebVitals'
 import { Provider } from 'react-redux'
 import store from './store'
 
@@ -14,7 +14,7 @@ ReactDOM.render(
   document.getElementById('root'),
 )
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister()
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
+  }
+}
+
+export default reportWebVitals

src/serviceWorker.js

@@ -1,15 +1,5 @@
-import { configure } from 'enzyme'
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
-
-configure({ adapter: new Adapter() })
-
-if (global.document) {
-  document.createRange = () => ({
-    setStart: () => {},
-    setEnd: () => {},
-    commonAncestorContainer: {
-      nodeName: 'BODY',
-      ownerDocument: document,
-    },
-  })
-}
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom'