Techtonica · daaimah123 · May 20, 2025 · May 20, 2025 · May 20, 2025 · May 20, 2025
diff --git a/projects/blog-app/README.md b/projects/blog-app/README.md
@@ -23,8 +23,7 @@ At the end of this week you should be very comfortable with: props, state, callb
 - ExpressJS
 - SQL
 - PostgreSQL
-- Jest
-- React Testing Library
+- Jest / React Testing Library / Vitest
 
 ### Pull Request
 
@@ -48,6 +47,7 @@ Try to make your components small and as reusable as possible! This makes your c
 - In your form, include at least 2 fields that are required and 2 that aren’t required
 - A click option to see the individual detail page
 - Add at least one test to each of your components
+  - See the [jest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/jest.md), [vitest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/vitest.md), and [RTL](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/react-testing-jest-and-RTL.md) topic outlines for more context.
 
 ### ✨ Incorporating AI ✨
 

diff --git a/projects/eventonica-updated/README.md b/projects/eventonica-updated/README.md
@@ -32,6 +32,7 @@ Postgres
 3. At least 15 commits and 1 PR (every time you make a working change to the code, commit + push at least daily)
 4. Customize the look of your page with CSS techniques - this is not a priority, so being minimal is okay
 5. Implement some basic tests
+   - See the [jest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/jest.md), [vitest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/vitest.md), and [RTL](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/react-testing-jest-and-RTL.md) topic outlines for more context.
 6. Create a README
 7. Implement the [useReducer hook](https://react.dev/reference/react/useReducer) with a clearly defined reducer function with appropiate actions and states; clearly defined dispatch functions to describe any actions taken to create a new state
 8. User can search DB by ONE of the following and return filtered event displayed to page

diff --git a/projects/final-project/README.md b/projects/final-project/README.md
@@ -27,6 +27,7 @@ In order of importance:
 - [ ] Have a database with at least 2 tables.
 - [ ] Connect to at least 1 external API. You must do something with the data recived from this API, such as display it on the screen. APIs such as Auth0 do not fulfill this requirement.
 - [ ] Have at least 1 test per component.
+  - See the [jest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/jest.md), [vitest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/vitest.md), and [RTL](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/react-testing-jest-and-RTL.md) topic outlines for more context.
 - [ ] Have a well-documented and easy-to-read README [like this one](https://github.com/lsanc0043/mangarage) that doesn’t have any template or placeholder text and is complete with a description (your one sentence pitch), a link to the deployed site (once that's live), installation/setup instructions, and a screenshot.
 - [ ] Have at least 50 commits that have been merged from a minimum of 3 branches.
 
@@ -125,7 +126,8 @@ Because final projects are complex and we want you to have time to make a basic-
 
 ### Week 2 Milestones
 
-- [ ] Create your tests (unit and integration, if possible!).
+- [ ] Create your tests (unit and integration).
+  - See the [jest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/jest.md), [vitest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/vitest.md), and [RTL](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/react-testing-jest-and-RTL.md) topic outlines for more context.
 - [ ] Complete MVP functionality.
 - [ ] Re-scope if needed.
 - [ ] Your medium article text will be due this week - make sure your README has been updated and you are ready to talk about your project!

diff --git a/projects/mern-pern-project.md b/projects/mern-pern-project.md
@@ -32,6 +32,7 @@ You've now learned how to create a full-stack app with a React frontend, Node/Ex
 - Testing
   - Write unit tests using Jest for at least one component. For example, how can you test the creation form?
   - API test for your sightings API (GET, POST/PUT, DELETE)
+   - See the [jest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/jest.md), [vitest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/vitest.md), and [RTL](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/react-testing-jest-and-RTL.md) topic outlines for more context.
 
 ### Data
 
@@ -135,7 +136,7 @@ Add a "Healthy" filter checkbox
 - Add a `GET` route for `/sightings` that will respond with all the records in your sightings DB table
   - You will need to talk to the database
   - See the [pg-promise instructions](https://expressjs.com/en/guide/database-integration.html#postgresql) for an idea of how to do that
-- Test this API with Postman
+- Test this API using Postman
 - Once it is working, make the React app
   - Make a simple component that will show all the sightings
   - Use fetch to retrieve data from `/sightings`

diff --git a/projects/pern-contact-list-app.md b/projects/pern-contact-list-app.md
@@ -54,6 +54,7 @@ Please make sure that your components in the React app have the following distri
 - [ ] An “edit” button in front of the contact name; with the functionality to update data
 - [ ] A click option to see the individual contact detail page
 - [ ] A test file to test your form component
+   - See the [jest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/jest.md), [vitest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/vitest.md), and [RTL](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/react-testing-jest-and-RTL.md) topic outlines for more context.
 - [ ] A delete button to delete an specific contact
 - [ ] Error handling
   - [ ] Your form should use HTML input attributes to validate input and make entering data fast and easy

diff --git a/projects/pern-game-app.md b/projects/pern-game-app.md
@@ -41,6 +41,7 @@ Your DB should have a table "players" with at least the following columns:
 - When the user finishes the game, save the score in your DB
 - Have a button to show a list with the top 10 scores (_**ranked by score**_)
 - A test file to test your component(s)
+  - See the [jest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/jest.md), [vitest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/vitest.md), and [RTL](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/react-testing-jest-and-RTL.md) topic outlines for more context.
 
 ### Extra Features - "Nice to Haves":
 

diff --git a/projects/pern-weather-app.md b/projects/pern-weather-app.md
@@ -35,6 +35,7 @@ You need to use PostgreSQL and Express to connect your DB. Your DB should have a
   - Show a user-visible error message to indicate what's wrong and how the user can fix it
   - HTML input attributes to validate input and make entering data fast and easy
 - A test file to test your component(s)
+  - See the [jest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/jest.md), [vitest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/vitest.md), and [RTL](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/react-testing-jest-and-RTL.md) topic outlines for more context.
 
 ### Extra Features - "Nice to Haves":
 

diff --git a/projects/week8GameREADME.md b/projects/week8GameREADME.md
@@ -98,6 +98,7 @@ These settings should be available as form options on the frontend, which will t
 - **Bonus Feature: Testing and Debugging**:
   - Test each feature thoroughly to ensure data is correctly passed between the frontend and backend.
   - Debug any issues with API requests, data handling, or result calculation.
+  - See the [jest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/jest.md), [vitest](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/vitest.md), and [RTL](https://github.com/Techtonica/curriculum/blob/main/testing-and-tdd/react-testing-jest-and-RTL.md) topic outlines for more context.
 
 ## Resources
 

diff --git a/testing-and-tdd/compared-testing-frameworks.md b/testing-and-tdd/compared-testing-frameworks.md
@@ -1,14 +1,14 @@
 # Comparing Testing Frameworks
 
-**Prerequisites**
+### **Prerequisites**
 
 Here are topics that should be understood before this topic:
 
 - HTML/CSS/JavaScript syntax
 - Test Driven Development (TDD)
 - Node.js
 
-**Objectives**
+### **Objectives**
 
 **Participants will be able to:**
 
@@ -100,64 +100,19 @@ Integration Testing:
 - Crucial when ensuring that multiple components, systems, or services interact properly.
 - Important when testing APIs, database connections, or interactions between front-end and back-end systems.
 
-### Testing Frameworks Overview
+### **Testing Frameworks Overview**
 
-**Jest - [Jest Documentation](https://archive.jestjs.io/docs/en/22.x/getting-started.html)**
+| Framework | Best Use Cases | Key Features
+|-----|-----|-----
+| [Jest](https://jestjs.io/docs/getting-started) | Ideal for full-fledged JavaScript testing, especially in React and Node.js projects. <br> Its all-in-one nature makes it perfect for unit, integration, and snapshot testing. | • Built-in test runner, assertion library, and mocking capabilities <br>• Provides utilities for unit testing, integration testing, and snapshot testing <br>• Features watch mode, test coverage, and an easy-to-use API
+| [React Testing Library (RTL)](https://testing-library.com/docs/react-testing-library/intro/) | Best for testing React components in a way that simulates user behavior and interactions. | • Focuses on testing React components by simulating user interactions <br>• Provides utility functions like getBy, findBy, and queryBy <br>• Encourages testing user interactions and behaviors rather than implementation details
+| [Supertest](https://github.com/ladjs/supertest#readme) | Perfect for testing APIs and server-side logic. <br> Especially in Node.js applications. | • Designed for testing HTTP APIs by simulating HTTP requests <br>• Checks response codes, headers, and body content <br>• Ideal for testing RESTful APIs and backend services
+| [Vitest](https://vitest.dev/guide/) | Suited for Vite-based projects where performance and minimal configuration are key priorities. | • A modern, fast testing framework for Vite-based projects <br>• Optimized for speed with minimal configuration <br>• Works natively with ES Modules
+| [Chai](https://www.chaijs.com/guide/) & [Mocha](https://mochajs.org/#getting-started) | Great for unit and integration testing in various JavaScript environments, with flexibility in choosing assertion styles. | • Mocha supports asynchronous code, test structuring, and hooks <br>• Chai offers various assertion styles (expect, should, assert) <br>• Used for general-purpose JavaScript testing
+| [Enzyme](https://enzymejs.github.io/enzyme/) | Useful for legacy React code that requires deep component testing. | • React-specific testing utility with deep, shallow, and static rendering <br>• Provides control over component behavior, lifecycle methods, and state <br>• Useful for legacy React code
+| [Jasmine](https://jasmine.github.io/pages/docs_home.html) | Best for behavior-driven development (BDD). <br> JavaScript unit testing in a non-React environment. | • Behavior-driven development (BDD) testing framework <br>• Built-in support for spies, mocks, and stubbing <br>• Works without reliance on a browser or DOM
 
-- A JavaScript testing framework that is widely used in React and Node.js applications.
-- Built-in test runner, assertion library, and mocking capabilities.
-- Provides utilities for unit testing, integration testing, and even snapshot testing for UI components.
-- Features like watch mode, test coverage, and an easy-to-use API make it one of the most popular choices for developers.
-
-**React Testing Library (RTL) - [RTL Documentation](https://testing-library.com/docs/react-testing-library/intro/)**
-
-- Focuses on testing React components by simulating how users interact with them.
-- Provides utility functions like `getBy`, `findBy`, and `queryBy` to query elements based on their visible attributes (e.g., role, text).
-- Encourages testing user interactions and component behaviors rather than internal implementation details.
-- Works seamlessly with Jest for running tests and assertions.
-
-**Supertest - [Supertest Documentation](https://www.npmjs.com/package/supertest)**
-
-- Designed for testing HTTP APIs by simulating HTTP requests (`GET`, `POST`, `PUT`, `DELETE`) and checking response codes, headers, and body content.
-- Ideal for testing RESTful APIs and backend services, often paired with a test runner like Jest or Mocha.
-- Makes it easy to write integration tests for server-side code.
-
-**Vitest - [Vitest Documentation](https://vitest.dev/guide/)**
-
-- A modern, fast testing framework for Vite-based projects.
-- Optimized for speed with minimal configuration, providing a near-zero-config experience for testing.
-- Works natively with ES Modules and offers integrations for frontend and backend testing.
-- Suitable for developers looking for a more performance-optimized alternative to Jest, especially in Vite-powered environments.
-
-**Chai & Mocha - [Chai](https://www.chaijs.com/) and [Mocha](https://mochajs.org/) Documentation**
-
-- Mocha is a test framework that supports asynchronous code, test structuring with `describe` and `it`, and hooks like `before`, `after`.
-- Chai is an assertion library that can be used with Mocha (or any test runner), supporting various assertion styles (`expect`, `should`, `assert`).
-- Primarily used for general-purpose JavaScript testing across client-side and server-side code.
-
-**Enzyme - [Enzyme Documentation](https://enzymejs.github.io/enzyme/)**
-
-- A React-specific testing utility that offers deep rendering, shallow rendering, and static rendering for testing React components.
-- Provides detailed control over component behavior, lifecycle methods, and state.
-- Useful for legacy React code, although React Testing Library has become the more modern alternative.
-
-**Jasmine - [Jasmine Documentation](https://jasmine.github.io/pages/getting_started.html)**
-
-- A behavior-driven development (BDD) testing framework designed for testing JavaScript code in isolation, without reliance on a browser or DOM.
-- Built-in support for spies, mocks, and stubbing, making it highly flexible for unit testing.
-- Suitable for JavaScript applications outside of React, although it can also be used for React testing.
-
-### Best Use Cases
-
-- Jest: Ideal for full-fledged JavaScript testing, especially in React and Node.js projects. Its all-in-one nature makes it perfect for unit, integration, and snapshot testing.
-- React Testing Library (RTL): Best for testing React components in a way that simulates user behavior and interactions.
-- Supertest: Perfect for testing APIs and server-side logic, especially in Node.js applications.
-- Vitest: Suited for Vite-based projects where performance and minimal configuration are key priorities.
-- Chai & Mocha: Great for unit and integration testing in various JavaScript environments, with flexibility in choosing assertion styles.
-- Enzyme: Useful for legacy React code that requires deep component testing.
-- Jasmine: Best for behavior-driven development (BDD) and JavaScript unit testing in a non-React environment.
-
-**Independent Practice**
+### **Independent Practice**
 
 [Rithm School Tutorial - Writing API tests with Jest](https://www.rithmschool.com/courses/intermediate-node-express/api-tests-with-jest)
 
@@ -167,7 +122,7 @@ Integration Testing:
 2. How does knowing different testing frameworks help you in various projects?
 3. What is the difference between unit testing and integration testing?
 
-**Supplemental Materials**
+### **Supplemental Materials**
 
 - 🎦 [Intro to Jest: Object & API Testing](https://www.dropbox.com/scl/fi/anmkgxuntp8uvlyduzpic/IntroToJestObject-ApiTesting.mp4?rlkey=smzcsizwb1legmhml4xolc72h&dl=0)
 - 🎦 [Jest Super Test Integration API Request Testing](https://www.dropbox.com/scl/fi/94h7u58t27zj55teusajo/JestSupertestIntegrationApiRequestTesting.mp4?rlkey=bap50gvtjsmxjt0gasczg3d7a&dl=0) with volunteer Cristina Rodriguez (she/her)