переезд на Vite

alserz1 · alserz1 · commit a0239f4ff807 · 2024-03-11T12:48:15.000+03:00
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
@@ -6,7 +6,7 @@
 npm install
 ```
 
-В файле `src/App.css` опишите стили для вёрстки из файла `src/index.html`
+В файле `src/App.css` опишите стили для вёрстки из файла `index.html`
 
 1. Файл `src/index.html` редактировать нельзя
 2. Контейнер должен быть шириной `700px` и высотой `300px`
@@ -19,6 +19,6 @@ npm install
 
 Итоговый вариант будет выглядеть вот так: ![](./src/__image_snapshots__/app-test-ts-flexbox-рисуется-нужное-изображение-1-snap.png)
 
-Проверить себя можно запустив команду `npm run test -- --watchAll`.
+Проверить себя можно запустив команду `npm run test`.
 
 После выполнения задания создайте pull request с решением.
diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <title>Flex</title>
-        <link rel="stylesheet" type="text/css" href="App.css" />
+        <link rel="stylesheet" type="text/css" href="./src/App.css" />
     </head>
     <body>
         <section class="flex-container">
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
@@ -6,8 +6,6 @@ const customConfig = { threshold: 0 };
 const toMatchImageSnapshot = configureToMatchImageSnapshot({
     customDiffConfig: customConfig,
     noColors: true,
-    failureThreshold: 0.08,
-    failureThresholdType: 'percent'
 });
 expect.extend({ toMatchImageSnapshot });
 
@@ -27,7 +25,7 @@ describe('Flexbox', () => {
     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[`Flexbox Верстка не тронута 1`] = `
 "
-        <section class=\\"flex-container\\">
+        <section class="flex-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,
+    },
+});

Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
`1`	`1`	`/node_modules`
	`2`	`+/src/__image_snapshots__/__diff_output__`
	`3`	`+.DS_STORE`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	exports[`Flexbox Верстка не тронута 1`] = `
`4`	`4`	`"`
`5`		`- <section class=\\"flex-container\\">`
	`5`	`+ <section class="flex-container">`
`6`	`6`	`<div></div>`
`7`	`7`	`<div></div>`
`8`	`8`	`<div></div>`