Testing Library Demo

├── .gitignore ├── index.html ├── package.json ├── public └── vite.svg ├── setupTests.js ├── src ├── App.jsx ├── assets │ └── react.svg ├── components │ └── register │ │ ├── Register.jsx │ │ ├── register.css │ │ └── register.test.jsx └── main.jsx ├── vite.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Testing Library Demo 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "testing-library-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "test": "vitest" 11 | }, 12 | "dependencies": { 13 | "bootstrap": "^5.2.3", 14 | "react": "^18.2.0", 15 | "react-bootstrap": "^2.6.0", 16 | "react-dom": "^18.2.0", 17 | "react-select": "^5.6.1" 18 | }, 19 | "devDependencies": { 20 | "@testing-library/jest-dom": "5.16.5", 21 | "@testing-library/react": "13.4.0", 22 | "@testing-library/user-event": "14.4.3", 23 | "@types/react": "^18.0.24", 24 | "@types/react-dom": "^18.0.8", 25 | "@vitejs/plugin-react": "^2.2.0", 26 | "jest": "29.3.1", 27 | "jest-environment-jsdom": "29.3.1", 28 | "vite": "^3.2.3", 29 | "vitest": "^0.25.3" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /setupTests.js: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom"; 2 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import Register from "./components/register/Register"; 2 | 3 | function App() { 4 | return ; 5 | } 6 | 7 | export default App; 8 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/register/Register.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Alert, Button, Form } from "react-bootstrap"; 3 | import Select from "react-select"; 4 | import "./register.css"; 5 | 6 | const skills = [ 7 | { value: "react", label: "React" }, 8 | { value: "vuejs", label: "Vue.js" }, 9 | { value: "svelte", label: "Svelte" }, 10 | { value: "angular", label: "Angular" }, 11 | { value: "javascript", label: "JavaScript" }, 12 | { value: "nodejs", label: "Node.js" } 13 | ]; 14 | 15 | const initialState = { 16 | name: "", 17 | email: "", 18 | password: "" 19 | }; 20 | 21 | const Register = () => { 22 | const [state, setState] = useState(initialState); 23 | const [subscribe, setSubscribe] = useState(false); 24 | const [selectedSkill, setSelectedSkill] = useState(null); 25 | const [successMsg, setSuccessMsg] = useState(""); 26 | const [errorMsg, setErrorMsg] = useState(""); 27 | 28 | const handleInputChange = (event) => { 29 | const { name, value } = event.target; 30 | setState((prevState) => { 31 | return { 32 | ...prevState, 33 | [name]: value 34 | }; 35 | }); 36 | }; 37 | 38 | const handleFormSubmit = (event) => { 39 | event.preventDefault(); 40 | setErrorMsg(""); 41 | setSuccessMsg(""); 42 | const allFieldsEntered = Object.keys(state).every( 43 | (key) => state[key].trim() !== "" && selectedSkill && subscribe 44 | ); 45 | if (allFieldsEntered) { 46 | // code for doing registration 47 | setSuccessMsg("You have successfully registered"); 48 | setTimeout(() => { 49 | setSuccessMsg(""); 50 | setState(initialState); 51 | setSelectedSkill(null); 52 | setSubscribe(false); 53 | }, 2000); 54 | } else { 55 | setErrorMsg("All the fields are required."); 56 | } 57 | }; 58 | 59 | return ( 60 |

61 |

62 |

Register

63 |

64 |

65 | Please enter your details below to register yourself. 66 |

67 | {successMsg && {successMsg}} 68 | {errorMsg && {errorMsg}} 69 | 70 | Name 71 | 78 | 79 | 80 | Email 81 | 88 | 89 | 90 | Password 91 | 98 | 99 | 100 | Select your skills 101 |