Introduction to React Testing: Import Vitest functions

[MaoShizhong]

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

Description

A previous open PR for this fell through, so re-opening an issue for someone to be assigned.

In the Introduction to React Testing lesson, our code examples of tests use Vitest's globals, due to the setup guide including globals: true in vite.config.js.

While this allows the tests to work without errors when running Vitest, ESLint (which comes by default) will still complain about undefined variables. The fix for this is iffy, as ESLint doesn't have Vitest globals built in as an environment, meaning you'd have to enable the Jest environment then manually add individual Vitest-specific globals. This is a lot of faff learners face, just to use Vitest globals. A better resolution would be to just import the Vitest functions needed. No ESLint shenanigans, you don't have to mess with globals and you get better intellisense for those functions anyway, as they won't be typed as any.

Please comment below if you'd like to be assigned to work on this issue. Please do not start any work until you have been formally assigned by a maintainer.

Acceptance criteria

• In the Introduction to React Testing lesson, any code blocks including Vitest functions like describe, expect or it will need to have them imported in the code block.
• Add the following note box (provided wording is just a suggestion) immediately after the first test code example (which is the 2nd code block):

  <div class="lesson-note" markdown="1">
  
  #### Vitest globals and ESLint
  
  Even if you set `globals: true` in `vite.config.js` like in the setup tutorial, ESLint will still yell at you, as it will not recognize these globals without some extra stuff in your ESLint configuration file. The most straightforward resolution would be to explicitly import the globals you'd need. You can omit `globals: true` from `vite.config.js` in this case.
  
  </div>

Path

Ruby / Rails, Node / JS

Lesson Url

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

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[mathdebate09]

Coincidentally, this was the exact lesson I was going through today :D
I'd love to work this issue up

[MaoShizhong]

Go for it - assigned