React Router: Add React Router Testing section

[goran1010]

Because

Since a question on how to test components using React Router is a fairly common one, this PR addressees the need to have a short explanation on it.

Testing apps using React client side routing, and how it needs to be done, is not mentioned anywhere in the curriculum, yet the Shopping Cart project and other projects where front-end would be built using React will most likely be using React Router for client side routing and really needs (at least) a mention on how to test it - since it requires some modification and is not as straightforward as non React Router apps.

This PR

• Adds a section titled React Router Testing
• Adds knowledge check question pointing to that section

Issue

Closes #30084

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

[goran1010]

Hi @mao-sz
I've incorporated your suggestions, so I hope it's better now.

Would like bit of feedback on something:
I've added this sentence to the end of the 2nd paragraph.

createMemoryRouter also lets you reuse the same route configuration from routes.jsx, just like you did with createBrowserRouter in your app.

The reason for adding it, is that I'm not sure how obvious it is you can just import your actual route config and use it in your tests.
Most of online examples (including the docs) actually show you basically re-creating the route config and then using that in your app.
So I decided to add this, and am wondering, is it needed in your opinion.
Like I said - I think it is, but I can be convinced otherwise.

[goran1010]

@mao-sz maybe we could add a sentence introducing it in the Lesson overview or is the section pretty small and undeserving of it ?

[mao-sz]

Good catch, I think that's sensible. Just add a brief lesson overview item.

[mao-sz]

🙏

[mao-sz]

@goran1010 I'm silly and didn't double check the doc links used. Is there a reason you opted for v5 and v6 docs?
The curriculum has now been migrated to RRv7 and their docs have been updated as well, and the latest docs are more appropriate (the old docs include outdated imports in code examples).
Could you open a new PR amending these please?

[goran1010]

@goran1010 I'm silly and didn't double check the doc links used. Is there a reason you opted for v5 and v6 docs? The curriculum has now been migrated to RRv7 and their docs have been updated as well, and the latest docs are more appropriate (the old docs include outdated imports in code examples). Could you open a new PR amending these please?

Yes @mao-sz ,

Here are the two links side by side for createMemoryRouter for example:
https://reactrouter.com/6.30.1/routers/create-memory-router - v6
https://reactrouter.com/api/data-routers/createMemoryRouter - latest v7

Unless I'm missing something obvious about how to navigate through the docs, I much prefer the older version.

[mao-sz]

Thing is, the v6 docs contain outdated imports. People have already gotten confused with the differing imports, and the lessons have been amended to reference v7 docs (which is sensible).
I don't think the v7 docs omit anything vital from the v6 version, only some code examples which learners should definitely be able to explore and figure out themselves.

The same applies for MemoryRouter and v5. It's more confusing for learners to be linked to docs for old versions.

If you personally prefer how v6 docs include a little more context than v7 docs, you can always open an issue/PR in the RR repo suggesting improvements to the current docs. That'd be out of TOP's scope as far as I'm concerned.

[goran1010]

Thing is, the v6 docs contain outdated imports. People have already gotten confused with the differing imports, and the lessons have been amended to reference v7 docs (which is sensible). I don't think the v7 docs omit anything vital from the v6 version, only some code examples which learners should definitely be able to explore and figure out themselves.

The same applies for MemoryRouter and v5. It's more confusing for learners to be linked to docs for old versions.

If you personally prefer how v6 docs include a little more context than v7 docs, you can always open an issue/PR in the RR repo suggesting improvements to the current docs. That'd be out of TOP's scope as far as I'm concerned.

Alright - I'll open a new PR to fix this up ASAP.

[goran1010]

Added the PR fixing the links #30096 - sorry about the oversight on my part BTW.

[mao-sz]

No worries, also an oversight by me not checking the links themselves.