feat(react18): updating to react18 and add test to render

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [["@babel/preset-env", "@babel/preset-react", { targets: { node: "current" } }]],
+};

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  cacheDirectory: ".jest-cache",
+  coverageDirectory: ".jest-coverage",
+  coveragePathIgnorePatterns: ["<rootDir>/packages/(?:.+?)/lib/"],
+  coverageReporters: ["html", "text"],
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100,
+    },
+  },
+  testPathIgnorePatterns: ["<rootDir>/packages/(?:.+?)/lib/"],
+  moduleFileExtensions: ["ts", "js", "tsx", "json"],
+};

package.json

@@ -1,27 +1,26 @@
 {
-  "name": "aluraflix",
+  "name": "nerdflix",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "json-server": "^0.16.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "react-slick": "^0.26.1",
-    "styled-components": "^5.1.1",
-    "json-server": "^0.16.1"
+    "styled-components": "^5.1.1"
   },
   "scripts": {
-    "start": "node ./server.js",
-    "dev": "concurrently \"react-scripts start\" \"node ./server.js\"",
+    "start": "concurrently \"react-scripts start\" \"node ./server.js\"",
+    "server": "node ./server.js",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "server:static": "json-server --watch ./src/data/db.json --port 8080",
-    "server": "node ./server.js"
+    "server:static": "json-server --watch ./src/data/db.json --port 8080"
   },
   "eslintConfig": {
     "extends": "react-app"

src/index.js

@@ -1,14 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import Home from './pages/Home';
 import CadastroVideo from './pages/cadastro/Video';
 import CadastroCategoria from './pages/cadastro/Categoria';
 import PageDefault from './components/PageDefault';
 
-
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
   <BrowserRouter>
     <Switch>
       <Route path="/" component={Home} exact />
@@ -28,6 +29,6 @@ ReactDOM.render(
       )}
       />
     </Switch>
-  </BrowserRouter>,
-  document.getElementById('root')
+  </BrowserRouter>
+  </React.StrictMode>
 );

src/pages/Home/__tests__/index.spec.js

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+
+import Home from "./../index";
+
+it('should render Most Popular', async () => {
+  const { getByText, debug } = render(<Home />)
+
+  //debug()
+
+  expect(getByText('Password changed successfully')).toBeTruthy();
+})

src/pages/Home/index.js

@@ -1,17 +1,15 @@
-/* eslint-disable no-console */
-import React, { useEffect, useState } from 'react';
-// import dadosIniciais from '../../data/dados_iniciais.json';
-import BannerMain from '../../components/BannerMain';
-import Carousel from '../../components/Carousel';
-import PageDefault from '../../components/PageDefault';
-import categoriasRepository from '../../repositories/categorias';
+import React, { useEffect, useState } from "react";
+import BannerMain from "../../components/BannerMain";
+import Carousel from "../../components/Carousel";
+import PageDefault from "../../components/PageDefault";
+import categoriasRepository from "../../repositories/categorias";
 
-function Home() {
+const Home = () => {
   const [dadosIniciais, setDadosIniciais] = useState([]);
 
   useEffect(() => {
-    // http://localhost:8080/categorias?_embed=videos
-    categoriasRepository.getAllWithVideos()
+    categoriasRepository
+      .getAllWithVideos()
       .then((categoriasComVideos) => {
         console.log(categoriasComVideos[0].videos[0]);
         setDadosIniciais(categoriasComVideos);
@@ -23,7 +21,7 @@ function Home() {
 
   return (
     <PageDefault paddingAll={0}>
-      {dadosIniciais.length === 0 && (<div> Loading...</div>)}
+      {dadosIniciais.length === 0 && <div> Loading...</div>}
 
       {dadosIniciais.map((categoria, indice) => {
         if (indice === 0) {
@@ -34,45 +32,15 @@ function Home() {
                 url={dadosIniciais[0].videos[0].url}
                 videoDescription={dadosIniciais[0].videos[0].description}
               />
-              <Carousel
-                ignoreFirstVideo
-                category={dadosIniciais[0]}
-              />
+              <Carousel ignoreFirstVideo category={dadosIniciais[0]} />
             </div>
           );
         }
 
-        return (
-          <Carousel
-            key={categoria.id}
-            category={categoria}
-          />
-        );
+        return <Carousel key={categoria.id} category={categoria} />;
       })}
-
-      {/* <BannerMain
-        videoTitle={dadosIniciais.categorias[0].videos[0].titulo}
-        url={dadosIniciais.categorias[0].videos[0].url}
-        videoDescription="O que"
-      />
-      <Carousel
-        ignoreFirstVideo
-        category={dadosIniciais.categorias[0]}
-      />
-      <Carousel
-        category={dadosIniciais.categorias[1]}
-      />
-      <Carousel
-        category={dadosIniciais.categorias[2]}
-      />
-      <Carousel
-        category={dadosIniciais.categorias[3]}
-      />
-      <Carousel
-        category={dadosIniciais.categorias[4]}
-      /> */}
     </PageDefault>
   );
-}
+};
 
 export default Home;