How I like to test my react components

Just talking about RTL react testing library and some ways to test hooks
My VSCode Extensions:
theme: material community high contrast
fonts: Menlo, Monaco, 'Courier New', monospace
errors: Error Lens
extra git help: Git Lens
tailwind css intellisense
indent rainbow
material icon theme
prettier & eslint
ES7+ React Snippets
------------
🤑 Patreon / webdevjunkie
🔔 Newsletter eepurl.com/hnderP
💬 Discord / discord
📁. GitHub github.com/cod...

[@EmreDev7-qk7sf]

we use translation keys for picking an element in test file. generally translation keys wont be changed, but actual words may change. but it wont break tests because t('some.translation.key') will always same in virtual rendering.

[@SumanNath25]

The video sucks? No way bro. One of best I have watched. Very real and clear to learn.

[@bugs389]

Typescript was complaining about the value attribute because the type HTMLElement was not narrowed down to HTMLInputElement.

[@WebDevCody]

Nice thank you, so maybe I just need to cast it then?

[@bugs389]

@@WebDevCody Yup exactly

[@Will4_U]

@@WebDevCody or you can create a function that will assert that the element is HTMLInputElement I do it, so I'm confident that element is a specific type.

[@jlndev1017]

@@Will4_U How would you do that assertion?

[@naterpotatoers]

⁠​⁠@@jlndev1017just throw an “as HtmlInputElement” at the end of the statement

[@devinosborne3396]

Honestly I agree man. I kinda like the approach you have here. The MVC stuff was a little harder to understand, but I feel like this video made more sense!

[@WebDevCody]

I’m still working on this MVC approach, but yeah I’m glad you see kind of where I’m coming from

[@mokoboko2482]

best case scenario i search for a topic and web dev cody alrdy made a vid abt it

[@bugs389]

Great video, I definitely agree with your stance on testing the state logic in isolation. Testing complex components via DOM can get really tedious for little value in my opinion.

[@elProdigio]

Nice! I think that the first aproach (component testing) is nice and you're indrectly testing all the internal logic. It's nice because you can change the implementation and with the second aproach (testing the custom hook) you're testing internal implementation details. But, if this custom hook is reusable, this need to be tested in isolation from whatever the component uses. BTW, Could you upload a TDD real world example? I see a lot of "calculator" example, which is fine, but not a real world (and more complex) example. Thanks!

[@JSBroadcast]

I think, and forgive me if I'm wrong, that you slightly missed the point of integration/unit tests. At one point near the end of the video, you are saying "What if you change an aria label, or something, etc". That is one of the main points of testing. When you change something, your test is supposed to fail, and if it does, it's on you to decide if that was suppose to happen, and you have to update your test, or if it was an accident, and you revert your code. That is the primary purpose of testing. So if at one point in time, you change your tag's attribute, or you change anything in relation to that, you absolutely want your test to fail. If it doesn't, then your test is useless. In simple words, you shouldn't be writing tests as you are writing your code. Tests exist so they can notify you that something in your code has changed, and at that point, you have to decide if that change was intentional, aka, update the test to reflect that, or if its a regression, aka, fix or revert the code. Cheers

[@WebDevCody]

Yeah, but knowing if a labeled changed isn’t a valuable test. We mainly care that a button clicked in the UI properly does the things it should in our system. Having integration tests to verify text or labels in our front end is a waste of time imo

[@jedliczosnek]

@@WebDevCody True but at the same time we should also verify if the correct aria labels and other attributes are set on the rendered elements so I wouldn't disregard the component DOM testing completely.

[@shawn.builds]

you seem to post vids on everything im curiuos about. cheer mate

[@HaibertBuilds]

this was awesome, thanks!

[@igboanugwocollins4452]

Thank you for this

[@dangthien158]

Thank you for your sharing. Could you make a video about setup/config mock data testing with firebase?

[@qualinostJT]

Hi, thanks for your videos, they all are really informative. Do you mind to share this little project to see how you wrote your hook ?

[@WebDevCody]

It’s in a repo called react-testing on my GitHub repo list

[@qualinostJT]

@@WebDevCody Thanks a lot!

[@reinyel1437]

This is exactly my thought on Testing. It doesn't have to be everything, just the most important part. Extracting the logic out of the component is more sensible to me rather than testing the whole component which is tedious, brittle, and hard to read.

[@WoozyDev]

9:50 because its a HTMLElement, u should do "input instanceof HTMLInputElement".

[@WoozyDev]

or "(await renderedApp.getByLabelText("todo-text")) as HTMLInputElement"

[@WebDevCody]

Thank you! I’ll try to remember that

[@rjmunt]

Nice videos. I get the feeling that you're kinda abusing aria labels, just because you like to use them as test selectors ?

[@WebDevCody]

Yes I probably did in this video

[@butwhothehellknows]

Good job babe!

[@nawti2371]

Hey man, I love your react videos they're really helpful ❤. Can you maybe do a video about Vite or Webpack configs that you use? I'm looking for some helpful configs that I can use for production which reduce the bundle size and optimizes performance for my react app. I've used some configs for production before but I wasn't using any frameworks for those projects and they were just native Js applications but somehow I'm having difficulties finding the right configs for my react applications. Thank you

[@xinzhang7278]

can we make a video for Node Express API unit test ?

[@27sosite73]

thank you

[@ajithmoni1712]

Thank you. I know about testing-library now. I'll read it over. I've seen people use mocha and selenium JavaScript. Is this library built only for react and more preferred over selenium?

[@WebDevCody]

Selenium is more for e2e testing where You actually test in different browsers, RTL is for component and integration testing.

[@shedrachelurihu4883]

I normally pass data-testid as a props to my component.

[@jdavis2581]

There’s about as much test code as there is production code…is this typical for more complicated applications too?

[@WebDevCody]

Yeah, it depends on how important the feature is or your teams thoughts on testing.

[@TheProcessor]

getByRole is the top priority to resemble a user

[@WebDevCody]

Yeah for sure, I do wonder why since checking by role and text content sounds like a brittle way to test. If someone changes the text of a button all your tests break? If you read the cypress guide they recommend using data-cy attributes to test with to allow non brittle tests

[@TheProcessor]

@@WebDevCody some would argue that’s exact what you want. Your tests are written so they break when something changes. Could help prevent typos or something. A text content change seems like a low effort change to a unit test anyway.

[@WebDevCody]

@@TheProcessor yeah, sure it’s low effort. I guess I’ll reconsider the idea

[@mahdimurshed3679]

What is the extension you are using for showing inline ts errors?

[@WebDevCody]

error lens

[@manindra502]

What's your Color theme & font name ?

[@kittysplode]

wow, so you literally have no idea what you're doing. making major changes while explaining something, waste of data

[@WebDevCody]

I never know what I'm doing

[@BLOBBERNATOR]

Honestly, it's extremely helpful just seeing another devs toolset and see their thought/work process. Really helps with broadening out knowledge and especially helps with your problem-solving skills to frontend problems. Thanks for the vid Cody,

[@Dlntck]

He obviously does. He said he didn't prepare for the video. Doesn't mean he doesn't know what he's doing.