chore: move from CRA to vite

move from cra to vite
Closes #157

cypress.config.js

@@ -1,6 +1,9 @@
 const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
+  env: {
+    baseUrl: "http://localhost:5173",
+  },
   component: {
     devServer(cypressConfig) {
       // component testing dev server setup code

cypress/e2e/sanity.cy.js

@@ -3,7 +3,7 @@
 
 describe('example to-do app', () => {
   beforeEach(() => {
-    cy.visit('http://localhost:3000')
+    cy.visit(Cypress.env('baseUrl'))
   })
 
   it('displays screen with title "Recent Commits"', () => {

public/index.html → index.html

@@ -7,8 +7,8 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <title>React News!</title>
   </head>
 
@@ -18,4 +18,5 @@
     </noscript>
     <div id="root"></div>
   </body>
+  <script type="module" src="/src/index.tsx"></script>
 </html>

package.json

@@ -21,22 +21,31 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.15.0",
-    "react-scripts": "5.0.1",
     "react-test-renderer": "18.2.0"
   },
   "devDependencies": {
     "@babel/runtime": "7.22.10",
+    "@vitejs/plugin-react": "^4.0.4",
     "cypress": "12.17.4",
+    "jest": "^29.6.2",
+    "jsdom": "^22.1.0",
     "typescript": "5.1.6",
+    "vite": "^4.4.9",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.34.2",
     "wait-on": "7.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite ",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "vitest",
     "cy:open": "cypress open",
-    "cy:ci": "yarn start & wait-on http://localhost:3000 & cypress run"
+    "cy:ci": "yarn start & wait-on http://localhost:5173 & cypress run"
+  },
+  "jest": {
+    "verbose": true
   },
   "browserslist": [
     ">0.2%",

src/Accordion/Panel.test.js

@@ -2,13 +2,15 @@ import { render, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { marked } from "marked";
 import Panel from "./Panel";
+
 describe("Panel", () => {
   test("panel should contain title text", () => {
     let title = "hi";
 
     const { debug, getByTestId } = render(<Panel title={title}>vasi</Panel>);
     expect(getByTestId("panel-wrap").textContent).toContain(title);
   });
+
   test("panel should NOT show content text if it closed", () => {
     let title = "hi";
     let child = "vova";
@@ -17,9 +19,10 @@ describe("Panel", () => {
         <Panel title={title}>{child}</Panel>
       </div>
     );
-    expect(getByTestId("panel-main").className).not.toBe('open');
+    expect(getByTestId("panel-main").className).not.toBe("open");
     //debug()
   });
+
   test("panel should show content text if it open", () => {
     let title = "hi";
     let child = "vovachka";
@@ -31,14 +34,14 @@ describe("Panel", () => {
         </Panel>
       </div>
     );
-    expect(getByTestId("panel-main").className).toBe('open');
-   // debug()
+    expect(getByTestId("panel-main").className).toBe("open");
+    // debug()
   });
 
   test("panel should call setPanelOpen func when header clicked", () => {
     let title = "hi";
     let child = "vovachka";
-    let setOpen = jest.fn();
+    let setOpen = vi.fn();
     const { debug, getByTestId } = render(
       <div className="accordion">
         <Panel title={title} setPanelOpen={setOpen}>
@@ -54,7 +57,7 @@ describe("Panel", () => {
     let title = "hi";
     let child = "vovachka";
     let idx = 2;
-    let setOpen = jest.fn();
+    let setOpen = vi.fn();
     const { debug, getByTestId } = render(
       <div className="accordion">
         <Panel title={title} setPanelOpen={setOpen} panelIdx={idx}>

src/Pages/Commits.test.tsx

@@ -2,20 +2,21 @@ import { render, cleanup, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { Commits } from "./Commits";
 
+
 beforeEach(() => {
-  jest.spyOn(global, "fetch").mockResolvedValue({
-    json: jest.fn().mockResolvedValue([]),
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: vi.fn().mockResolvedValue([]),
   } as any);
 });
 
 afterEach(() => {
-  jest.restoreAllMocks();
+  vi.restoreAllMocks();
   cleanup();
 });
 
 test("when fetched empty array - should render 'no records found' message", async () => {
-  jest.spyOn(global, "fetch").mockResolvedValue({
-    json: jest.fn().mockResolvedValue([]),
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: vi.fn().mockResolvedValue([]),
   } as any);
   const { debug, queryByTestId } = render(<Commits />);
   await waitFor(() => {
@@ -24,14 +25,15 @@ test("when fetched empty array - should render 'no records found' message", asyn
     );
   });
 });
+
 test("should render some records", async () => {
   const record = {
     html_url: "hh",
     author: { avatar_url: "uuu", login: "jjj" },
     commit: { committer: { date: "2022-04-03T01:41:49Z" }, message: "jo" },
   };
-  jest.spyOn(global, "fetch").mockResolvedValue({
-    json: jest.fn().mockResolvedValue([record]),
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: vi.fn().mockResolvedValue([record]),
   } as any);
 
   const { debug, getByTestId } = render(<Commits />);
@@ -41,8 +43,8 @@ test("should render some records", async () => {
 });
 
 test("should show loader when loading and hide it after request ended", async () => {
-  jest.spyOn(global, "fetch").mockResolvedValue({
-    json: jest.fn().mockResolvedValue([]),
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: vi.fn().mockResolvedValue([]),
   } as any);
   const { debug, container } = render(<Commits />);
   expect(container.querySelector("svg")).toBeInTheDocument();

src/useFetchData.test.js

@@ -1,28 +1,29 @@
 import { renderHook } from "@testing-library/react-hooks";
-import useFetchData from "./useFetchData"
+import useFetchData from "./useFetchData";
+
 beforeEach(() => {
-  jest.spyOn(global, 'fetch').mockResolvedValue({
-    json: jest.fn().mockResolvedValue([{nm: 'vova'}])
-  })
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: vi.fn().mockResolvedValue([{ nm: "vova" }]),
+  });
 });
 
 afterEach(() => {
-  jest.restoreAllMocks();
+  vi.restoreAllMocks();
 });
 //import { rest } from "msw";
 test("should return error if 'url' params not passed", () => {
-  const {result} = renderHook(() => useFetchData())
-  expect(result.current.error).toBe('must pass url param!');
+  const { result } = renderHook(() => useFetchData());
+  expect(result.current.error).toBe("must pass url param!");
 });
 test("should return loading set to 'true' if 'url' params passed", async () => {
-  const {result, waitForNextUpdate} = renderHook(() => useFetchData('zzz'))
+  const { result, waitForNextUpdate } = renderHook(() => useFetchData("zzz"));
   expect(result.current.loading).toBeTruthy();
-  expect(result.current.error).toBeNull()
-  expect(result.current.data).toEqual([])
-  await waitForNextUpdate()
+  expect(result.current.error).toBeNull();
+  expect(result.current.data).toEqual([]);
+  await waitForNextUpdate();
 });
 test("should return data", async () => {
-  const {result, waitForNextUpdate} = renderHook(() =>  useFetchData('zzz'))
-  await waitForNextUpdate()
-  expect(result.current.data).toEqual([{nm: 'vova'}])
-});
+  const { result, waitForNextUpdate } = renderHook(() => useFetchData("zzz"));
+  await waitForNextUpdate();
+  expect(result.current.data).toEqual([{ nm: "vova" }]);
+});

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tests/setup.js

@@ -0,0 +1,11 @@
+import { expect, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import matchers from '@testing-library/jest-dom/matchers';
+
+// extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers);
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup();
+});

tsconfig.json

@@ -6,6 +6,7 @@
         "dom.iterable",
         "esnext"
       ],
+      "types": ["vitest/globals"],
       "allowJs": true,
       "skipLibCheck": true,
       "esModuleInterop": true,
@@ -22,6 +23,6 @@
     },
     "include": [
       "src"
-    ]
+    ],
   }
 

vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig, transformWithEsbuild } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    {
+      name: "load+transform-js-files-as-jsx",
+      async transform(code, id) {
+        if (!id.match(/src\/.*\.js$/)) {
+          return null;
+        }
+
+        // Use the exposed transform from vite, instead of directly
+        // transforming with esbuild
+        return transformWithEsbuild(code, id, {
+          loader: "jsx",
+          jsx: "automatic", // 👈 this is important
+        });
+      },
+    },
+    // End workaround
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './tests/setup.js',
+  },
+  // Workaround before renaming .js to .jsx
+  optimizeDeps: {
+    esbuildOptions: {
+      loader: {
+        ".js": "jsx",
+      },
+    },
+  },
+  // End workaround
+});