Intro to React Testing: Provide background context for UI testing

[mao-sz]

Because

This is the first lesson on UI testing which is a bit different to prior testing content.
People often struggle to grasp the value of UI testing due to narrower experience with simpler projects where they can manually test the UI, and don't always make the connection between the value of this and non-UI testing.

Instead of diving straight into setup and syntax, it would benefit to provide a little background context for UI testing and its value.

While we're at it, a small mention of jsdom will also provide context for how the tests actually work/what they're doing (otherwise it's a bit of a black box when the setup guide tells people to install it but they don't know why). No need to dive deep - any further can be independently explored.

This PR

• Adds LO/KC items and intro section about UI testing in general
• Briefly mentions purpose of jsdom
• Adds comment pointing out case-insensitive text comparison (using i-regex for cleaner syntax)

Issue

Closes #29377

Additional Information

Pull Request Requirements

• I have thoroughly read and understand The Odin Project curriculum contributing guide
• The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• If this PR addresses an open issue, it is linked in the Issue section
• If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
• If any lesson files are included in this PR, they follow the Layout Style Guide

[mao-sz]

@hbar1st would love to hear your thoughts on this if you have the time, since you were the issue author.

[hbar1st]

hi Mao, Thank you for taking the time to improve this topic.

For the paragraph about rendering, I'd like to see a little more background.
For example:
When I google what render does, I get:
The render function simulates rendering a component as it would in a browser.

I think this is important to know.

I also think we should mention what querying is here. Its the same querying we learned about in DOM querying? I think it is worth restating what that is and why we need it.

Maybe something that explains the absolute basic steps of testing a UI which seem to be:

• setup your component in some way
• render your component
• possibly fire an event if needed
• query some element that you need to check after the render is done
• test it against your expectations

Sorry, its rough but I only say this because I feel we almost need to map this out in addition to describing what the words mean.

[mao-sz]

Thanks for your thoughts @hbar1st
One thing we are always wary of is trying to become the documentation for stuff and otherwise discouraging independent research as needed.

Everyone will understand things in different ways and may well need to look stuff up further, and that's okay and very much encouraged. Personally, I believe what's been added, in the context of the entire lesson (main contents, links, and assignments), is sufficient to cover the things you mentioned. If someone feels they need a deeper explanation of what the render method actually does, the lesson already links to docs and they can continue to browse those docs for more info kr research otherwise.

Same with querying (which is a generic term that means the same thing wherever it's used, whether querying the actual DOM, the jsdom in the test, querying a DB etc.). I feel the lesson as a whole is sufficient in that regard, which takes into account the lesson contents and any links/assignments. Again, if people feel they want a deeper dive into querying specifics, they are always encouraged to research independently.