updates from QA

Author: dtauer

lessons/07-testing/A-vitest.md

@@ -46,7 +46,7 @@ Let's go add an npm script. In your package.json.
 
 This command lets you run Jest in an interactive mode where it will re-run tests selectively as you save them. This lets you get instant feedback if your test is working or not. This is probably my favorite feature of Vitest.
 
-Okay, one little configuration to add to your vite.config.js.
+Okay, one little configuration to add to your `vite.config.js`.
 
 ```javascript
 // add this to the config object

lessons/07-testing/D-testing-custom-hooks.md

@@ -12,7 +12,7 @@ keywords:
   - API testing
 ---
 
-Let's say we needs tests for our custom hook, usePizzaOfTheDay. Testing custom hooks is a bit of a trick because they are inherently tied to the internal workings of React: they can't be called outside of a component. So how we do we get around that? We fake a component! Make a file called usePizzaOfTheDay.test.jsx in our `__tests__` directory.
+Let's say we needs tests for our custom hook, usePizzaOfTheDay. Testing custom hooks is a bit of a trick because they are inherently tied to the internal workings of React: they can't be called outside of a component. So how we do we get around that? We fake a component! Make a file called `usePizzaOfTheDay.test.jsx` in our `__tests__` directory.
 
 ```javascript
 import { expect, test, vi } from "vitest";

lessons/07-testing/F-coverage.md

@@ -21,14 +21,15 @@ One last very cool trick that Vitest has built into it: [v8][v8]. v8 uses Chrome
 Run the following
 
 ```bash
-npm i -D @vitest/coverage-v8
+npm i -D @vitest/coverage-v8@2.1.3
 ```
 
 > You can also use [Istanbul][istanbul] if you want to. `npm i -D @vitest/coverage-istanbul` will get you the package. But I'd say v8 is the superior tool.
 
-Now add this to your vite.config.js
+Now add this to your `vite.config.js`
 
 ```javascript
+// inside the test object
 coverage: {
   reporter: ["text", "json", "html"],
 },

lessons/07-testing/H-browser-tests.md

@@ -72,7 +72,7 @@ This is a test-only config for Vite (and therefore Vitest.) Now if a test ends i
 
 Snapshotting works in the browser so that one works okay. Anything using vitest-fetch-mock is Node.js only so for those we need to mark them as node. We're going to make a new Pizza file so let's leave that one. And our custom hook test mocks fetch so that one is Node only.
 
-Okay, now create a Pizza.browser.test.jsx
+Okay, now create a `Pizza.browser.test.jsx`
 
 ```javascript
 import { render } from "vitest-browser-react";
@@ -103,7 +103,7 @@ Looks really similar, right? Alright, let's run it. `npm run test`. You should s
 
 > It will likely prompt you to run a command like `npx playwright install`. You'll install local copies of browsers to able to run them super fast.
 
-Cool, right? And really fast! Let's do one more. Let's make a Header.jsx test. We're going to test that the cart number is correct. Remember when Facebook notification numbers were always wrong? We're going to make sure that doesn't happen with our cart indicator. In your Header.jsx file:
+Cool, right? And really fast! Let's do one more. Let's make a `Header.jsx` test. We're going to test that the cart number is correct. Remember when Facebook notification numbers were always wrong? We're going to make sure that doesn't happen with our cart indicator. In your Header.jsx file:
 
 ```javascript
 data-testid="cart-number" // add to .nav-cart-number
@@ -165,6 +165,45 @@ We do have to bend over a bit backwards to make sure TanStack Router is happy, h
 
 Again, these are early days for browser-based testing with Vite so proceed in your professional settings with caution. However the future is bright with Playwright!
 
+> 🚨 NOTE: If you want to add code coverage back into the project, you'll need to use Istanbul since, at the time of this recording, this wasn't supported in React 19 with V8
+
+First, you'll need to uninstall V8 and install Istanbul:
+
+```bash
+npm uninstall @vitest/[email protected]
+npm install -D @vitest/istanbul
+```
+Then move the coverage configuration to the `vitest.workspace.js` file:
+
+```javascript
+
+export default defineWorkspace([
+  {
+    extends: "./vite.config.js",
+    test: {
+      // ...
+      // add to the end of the happy-dom test object 
+      coverage: {
+        provider: "istanbul"
+        reporter: ["text", "json", "html"],
+      },
+    },
+  },
+  {
+    extends: "./vite.config.js",
+    test: {
+      // ...
+      // add to the end of the browser test object 
+      coverage: {
+        reporter: ["text", "json", "html"],
+      },
+    },
+  },
+]);
+```
+
+
+
 > 🏁 [Click here to see the state of the project up until now: 14-testing][step]
 
 [step]: https://github.com/btholt/citr-v9-project/tree/master/14-testing

lessons/08-whats-next/A-react-19.md

@@ -15,6 +15,8 @@ keywords:
 
 ## React 19
 
+> 🚨 The rest of the course covers experimental features of React 19. If you want to try out these features without affecting your current project, we recommend using the `14-testing` project.
+
 This course has been centered on version 18.3. The nice thing about React is that while they do make breaking changes, they are usually fairly intentional about it and do so sparingly. In other words, what you learned today will still be useful five years from now. You could take the version of the course I taught five years ago and still be pretty up to date on how to write React. In other words, despite the fact that React 19 is imminent (or perhaps even out by the time you read this), there's no need to panic. All the stuff they are adding will just complement what you have learned and not change it.
 
 Do keep an eye out for version 6 of my Intermediate React course. We will cover a lot of the React 19 features in that course.

lessons/08-whats-next/B-form-actions.md

@@ -42,7 +42,7 @@ mutationFn: function (formData) { // change to formData
 
 That's it! It really is just a convenience function to make handling for submits even easier to do. There's nothing wrong with what we had either, and that will continue to work as-is too.
 
-Let's go convert order.lazy.jsx too
+Let's go convert `order.lazy.jsx` too
 
 ```javascript
 // extract submission function from form
@@ -67,9 +67,9 @@ function addToCart(formData) {
 
 Since it's on the server, we can now safely insert into our database, directly from inside our React component. React/Next.js will handle all the details of handling the execution of that on server. Pretty cool, right? We'll talk more about this in Intermediate React v6.
 
-Let's do one more cool trick here. There's a new hook called `useFormData` that lets children components see if they're inside of a form being submitted without having to pass lots of data around.
+Let's do one more cool trick here. There's a new hook called `useFormStatus` that lets children components see if they're inside of a form being submitted without having to pass lots of data around.
 
-In contact.lazy.jsx
+In `contact.lazy.jsx`
 
 ```javascript
 // at top