React: Improve introduction to React Testing #29377

hbar1st · 2025-02-04T19:00:26Z

Checks

This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
I have thoroughly read and understand The Odin Project Contributing Guide
Would you like to work on this issue?

Describe your suggestion

The lesson called "Introduction To React Testing" is in dire need of an actual introductory paragraph that explains what is going on in the lesson. We start the lesson with an introduction that misses the main point of the lesson, which is that we're here to learn how to test the UI components that React creates. This is unlike how we used jest for example which we only explored in terms of testing the functions/classes/methods that we wrote that didn't directly deal with DOM manipulation/ui testing. So this is a big jump and requires a real introduction.
Without that introduction, we are thrown into the paragraph called "Our First Query" blind. We don't know what a query is yet, we don't know why we need it, we don't even understand the first 2 sentences of this section which are:

First, we’ll render the component using render. The API will return an object and we’ll use destructuring syntax to obtain a subset of the methods required.

To us, 'render' is what we just learned about in class components (well either that or it is a reference to the life cycle of a component in React which also doesn't fit contextually here). That's the only reference we have to rendering. So is that what we're doing here? And why does the first statement say "render the component" as if it is referring to some specific component that we should have been aware of? Shouldn't it say something more general like "To test a React component, we start by rendering it." Or something like that which is more general?

Then looking at the 2nd sentence we have even more mystery to unravel. It says "The API" as if we should know which API it means? (and no we don't know what it means as we haven't been told to read about an "API" in this lesson yet?) and then it says that "we'll use destructuring syntax" but there is no sign of any such syntax in the example provided immediately following this paragraph? Here's the full example:

// App.jsx

const App = () => <h1>Our First Test</h1>;

export default App;

// App.test.jsx

import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import App from "./App";

describe("App component", () => {
  it("renders correct heading", () => {
    render(<App />);
    expect(screen.getByRole("heading").textContent).toMatch(/our first test/i);
  });
});

So then we're left again wondering what we've missed...

As an introduction to React testing, this section needs a lot of work!
Thanks for your attention.

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-react-new-introduction-to-react-testing

(Optional) Discord Name

No response

(Optional) Additional Comments

Please do not think I opened this so I can personally get clarification on this lesson. I've already done so by asking on discord. I opened the issue because I think the lesson needs to be fixed so others can benefit.

CouchofTomato · 2025-02-06T18:29:15Z

@TheOdinProject/react Can someone take a look please

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React: Improve introduction to React Testing #29377

React: Improve introduction to React Testing #29377