
To install and config Jest and dependencies,
1- run this command on your terminal
npm install -D jest @testing-library/react ts-jest @types/jest ts-node @testing-library/jest-dom jest-environment-jsdom @testing-library/user-event
2-Create a file named: jest.setup.ts in your project folder with this content:
import "@testing-library/jest-dom";
3-Create a file named: jest.config.js with this content:
export default {
testEnvironment: "jsdom",
transform: {
"^.+\\.tsx?$": "ts-jest",
},
setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
};
4-Open tsconfig.json and add replace everything with:
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"esModuleInterop": true,
}
}
5-Go to package.json and under scripts
Replace the line starting with “dev” with these two lines
"dev": "npm run test && vite",
"test": "jest --passWithNoTests",
Images
The whole images set used for this lesson can be found in the FreePik website. Please visit external link for this video
Highlight the active row and active color by reading current row and current color from app state via app context, applying an active class and css border.
Implement row checking in a mastermind-like game by rendering colored circles, enabling the check button when four colors exist, and computing hints by comparing the guess to the secret.
Handle key strokes in a React word game by reading keyboard events, normalizing to uppercase, enforcing a five-letter limit, and updating the word with backspace and enter to advance rows.
Unlock the full potential of React with this comprehensive, hands-on course where you’ll master modern web development by building seven classic games. This course is perfect for developers with a basic understanding of React, TypeScript, and CSS, looking to elevate their skills through practical, engaging projects.
Throughout the course, you'll create a variety of well-known games including Connect 4, Wordle, Master Mind, Memory Game, Lights Out, Hangman, and the 15 Puzzle. Each project is designed to deepen your understanding of React’s core concepts, such as components, hooks, and state management, while also introducing you to advanced techniques like Context API and Redux for effective state handling.
You’ll also learn how to write unit tests using Jest to ensure your applications function as intended. You will also learn more about code-splitting and separation of concerns in web applications.
Whether you’re an aspiring web developer or a seasoned programmer looking to refine your skills, this course provides detailed explanations and hands-on experience to help you build interactive, high-performance applications. By the end of the course, you'll not only have a portfolio of classic games but also a solid foundation in both React and TypeScript, ready to tackle more complex projects and advance your career in web development.