Corrige os erros causados pelo migração para o vite (#239)

* fix: add augmentation in vite.config.ts * fix: vitest wrong configuration * fix: change process to import.meta * fix: remove unused eslint directive --------- Co-authored-by: Andre Almeida <[email protected]>
devhatt · Dec 5, 2023 · 7389c58 · 7389c58
1 parent 988bc9e
commit 7389c58
Show file tree

Hide file tree

Showing 10 changed files with 4,679 additions and 11,285 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
     "test": "vitest",
+    "test:ui": "vitest --ui --coverage",
+    "test:coverage": "vitest --coverage",
     "test:ct": "yarn test-ct",
     "test:e2e": "playwright test",
     "electron:dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://127.0.0.1:3000 && tsc -p electron -w\" \"wait-on http://127.0.0.1:3000 && tsc -p electron && electron .\"",
@@ -27,22 +29,24 @@
   },
   "dependencies": {
     "@sentry/react": "^7.81.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "classnames": "^2.3.2",
     "electron-devtools-installer": "^3.2.0",
     "electron-reload": "^2.0.0-alpha.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-vitest": "^0.3.10",
-    "jsdom": "^22.1.0",
     "framer-motion": "^10.16.5",
     "i18next": "^23.7.6",
     "i18next-browser-languagedetector": "^7.2.0",
+    "jsdom": "^22.1.0",
     "nanoid": "^5.0.3",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.5.0",
     "react-router-dom": "^6.20.0",
-    "react-scripts": "5.0.1"
+    "vite": "^5.0.4",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -51,14 +55,14 @@
     "@playwright/test": "^1.40.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.1.2",
-    "@vitejs/plugin-react-swc": "^3.5.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/electron-devtools-installer": "^2.2.5",
-    "@types/jest": "^29.5.10",
     "@types/node": "^20.10.0",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@vitest/coverage-istanbul": "^0.34.6",
+    "@vitest/ui": "^0.34.6",
     "commitizen": "^4.3.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
@@ -67,25 +71,21 @@
     "electron-builder": "^24.9.1",
     "electron-is-dev": "^2.0.0",
     "eslint": "^8.54.0",
-    "eslint-define-config": "^2.0.0",
     "eslint-config-next": "^14.0.3",
+    "eslint-define-config": "^2.0.0",
     "eslint-plugin-import-helpers": "^1.3.1",
     "eslint-plugin-prettier": "^5.0.1",
     "husky": "^8.0.3",
-    "jest": "^29.7.0",
     "lint-staged": "^15.1.0",
     "prettier": "^3.1.0",
-    "react-app-rewired": "^2.2.1",
     "sass": "^1.69.5",
     "stylelint": "^15.11.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "stylelint-order": "^6.0.3",
-    "vite": "^5.0.0",
+    "typescript": "^5.3.2",
     "vite-plugin-electron": "^0.15.4",
     "vite-plugin-native": "^0.2.0",
-    "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^0.34.6",
-    "typescript": "^5.3.2",
     "wait-on": "^7.2.0",
     "zustand": "^4.4.6"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -18,7 +18,7 @@ import scss from './App.module.scss';
 import './styles/base.scss';
 
 Sentry.init({
-  dsn: process.env.REACT_APP_SENTRY_KEY,
+  dsn: import.meta.env.REACT_APP_SENTRY_KEY,
   integrations: [
     new Sentry.BrowserTracing({
       routingInstrumentation: Sentry.reactRouterV6Instrumentation(

diff --git a/src/components/Accordion/Accordion.spec.tsx b/src/components/Accordion/Accordion.spec.tsx
@@ -4,12 +4,6 @@ import Accordion from './Accordion';
 
 import type { TAccordionProps } from './Accordion.types';
 
-beforeEach(() => {
-  // https://github.com/vitest-dev/vitest/issues/4223
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  window.scrollTo = vi.fn<any>();
-});
-
 afterEach(() => {
   vi.clearAllMocks();
 });

diff --git a/src/components/ErrorBoundary/ErrorBoundary.spec.tsx b/src/components/ErrorBoundary/ErrorBoundary.spec.tsx
@@ -2,6 +2,20 @@ import { render, screen } from '@testing-library/react';
 
 import ErrorBoundary from './ErrorBoundary';
 
+// this prevents the error from being outputted in console.log when react boundary throws an error;
+// https://github.com/facebook/react/issues/11098#issuecomment-412682721
+function onError(e: Event) {
+  e.preventDefault();
+}
+
+beforeEach(() => {
+  window.addEventListener('error', onError);
+});
+
+afterEach(() => {
+  window.removeEventListener('error', onError);
+});
+
 describe('ErrorBoundary', () => {
   describe('when initializer', () => {
     it('render children', () => {

diff --git a/src/components/FirstComment/FirstComment.spec.tsx b/src/components/FirstComment/FirstComment.spec.tsx
@@ -9,16 +9,6 @@ const makeSut = ({ ...props }: Partial<TFirstCommentProps>) => {
   return render(<FirstComment {...props} />);
 };
 
-beforeEach(() => {
-  // https://github.com/vitest-dev/vitest/issues/4223
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  window.scrollTo = vi.fn<any>();
-});
-
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
 describe('FirstComment', () => {
   describe('when checkbox is marked', () => {
     it('open Accordion', async () => {

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly REACT_APP_SENTRY_KEY: string;
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/src/setupTests.js → src/setupTests.ts b/src/setupTests.js → src/setupTests.ts
@@ -1,12 +1,19 @@
 // add Vitest functions here globally
-import { expect, afterEach } from 'vitest';
-import { cleanup } from '@testing-library/react';
 import matchers from '@testing-library/jest-dom/matchers';
+import { cleanup } from '@testing-library/react';
+import { expect, afterEach } from 'vitest';
 
 // Extend Vitest's expect method with methods from react-testing-library
 expect.extend(matchers);
 
 // Run cleanup after each test case (e.g., clearing jsdom)
 afterEach(() => {
+  vi.clearAllMocks();
   cleanup();
 });
+
+beforeEach(() => {
+  // https://github.com/vitest-dev/vitest/issues/4223
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  window.scrollTo = vi.fn<any>();
+});
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,4 +1,3 @@
-/// <reference types="vitest" />
 import react from '@vitejs/plugin-react-swc';
 import path from 'path';
 import { defineConfig } from 'vite';
@@ -10,28 +9,13 @@ export default defineConfig({
     react(),
     tsconfigPaths(),
     electron({
-      main: {
-        entry: 'electron/main.ts',
-      },
-      preload: {
-        input: 'electron/preload.ts',
-      },
+      main: { entry: 'electron/main.ts' },
+      preload: { input: 'electron/preload.ts' },
     }),
   ],
   resolve: {
     alias: {
       '~styles/global.scss': path.join(__dirname, 'src/styles/global.scss'),
     },
   },
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['src/setupTests.js'],
-    include: ['src/**/*.spec.ts', 'src/**/*.spec.tsx'],
-    css: {
-      modules: {
-        classNameStrategy: 'non-scoped',
-      },
-    },
-  },
 });
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    server: { open: false },
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      coverage: {
+        provider: 'istanbul',
+      },
+      setupFiles: ['src/setupTests.ts'],
+      include: ['src/**/*.spec.ts', 'src/**/*.spec.tsx'],
+      css: {
+        modules: { classNameStrategy: 'non-scoped' },
+      },
+    },
+  })
+);