Update guide (#39)

* Add instructions for updating TaskForm test

* Add note about Jest

* Increase upper time estimates

writeup/Introduction.md

@@ -25,7 +25,7 @@ In TSE, your team's product manager and designers will plan out most of the proj
 
 ## Tools and technologies
 
-The engineering manager on each TSE project chooses its tech stack (programming languages and frameworks) before development starts. The **MERN stack** (MongoDB, Express, React, Node) is very popular in the industry, so it's been our most common stack historically and we'll use it for this todo list app too. Beyond that, we'll use **TypeScript** to write our actual code and **Git** to manage version history. Expand the sections below to learn more about each piece of this tech stack.
+The engineering manager on each TSE project chooses its tech stack (programming languages and frameworks) before development starts. The **MERN stack** (MongoDB, Express, React, Node) is very popular in the industry, so it's been our most common stack historically and we'll use it for this todo list app too. Beyond that, we'll use **TypeScript** to write our actual code, **Jest** to test it, and **Git** to manage version history. Expand the sections below to learn more about each piece of this tech stack.
 
 <details>
 <summary><strong>ℹ️ Definition: Frontend vs. backend</strong></summary>
@@ -130,6 +130,12 @@ _…we recommend checking out the official [React quick start guide](https://rea
 
 </details>
 
+### Jest
+
+[Jest](https://jestjs.io) is an **automated testing framework for JavaScript projects** that can work with many other specialized technologies, including React. We won't actually do much regarding testing in this guide because our focus is on core web development skills, but your engineering manager may place more emphasis on testing for your project.
+
+We also use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for extra powerful integration between Jest and React. RTL essentially simulates a browser, including the ability to render React components and trigger user interaction events.
+
 ### Git and GitHub
 
 <details>

writeup/part-0/README.md

@@ -2,7 +2,7 @@
 
 **Project setup and introduction to the code**
 
-Estimated time: 1 to 2 hours
+Estimated time: 1 to 4 hours
 
 ## Table of contents
 

writeup/part-1/README.md

@@ -2,7 +2,7 @@
 
 **Minimum viable product**
 
-Estimated time: 2 to 4 hours
+Estimated time: 2 to 8 hours
 
 In Part 1, we'll implement the MVP of this application with the following features:
 

writeup/part-2/2-3-Task-assignment.md

@@ -61,6 +61,11 @@ Finally, we'll add the ability to assign users to tasks and see who is the assig
 
 1. In the `TaskForm` component, add a `TextField` for the assignee and move the Save button next to it. You'll have to add a new row for these components in the JSX and another state variable like `title` and `description`.
 2. Update the `handleSubmit` function to call `createTask` if `mode` is `"create"` and `updateTask` if `mode` is `"edit"`. For `updateTask`, make sure you include all Task fields, not just those visible in the form. Remember to call `onSubmit` as well if the request succeeds.
+3. Since we're changing the functionality of this component, we should update its tests too. Skim through `TaskForm.test.tsx` if you haven't already to see how we use Jest and React Testing Library to test a frontend component. It's okay if you don't understand everything, because the main focus in software development is getting the actual features done—but it's useful to write tests when you can.
+
+   For this guide, you don't need to add any new tests. However, an existing test will now fail because we added a call to a new function, `updateTask`, without providing a "mock" version of that function to Jest. Write a new mock for `updateTask` at the top of the test file and add it to the `jest.mock()` call (you can basically just copy the code for `mockCreateTask`). Then, update the third test (`"calls submit handler with edited fields"`) to use the correct mock, since we now expect the component to call `updateTask` instead of `createTask` when it's in `"edit"` mode.
+
+   You can run the tests locally with the terminal command `npm run tests` or by using the [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) extension for VS Code. You should also be able to see the test results on GitHub when you commit and push your changes.
 
 ## Update to page: `TaskDetail`
 

writeup/part-2/README.md

@@ -2,15 +2,15 @@
 
 **More features**
 
-Estimated time: 2 to 6 hours
+Estimated time: 2 to 12 hours
 
 Now that we've implemented an MVP, it's time to start thinking about v2. For v2, we'd like to add these additional features:
 
 - Ability to assign a user to a task
 - Task detail page that displays more information about a task
 - Ability to edit a task's title, description, and assignee
 
-You can find the designs for these features on the "Part 2" page in Figma. The walkthrough sections in this part of the guide are less detailed than those in Part 1. We hope you feel confident enough to work mostly on your own by this point, but you can absolutely still reach out to **#onboarding** if you get stuck!
+You can find the designs for these features on the "Part 2" page in Figma. _Note that the walkthrough sections in this part of the guide are intentionally less detailed than those in Part 1._ We hope you feel confident enough to work mostly on your own by this point, but you can absolutely still reach out to **#onboarding** if you get stuck!
 
 ## Table of contents