Merge pull request #270 from alexandr-g/react-18

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

Author: alexandr-g

.github/workflows/e2e-tests.yml

@@ -22,7 +22,7 @@ jobs:
     name: Run E2E tests on deployment success
     if: github.event.deployment_status.state == 'success'
     runs-on: ubuntu-latest
-    container: cypress/included:8.7.0
+    container: cypress/included:9.5.4
     env:
       NPM_RC: ${{ secrets.NPM_TOKEN }}
       TERM: xterm

.github/workflows/main.yml

@@ -3,7 +3,7 @@ name: CI
 on: [push]
 
 env:
-  NODE_VERSION: 14.x
+  NODE_VERSION: 16.x
 
 jobs:
   install:
@@ -13,10 +13,10 @@ jobs:
       - name: CI
         uses: actions/checkout@v3
       - name: Use Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
@@ -32,7 +32,7 @@ jobs:
     steps:
       - name: Running lint
         uses: actions/checkout@v3
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
@@ -48,7 +48,7 @@ jobs:
     steps:
       - name: Running tests
         uses: actions/checkout@v3
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}
@@ -68,7 +68,7 @@ jobs:
     steps:
       - name: Build
         uses: actions/checkout@v3
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/yarn.lock') }}

README.md

@@ -5,7 +5,7 @@
 
 # A quick start Redux + TypeScript Create React App template
 
-An opinionated quick start [Create React App](https://github.com/facebook/create-react-app) (CRA) _template_ with configured **Redux**, **TypeScript**, **React Router**, **Enzyme** and custom **ESlint** configuration.
+An opinionated quick start [Create React App](https://github.com/facebook/create-react-app) (CRA) _template_ with configured **Redux**, **TypeScript**, **React Router**, **React Testing Library** and custom **ESlint** configuration.
 
 Original Create React App README available [here](./README_CRA.md)
 
@@ -53,7 +53,7 @@ The template provides basic Redux configuration with [feature based](https://red
 
 ## Testing
 
-Testing is done with [Enzyme](https://airbnb.io/enzyme/).
+Testing is done with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
 
 ## [Prettier](https://prettier.io/)
 

cypress.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  retries: 1,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents: function (on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:3000',
+  },
+})

cypress.json

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 describe('About page', () => {
   beforeEach(() => {
     cy.visit('/about')
@@ -12,7 +11,7 @@ describe('About page', () => {
 
   it('should navigate to the about page and back via header link', () => {
     cy.get('h1').contains('About')
-    cy.get('[cy-data="home-nav-link"] > .active').click()
+    cy.get('[cy-data="home-nav-link"]').click()
     cy.get('h1').contains('Redux + TypeScript')
   })
 })

cypress/integration/about.spec.js renamed to cypress/e2e/about.cy.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 describe('counter', () => {
   beforeEach(() => {
     cy.visit('/')

cypress/integration/counter.spec.js renamed to cypress/e2e/counter.cy.js

@@ -0,0 +1 @@
+import './commands'

cypress/support/e2e.js

@@ -4,16 +4,16 @@
   "license": "MIT",
   "author": "Alexander Grischuk <[email protected]",
   "engines": {
-    "node": ">=10"
+    "node": ">=16.0.0 <20.0.0"
   },
   "main": "template.json",
-  "description": "A quick start Create React App template with React Router, Redux, TypeScript, Enzyme and custom ESlint configurations",
+  "description": "A quick start Create React App template with React Router, Redux, TypeScript, React Testing Library and custom ESlint configurations",
   "keywords": [
     "react",
     "create-react-app",
     "cra-template",
     "template",
-    "enzyme",
+    "react-testing-library",
     "eslint",
     "redux",
     "react-redux",
@@ -35,18 +35,14 @@
     "url": "https://github.com/alexandr-g/cra-template-typescript-redux/issues"
   },
   "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.5",
-    "@types/react-router-dom": "^5.1.3",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@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",
@@ -56,12 +52,12 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.0.8",
     "prettier": "^2.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^7.1.3",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "5.0.0",
-    "redux": "^4.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.11.1",
+    "react-scripts": "^5.0.1",
+    "redux": "^4.2.1",
     "redux-devtools-extension": "^2.13.8",
     "redux-mock-store": "^1.5.4",
     "typescript": "~4.5.0"
@@ -78,7 +74,7 @@
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
     "fix": "eslint src --ext .js,.jsx,.ts,.tsx  --fix",
     "format": "prettier --write src/**/*.{ts,tsx}",
-    "e2e": "cypress run --spec 'cypress/integration/*'"
+    "e2e": "cypress run --env device=web"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -110,12 +106,14 @@
     ]
   },
   "devDependencies": {
+    "@babel/runtime": "^7.21.5",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/github": "8.0.2",
+    "@testing-library/jest-dom": "^5.16.5",
     "codecov": "3.8.3",
     "commitizen": "4.2.4",
-    "cypress": "9.4.1",
+    "cypress": "^12.12.0",
     "cz-conventional-changelog": "3.3.0",
     "eslint-plugin-cypress": "2.12.1",
     "semantic-release": "18.0.1"

package.json

@@ -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'
@@ -10,10 +10,10 @@ const App: React.FC = () => {
     <BrowserRouter>
       <Navbar />
       <div className="container">
-        <Switch>
-          <Route path="/" component={Home} exact />
-          <Route path="/about" component={About} />
-        </Switch>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+        </Routes>
       </div>
     </BrowserRouter>
   )