setup vite testing and able to run test

package.json

@@ -15,6 +15,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.14",
+    "@testing-library/jest-dom": "^6.4.6",
     "@types/chrome": "^0.0.263",
     "asmcrypto.js": "2.3.2",
     "bcryptjs": "2.4.3",
@@ -27,6 +28,8 @@
     "react-dropzone": "^14.2.3"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.3.0",
+    "@testing-library/react": "^16.0.0",
     "@types/react": "^18.2.64",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.21",
@@ -36,6 +39,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^24.1.0",
     "typescript": "^5.2.2",
     "vite": "^5.1.6",
     "vitest": "^1.6.0"

src/components/PasswordField/PasswordField.spec.tsx

@@ -0,0 +1,15 @@
+import {
+    describe,
+    expect,
+    test
+} from 'vitest';
+import {render, screen} from '@testing-library/react'
+import {
+    PasswordField
+} from './PasswordField'
+describe('PasswordField', () => {
+    test('it renders', () => {
+        render(<PasswordField />)
+        expect('').toBeFalsy()
+    })
+})

src/components/PasswordField/PasswordField.tsx

@@ -2,7 +2,8 @@ import { InputAdornment, TextField, TextFieldProps, styled } from "@mui/material
 import { useState } from 'react'
 
 export const CustomInput = styled(TextField)({
-    width: "183px", // Adjust the width as needed
+    width: "100%", // Adjust the width as needed
+    maxWidth: "183px",
     borderRadius: "5px",
     // backgroundColor: "rgba(30, 30, 32, 1)",
     outline: "none",
@@ -44,12 +45,8 @@ export const CustomInput = styled(TextField)({
 export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...props }) => {
     const [canViewPassword, setCanViewPassword] = useState(false);
     return (
-        <div style={{
-            position: 'relative'
-        }}>
             <CustomInput
                 type={canViewPassword ? 'text' : 'password'}
-                id="standard-adornment-password"
                 InputProps={{
                     endAdornment: (
                         <InputAdornment position="end" style={{
@@ -57,13 +54,11 @@ export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...prop
                         }} onClick={() => {
                             setCanViewPassword((prevState) => !prevState)
                         }}>
-                            {canViewPassword ? '🙀' : '😸'}
+                            {canViewPassword ? <span data-testid="eyes-opened">🙀</span> : <span data-testid="eyes-closed">😸</span>}
                         </InputAdornment>
                     )
                 }}
                 {...props}
             />
-
-        </div>
     )
 }

src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

vite.config.ts

@@ -1,9 +1,15 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 // Import path module for resolving file paths
 import { resolve } from 'path';
 
 export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts']
+  },
   plugins: [react()],
   build: {
     rollupOptions: {