Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduction To React Testing: Changes to the suggestion of calling render in beforeEach #29381

Open
2 of 3 tasks
gingkapls opened this issue Feb 5, 2025 · 5 comments · May be fixed by #29459
Open
2 of 3 tasks

Introduction To React Testing: Changes to the suggestion of calling render in beforeEach #29381

gingkapls opened this issue Feb 5, 2025 · 5 comments · May be fixed by #29459
Assignees
Labels
Content: React Involves the React course Status: Help Wanted This issue can be assigned to other contributors Type: Good First Issue Good for beginner contributors

Comments

@gingkapls
Copy link
Contributor

gingkapls commented Feb 5, 2025

Checks

Describe your suggestion

In the last paragraph of the section, Simulating user events the lesson implicitly suggests the use of beforeEach when writing multiple tests for a component because each of them require the render method to be called every time.

It’s also important to note that after every test, React Testing Library unmounts the rendered components. That’s why we render for each test. For a lot of tests for a component, the beforeEach Vitest function could prove handy.

The linked docs on introduction to user events on RTL website, and the lesson that follows this one, on the other hand, both discourage the use of invoking render in beforeEach with given explanations, and instead suggest using a setup function if needed.

With that in mind, I think it would be a good idea to replace the following line with one about setup functions.

For a lot of tests for a component, the beforeEach Vitest function could prove handy.

Something like this perhaps.

For a lot of tests for a component, a custom setup function could prove handy.

Or we could remove it altogether.

Path

Node / JS

Lesson Url

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

(Optional) Discord Name

ginned

(Optional) Additional Comments

No response

@CouchofTomato
Copy link
Member

@TheOdinProject/react Can someone take a look please

@01zulfi
Copy link
Member

01zulfi commented Feb 21, 2025

@gingkapls Thanks for opening this issue. I like your suggested change.

This issue is open for contributions, please comment below to be assigned.

Acceptance Criteria

Replace

For a lot of tests for a component, the beforeEach Vitest function could prove handy.

with

For a lot of tests for a component, a custom setup function could prove handy.

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

@01zulfi 01zulfi added Type: Good First Issue Good for beginner contributors Status: Help Wanted This issue can be assigned to other contributors Content: React Involves the React course labels Feb 21, 2025
@Ghoulayush
Copy link

@gingkapls Hi, I'd like to work on this issue kindly assign this to me

@gingkapls
Copy link
Contributor Author

@Ghoulayush Thank you for being willing to contribute.

The maintainers are the ones who assign issues. I'm not one of them so I can't do that. You can start working on the issue once one of them assigns it to you now that you've expressed your interest.

@01zulfi
Copy link
Member

01zulfi commented Feb 26, 2025

@Ghoulayush assigned

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content: React Involves the React course Status: Help Wanted This issue can be assigned to other contributors Type: Good First Issue Good for beginner contributors
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants