feat: upgrade to react 18, react-router v6, react-redux v8, react-testing-library

BREAKING CHANGE: swap enzyme in favour of react-testing-library (RTL) for unit tests; upgrade to
React v18, react-redux v8, react-router-dom v6

Author: alexandr-g

template.json

@@ -1,18 +1,15 @@
 {
   "package": {
     "dependencies": {
-      "@types/enzyme": "3.10.4",
-      "@types/jest": "27.0.0",
+      "@testing-library/react": "14.0.0",
       "@types/node": "14.0.0",
-      "@types/react": "17.0.0",
-      "@types/react-dom": "17.0.0",
-      "@types/react-redux": "7.1.7",
-      "@types/react-router-dom": "5.1.3",
-      "@types/redux-mock-store": "^1.0.1",
+      "@types/react": "18.2.6",
+      "@types/react-dom": "18.2.4",
+      "@types/react-redux": "8.0.5",
+      "@types/react-router-dom": "5.3.3",
+      "@types/redux-mock-store": "1.0.1",
       "@typescript-eslint/eslint-plugin": "5.59.5",
       "@typescript-eslint/parser": "5.9.1",
-      "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
-      "enzyme": "3.11.0",
       "eslint": "8.6.0",
       "eslint-config-airbnb-typescript": "16.1.0",
       "eslint-config-prettier": "8.0.0",
@@ -22,12 +19,14 @@
       "eslint-plugin-react": "7.21.5",
       "eslint-plugin-react-hooks": "4.0.8",
       "prettier": "2.0.0",
-      "react-redux": "7.1.3",
-      "react-router-dom": "5.1.2",
-      "redux": "4.0.5",
+      "react-redux": "8.0.5",
+      "react-router-dom": "6.11.1",
+      "redux": "4.2.1",
       "redux-devtools-extension": "2.13.8",
       "redux-mock-store": "1.5.4",
-      "typescript": "~4.5.0"
+      "typescript": "~4.5.0",
+      "@testing-library/jest-dom": "5.16.5",
+      "@babel/runtime": "7.21.5"
     },
     "scripts": {
       "lint": "eslint src --ext .js,.jsx,.ts,.tsx",

template/src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter, Switch, Route } from 'react-router-dom'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
 import { Navbar } from './components/Navbar'
 import { About } from './pages/About'
@@ -9,12 +9,12 @@ const App: React.FC = () => {
   return (
     <BrowserRouter>
       <Navbar />
-      <Switch>
-        <div className="container">
-          <Route path="/" component={Home} exact />
-          <Route path="/about" component={About} />
-        </div>
-      </Switch>
+      <div className="container">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+        </Routes>
+      </div>
     </BrowserRouter>
   )
 }

template/src/components/counter/Counter.spec.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import { Provider } from 'react-redux'
-import { mount } from 'enzyme'
 import configureStore from 'redux-mock-store'
 
 import { actionTypes } from '../../features/counter'
@@ -17,52 +16,43 @@ describe('Counter', () => {
   // Add jest mock spy to watch for store.dispatch method. See https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname for more info
   jest.spyOn(store, 'dispatch')
 
-  beforeEach(() => {
-    // Clear any saved mock data from previous tests, because jest saves calls data for spies and mocks, https://jestjs.io/docs/en/mock-function-api#mockfnmockclear
-    store.dispatch.mockClear()
-  })
-
-  it('renders without crashing.', () => {
-    const wrapper = mount(
+  test('renders without crashing.', () => {
+    render(
       <Provider store={store}>
         <Counter />
       </Provider>
     )
 
-    const countValue = wrapper.find('strong').text()
-    expect(countValue).toBe('42')
+    const countValue = screen.getByText('42')
+    expect(countValue).toBeInTheDocument()
   })
 
-  it('should be possible to increment counter.', () => {
-    const wrapper = mount(
+  test('should be possible to increment counter.', () => {
+    render(
       <Provider store={store}>
         <Counter />
       </Provider>
     )
 
-    wrapper
-      .find('button')
-      .filter({ 'data-qa': 'increment-counter' })
-      .simulate('click')
+    const incrementButton = screen.getByRole('button', { name: 'increment' })
+    fireEvent.click(incrementButton)
 
-    expect(store.dispatch).toBeCalledTimes(1)
+    expect(store.dispatch).toHaveBeenCalledTimes(1)
 
-    expect(store.dispatch).toBeCalledWith({
+    expect(store.dispatch).toHaveBeenCalledWith({
       type: actionTypes.INCREMENT_COUNTER,
     })
   })
 
-  it('should be possible to decrement counter.', () => {
-    const wrapper = mount(
+  test('should be possible to decrement counter.', () => {
+    render(
       <Provider store={store}>
         <Counter />
       </Provider>
     )
 
-    wrapper
-      .find('button')
-      .filter({ 'data-qa': 'decrement-counter' })
-      .simulate('click')
+    const decrementButton = screen.getByRole('button', { name: 'decrement' })
+    fireEvent.click(decrementButton)
 
     expect(store.dispatch).toHaveBeenCalledTimes(1)
 

template/src/features/counter/counterReducer.spec.ts

@@ -3,7 +3,7 @@ import counterReducer from './counterReducer'
 import { CounterActionTypes } from './types'
 
 describe('features > counter > counterReducer', () => {
-  it(`increments value, if ${INCREMENT_COUNTER} action is provided`, () => {
+  test(`increments value, if ${INCREMENT_COUNTER} action is provided`, () => {
     const initialState = {
       value: 0,
     }
@@ -19,7 +19,7 @@ describe('features > counter > counterReducer', () => {
     expect(counterReducer(initialState, action)).toEqual(expectedState)
   })
 
-  it(`increments value, if ${DECREMENT_COUNTER} action is provided`, () => {
+  test(`increments value, if ${DECREMENT_COUNTER} action is provided`, () => {
     const initialState = {
       value: 0,
     }

template/src/index.tsx

@@ -1,15 +1,16 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import store from './store'
 
 import './index.css'
 
 import App from './App'
 
-ReactDOM.render(
+const container = document.getElementById('root') as HTMLDivElement
+const root = createRoot(container!)
+
+root.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  document.getElementById('root')
+  </Provider>
 )

template/src/pages/About.tsx

@@ -13,7 +13,12 @@ export const About: React.FC = () => {
         omnis doloremque itaque eius eaque sint facilis unde tenetur reiciendis
         aliquam soluta?
       </p>
-      <button type="button" className="btn" onClick={() => navigate('/')}>
+      <button
+        type="button"
+        className="btn"
+        cy-data="go-back-button"
+        onClick={() => navigate('/')}
+      >
         Go back
       </button>
     </Fragment>

template/src/setupTests.ts

@@ -1,4 +1 @@
-import { configure } from 'enzyme'
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
-
-configure({ adapter: new Adapter() })
+import '@testing-library/jest-dom'