Upgrade to env instead of import.env

fadihanna123 · Aug 8, 2024 · 40423a8 · 40423a8
1 parent 2b612cf
commit 40423a8
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 29 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -23,7 +23,6 @@ Dockerfile
 .vscode
 
 # Tests
-src/tests
 src/setupTests.ts
 
 # Enviroment

diff --git a/.env.example b/.env.example
@@ -2,7 +2,7 @@
 NODE_ENV =
 
 # Urls
-REACT_APP_PUBLIC_PIXABAY_BASE_URL =
+VITE_APP_PUBLIC_PIXABAY_BASE_URL =
 
 # Keys
-REACT_APP_PUBLIC_PIXABAY_KEY =
+VITE_APP_PUBLIC_PIXABAY_KEY =
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "dev": "vite",
     "prebuild": "rm -rf dist",
     "preview": "vite preview",
-    "test": "jest",
+    "test": "jest --watchAll",
     "lint": "eslint .",
     "format": "prettier -w .",
     "eject": "vite eject",
@@ -93,8 +93,11 @@
   "devDependencies": {
     "@eslint/compat": "^1.1.1",
     "@eslint/js": "^9.8.0",
+    "@testing-library/react": "^16.0.0",
     "@types/node": "^22.1.0",
     "eslint-plugin-react": "^7.35.0",
-    "typescript-eslint": "^8.0.1"
+    "react-test-renderer": "^18.3.1",
+    "typescript-eslint": "^8.0.1",
+    "vite-plugin-environment": "^1.1.3"
   }
 }
diff --git a/src/api/request.ts b/src/api/request.ts
@@ -15,7 +15,7 @@ export const request = {
     url: string,
     headers?: Record<string, never>
   ): Promise<T | void> => {
-    const { data } = await axios.get<T>(`${url}`, headers);
+    const { data } = await axios.get<T>(url, headers);
     return data;
   },
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -9,7 +9,7 @@ import ReduxStore from './redux/ReduxStore';
 import { App } from './containers';
 import { log } from './functions';
 
-const { NODE_ENV } = import.meta.env;
+const { NODE_ENV } = process.env;
 
 if (NODE_ENV === 'development') {
   // eslint-disable-next-line quotes

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+
 declare global {
   /**
    * IList
@@ -89,22 +90,6 @@ declare global {
     type: string;
   }
 
-  namespace NodeJS {
-    /**
-     * ImportMetaEnv
-     * @param { string } VITE_APP_PUBLIC_PIXABAY_BASE_URL
-     * @param { string } VITE_APP_PUBLIC_PIXABAY_KEY
-     * @param { string } NODE_VERSION
-     * @param { 'development' | 'production' } NODE_ENV
-     */
-    interface ImportMetaEnv {
-      VITE_APP_PUBLIC_PIXABAY_BASE_URL: string;
-      VITE_APP_PUBLIC_PIXABAY_KEY: string;
-      NODE_VERSION: string;
-      NODE_ENV: 'development' | 'production';
-    }
-  }
-
   type logType = 'warn' | 'error' | 'log';
 
   type searchFormType = 'Images' | 'Videos';

diff --git a/src/types/vite-env.d.ts b/src/types/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  VITE_APP_PUBLIC_PIXABAY_BASE_URL: string;
+  VITE_APP_PUBLIC_PIXABAY_KEY: string;
+  NODE_VERSION: string;
+  NODE_ENV: 'development' | 'production' | 'test';
+  // more env variables...
+}
diff --git a/src/utils/envsVariables.ts b/src/utils/envsVariables.ts
@@ -1,13 +1,11 @@
 /**
  * @type { string | undefined }
  */
-export const PixabayBaseURL: string | undefined = import.meta.env[
-  'VITE_APP_PUBLIC_PIXABAY_BASE_URL'
-];
+export const PixabayBaseURL: string | undefined =
+  process.env['VITE_APP_PUBLIC_PIXABAY_BASE_URL'];
 
 /**
  * @type { string | undefined }
  */
-export const PixabayKey: string | undefined = import.meta.env[
-  'VITE_APP_PUBLIC_PIXABAY_KEY'
-];
+export const PixabayKey: string | undefined =
+  process.env['VITE_APP_PUBLIC_PIXABAY_KEY'];
diff --git a/vite.config.mts b/vite.config.mts
@@ -18,4 +18,10 @@ export default defineConfig({
     open: false,
     host: true,
   },
+  define: {
+    'process.env': {
+      VITE_APP_PUBLIC_PIXABAY_BASE_URL: 'https://pixabay.com/api/',
+      VITE_APP_PUBLIC_PIXABAY_KEY: '18269871-9984b5717c4bef14378a76910',
+    },
+  },
 });
diff --git a/yarn.lock b/yarn.lock
@@ -1301,6 +1301,13 @@
     lodash "^4.17.21"
     redent "^3.0.0"
 
+"@testing-library/react@^16.0.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.0.0.tgz#0a1e0c7a3de25841c3591b8cb7fb0cf0c0a27321"
+  integrity sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"
@@ -4610,6 +4617,11 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -4633,11 +4645,28 @@ react-refresh@^0.14.2:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
+react-shallow-renderer@^16.15.0:
+  version "16.15.0"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
+  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
+
 react-spinners@^0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.14.1.tgz#de7d7d6b3e6d4f29d9620c65495b502c7dd90812"
   integrity sha512-2Izq+qgQ08HTofCVEdcAQCXFEYfqTDdfeDQJeo/HHQiQJD4imOicNLhkfN2eh1NYEWVOX4D9ok2lhuDB0z3Aag==
 
+react-test-renderer@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.1.tgz#e693608a1f96283400d4a3afead6893f958b80b4"
+  integrity sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==
+  dependencies:
+    react-is "^18.3.1"
+    react-shallow-renderer "^16.15.0"
+    scheduler "^0.23.2"
+
 react-toastify@^10.0.5:
   version "10.0.5"
   resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.5.tgz#6b8f8386060c5c856239f3036d1e76874ce3bd1e"
@@ -5514,6 +5543,11 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
+vite-plugin-environment@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/vite-plugin-environment/-/vite-plugin-environment-1.1.3.tgz#d01a04abb2f69730a4866c9c9db51d3dab74645b"
+  integrity sha512-9LBhB0lx+2lXVBEWxFZC+WO7PKEyE/ykJ7EPWCq95NEcCpblxamTbs5Dm3DLBGzwODpJMEnzQywJU8fw6XGGGA==
+
 vite@^5.4.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.0.tgz#11dca8a961369ba8b5cae42d068c7ad684d5370f"
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,6 @@ Dockerfile @@
     .vscode
     # Tests
-    src/tests
     src/setupTests.ts
     # Enviroment
@@ Expand Down @@