переезд на vite

tensor-school · Mar 11, 2024 · 8c51dbc · 8c51dbc
1 parent 63fac9e
commit 8c51dbc
Show file tree

Hide file tree

Showing 12 changed files with 8,570 additions and 14,369 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,6 @@
+{
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  }
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 /node_modules
+/src/__image_snapshots__/__diff_output__
+.DS_STORE
diff --git a/README.md b/README.md
@@ -17,6 +17,6 @@ npm install
 
 Итоговый вариант будет выглядеть вот так: ![](./src/__image_snapshots__/app-test-ts-grid-рисуется-нужное-изображение-1-snap.png)
 
-Проверить себя можно запустив команду `npm run test -- --watchAll`.
+Проверить себя можно запустив команду `npm run test`.
 
 После выполнения задания создайте pull request с решением.
diff --git a/src/index.html → index.html b/src/index.html → index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <title>Grid</title>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,27 +3,35 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@types/jest": "^26.0.15",
-        "@types/node": "^12.0.0",
-        "@types/react": "^17.0.0",
-        "@types/react-dom": "^17.0.0",
-        "jest-image-snapshot": "^4.5.1",
-        "puppeteer": "^10.4.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-scripts": "4.0.3",
-        "typescript": "^4.1.2"
+        "@testing-library/react": "^14.2.1",
+        "@types/jest": "^29.5.12",
+        "@types/jest-image-snapshot": "^6.4.0",
+        "@types/node": "^20.11.25",
+        "@types/puppeteer": "^5.4.7",
+        "@types/react": "^18.2.64",
+        "@types/react-dom": "^18.2.21",
+        "@vitejs/plugin-react": "^4.2.1",
+        "eslint": "^8.57.0",
+        "eslint-config-react-app": "^7.0.1",
+        "husky": "^9.0.11",
+        "jest": "^29.7.0",
+        "jest-image-snapshot": "^6.4.0",
+        "prettier": "^3.2.5",
+        "pretty-quick": "^4.0.0",
+        "puppeteer": "^22.4.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "ts-jest": "^29.1.2",
+        "typescript": "^5.4.2",
+        "vite": "^5.1.5",
+        "vite-plugin-eslint": "^1.8.1",
+        "vite-tsconfig-paths": "^4.3.1"
     },
     "scripts": {
-        "test": "react-scripts test",
-        "lint": "eslint ./src",
-        "prepare": "husky install"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
+        "start": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "test": "jest --watchAll"
     },
     "browserslist": {
         "production": [
@@ -37,11 +45,14 @@
             "last 1 safari version"
         ]
     },
-    "devDependencies": {
-        "@types/jest-image-snapshot": "^4.3.1",
-        "@types/puppeteer": "^5.4.4",
-        "husky": "^7.0.0",
-        "prettier": "^2.4.1",
-        "pretty-quick": "^3.1.1"
+    "jest": {
+        "preset": "ts-jest/presets/js-with-ts",
+        "moduleNameMapper": {
+            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+            "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+        },
+        "modulePaths": [
+            "<rootDir>/src"
+        ]
     }
 }
diff --git a/src/App.test.ts b/src/App.test.ts
@@ -7,7 +7,7 @@ const toMatchImageSnapshot = configureToMatchImageSnapshot({
     customDiffConfig: customConfig,
     noColors: true,
     failureThreshold: 0.08,
-    failureThresholdType: 'percent'
+    failureThresholdType: 'percent',
 });
 
 let browser: Browser;
@@ -26,7 +26,7 @@ describe('Grid', () => {
     let page: Page;
     beforeEach(async () => {
         page = await browser.newPage();
-        await page.goto(`file:${path.join(__dirname, 'index.html')}`);
+        await page.goto(`file:${path.join(__dirname, '/..', 'index.html')}`);
     });
 
     it('Верстка не тронута', async () => {

diff --git a/src/__snapshots__/App.test.ts.snap b/src/__snapshots__/App.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Grid Верстка не тронута 1`] = `
 "
-        <section class=\\"grid-container\\">
+        <section class="grid-container">
             <div></div>
             <div></div>
             <div></div>

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,5 @@
 {
     "compilerOptions": {
-        "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,
@@ -13,8 +12,8 @@
         "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx"
+        "target": "ESNext",
+        "types": ["vite/client"]
     },
     "include": ["src"]
 }
diff --git a/vite.config.mts b/vite.config.mts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+import eslint from 'vite-plugin-eslint';
+
+export default defineConfig({
+    base: '',
+    plugins: [eslint(), react(), viteTsconfigPaths()],
+    server: {
+        // this ensures that the browser opens upon server start
+        open: true,
+        // this sets a default port to 3000
+        port: 3000,
+    },
+});