diff --git a/projects/blog-app/README.md b/projects/blog-app/README.md index 1d3cba21a..9414b4381 100644 --- 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 index a75de8ccd..0541fb38b 100644 --- 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 index 258866287..b85819a6f 100644 --- 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 index 114d6fb34..0e2ef252a 100644 --- 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 index c93f96113..69cc295eb 100644 --- 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 index 17beeda7f..4b091c4f3 100644 --- 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 index 2cce2ae96..2ff8ccdd4 100644 --- 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 index 085c5193e..09f258b50 100644 --- 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 index c3756b8aa..b40ce9d59 100644 --- a/testing-and-tdd/compared-testing-frameworks.md +++ b/testing-and-tdd/compared-testing-frameworks.md @@ -1,6 +1,6 @@ # Comparing Testing Frameworks -**Prerequisites** +### **Prerequisites** Here are topics that should be understood before this topic: @@ -8,7 +8,7 @@ Here are topics that should be understood before this topic: - 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.
Its all-in-one nature makes it perfect for unit, integration, and snapshot testing. | • Built-in test runner, assertion library, and mocking capabilities
• Provides utilities for unit testing, integration testing, and snapshot testing
• 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
• Provides utility functions like getBy, findBy, and queryBy
• 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.
Especially in Node.js applications. | • Designed for testing HTTP APIs by simulating HTTP requests
• Checks response codes, headers, and body content
• 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
• Optimized for speed with minimal configuration
• 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
• Chai offers various assertion styles (expect, should, assert)
• 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
• Provides control over component behavior, lifecycle methods, and state
• Useful for legacy React code +| [Jasmine](https://jasmine.github.io/pages/docs_home.html) | Best for behavior-driven development (BDD).
JavaScript unit testing in a non-React environment. | • Behavior-driven development (BDD) testing framework
• Built-in support for spies, mocks, and stubbing
• 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)