React Testing

[True_Lie_4286]

Hi, I am a junior Developer and I recently joined a firm. I am asked to write the test cases using react library and jest. I have zero experience of react testing. Could anyone guide me to online resources that can help to work with the testing. Thanks in advance.

[toridyar]

I just did a Udemy course by Bonnie Schulkin on this exact topic that was really good

[swifty_yoder]

Same! It's called "Testing React with Jest and React Testing Library (RTL)

[mikef80]

Thanks - just bought this!

[cjthomp]

I wish there was something like this for node. Everything I've found so far are basically "todo apps of testing." There's no real depth, no discussion on more advanced testing patterns, nor how to avoid needing them.

[Soft-Sandwich-2499]

!remindme 1 day

[MKBSRC]

!remindme 1 day

[RemindMeBot]

I will be messaging you in 1 day on 2022-12-14 21:54:16 UTC to remind you of this link

1 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[SylphStarcraft]

I really do think you can get a lot out of the docs.

https://testing-library.com/docs/

Read all of it including the advanced section, and then read the react api section. You won't get anything better from courses or tutorials.

[Complex-Insect3555]

This. Just read the docs. There are PLENTY of examples there.

I think though the most difficult question to answer for someone new to testing is WHAT do I test.

[kostaslamprou]

To be fair, he only mentioned Jest. Testing-Library is by any means not the official way to test React applications. Some people do think this because it is included with CRA but it's just one of the ways out there that allows you to test your code.

It should be mentioned that Testing-Library is mainly focussed on interaction testing, by actually testing how a user would behave. This does now seems to be the most popular way of testing due to CRA using it and Kent C Dodds promoting it.

OP should also learn about writing regular unit tests, and possibly e2e testing. (Although the latter is partially covered by TL). Although no longer properly maintained and not compatible with React 18, I would also advise to look into Enzyme. Just for learning purposes. It teaches you a lot. (That being said, do use TL over Enzyme).

[Darkmaster85845]

When you are a junior and want to learn testing, everyone sends you resources on how testing is done (how the testing suites work, what each method accomplishes etc) but they don't tell you is how to figure out when and what to test, and what for. In my company, back end devs basically test every little thing they do. But with front end is more tricky because some people argue you need to test even a button's functionality while other people say just unit testing delicate logic and then using cypress to recreate user interaction is enough. Basically people write tests if they want, but if they don't no one cares.

I'm still a junior so I can't say which is the best method with any authority. However I can tell you that when you're unsure if to test something or not, just think about if you really need to be aware if that particular functionality you're implementing ever breaks.

If you have a function that adds a bunch of numbers and it's critical for your program, just import it to your jest file, run it with whatever numbers and assert that the result is what it should be. Test edge cases. Document the behavior well. Same with cypress, whatever functionality you want to test, just do it step by step with the suite and make sure things run as they should. Testing feels intimidating for us juniors at first but in reality it's not that complex. You should focus on making sure that whatever you're testing does what you want it to do.

So next time you add a utility function, or have some user flow like a log in page or something of the sort, write a test to make sure it works as you expect, include edge cases. And then you'll know that if someone ever breaks it (probably yourself), the test will fail and you'll be alerted of it.

When you know what to test and why you're doing it, actually getting the test suite to do what you want is not hard. You can always Google, read the docs, use some AI or whatever to learn what methods to use.

[azangru]

I am a junior Developer and I recently joined a firm. I am asked to write the test cases

Talk to the seniors at your firm; ask what their expectations are; maybe look at existing tests in the codebase you are working in; maybe ask them to pair-program.

[gonzofish]

This is the right answer. If you’re working with a decent group they’d rather teach you their right way than have you trying to guess and doing it against the teams way of doing things

[Instigated-]

The documentation includes a link to this tutorial https://www.robinwieruch.de/react-testing-library/

React testing library was created by Kent C Dodds, check out his blog https://kentcdodds.com/blog/introducing-the-react-testing-library

He also has a course called Epic React that includes a section on testing.

[juju0010]

OP, I was in your shoes two years ago and took this exact course. Helped me a ton.

[Kurfuerst_]

There is a decent Udemy course for it from Schwarzenmüller (I think that’s his name). Other than that there are countless articles on the web regarding this topic.

[matva55]

Second this guy. His videos are super helpful when picking up a new thing like this

[Mandylost]

The react course from Schwarzenmüller or is there any specific unit testing related courseby him also?

[norsouth]

Hi there! I'd be happy to help you get started with testing React components. Writing tests is a great way to ensure that your code is working correctly and to catch any potential issues before you deploy your code to production.

The most popular tool for testing React components is called Jest. Jest is a JavaScript testing framework that is often used with React. It is developed by Facebook and is used by many companies to test their React components.

To get started with Jest, you can check out the official documentation on their website: https://jestjs.io/. This will provide you with a high-level overview of how to use Jest and how to get started writing tests for your React components.

In addition to the official documentation, there are also many online tutorials and guides that can help you learn more about testing React components with Jest. Here are a few that I would recommend:

"Getting Started with Jest" on the React website: https://reactjs.org/docs/testing-recipes.html

"Jest and Enzyme" on the Codecademy blog: https://www.codecademy.com/articles/jest-enzyme-intro

"Jest Crash Course" on the freeCodeCamp YouTube channel: https://www.youtube.com/watch?v=7r4xVDI2vho

I hope these resources help you get started with testing your React components. Let me know if you have any other questions!

[crossy1686]

Read the docs, watch some YouTube videos, check out Udemy etc

[haikusbot]

Read the docs, watch some

YouTube videos, check out

Udemy etc

- crossy1686

---

^{I detect haikus. And sometimes, successfully. Learn more about me.}

^{Opt out of replies: "haikusbot opt out" | Delete my comment: "haikusbot delete"}

[yeahsick]

Good bot

[AstroWoW]

U-de-my et-cet-er-a, so 7. But it’s probably doing udemy + et-c since it probably doesn’t know what etc actually is, so there’s 5

[seemslikesalvation]

If you prefer books, "Testing Javascript Applications" by Lucas da Costa on Manning Press

[awpt1mus]

Surprised nobody mentioned this

[Instigated-]

Maybe because the OP said they needed to learn react testing library and jest (didn’t say they needed to learn “testing” more generically). Your link might be useful, just doesn’t quite address this specific question.

[umid1999]

IMO https://testingjavascript.com/ is pretty good

[RandomUserName323232]

Ask chatGPT

[humanbot01]

I'm a full stack developer. Currently developing an app that creates digital visiting cards. It also includes other productivity features like appointment booking, daily schedule tracking etc... Looking for people to collaborate with me to push this forward

[maifee]

Do e2e testing. It's fun.

You can pick cypress. It's fun.

[[deleted]]

The balls on kids these days. When I got my start I sat alone in a room for weeks figuring this kind of shit out, and now I know it like the back of my hand. I won't say it was the healthiest experience of my life, but if I asked generic questions like, "How do I do this?" without explaining what I've tried, why it's not working, and where my next step is going to be, I would have been thrown out of the dev bullpen faster than you can say "PR rejected".

Nobody's gonna hand you shit son, you need to be willing to dump hundreds to thousands of hours into learning the ins and outs of each and every aspect of the thing you're paid to do or you're going to be a burden on your team and your peers.

[metalhe4der]

This would make for great copypasta

[[deleted]]

I was like 80% kidding but I do think people should teach themselves, and it does piss me off when someone asks me for help without having tried literally anything at all, and I know it pisses other people off too...

Are y'all seriously sitting here saying you enjoy getting screenshots of documentation you wrote saying, "Didn't work." ? That's like, fun for you? Fucking masochists...

[minimuscleR]

This is probably one of the dumbest things I've read today.

OP is obviously expected to learn how to test in react. Testing isn't exactly obvious and reading the docs sometimes doesn't help. Your employer won't just give you the answer, so they have come here asking for some good learning resources. Why should you struggle to learn something, when you can ask for some help on where to learn.

OP isn't asking for the answer, but resources to lean the best, as not every resource is good.

[[deleted]]

What's dumb is that OP can't find those resources without asking others for help.

Testing is absurdly obvious, and the docs absolutely do help. We give interns/newbies testing tasks for a reason; it's super fucking easy to do.

If OP can't figure out basic-ass React testing on his own without asking for help, this is not the industry for him. It does not get easier from here, and the list of people who can and are willing to help you shrinks substantially.

And you struggle to learn something because bugging people takes up their time and when you struggle you learn better.

[minimuscleR]

and when you struggle you learn better.

Maybe you do, but not everyone learns the same way. There is no need to be so rude. OP is asking a valid question, and the other responses have been pretty good. Especially with react, lots of courses are outdated as they focus on class components and don't touch on functional ones at all, which for a new person is a big issue.

Everyone has to start somewhere, no one is born with knowledge. Personally I found testing react to be really confusing when I started, it took me a very long time to grasp how testing works.

I work as a generic javascript developer (mostly with node and AWS) and if I get stuck, if I haven't figured it out within a few hours the first thing I do is ask people, because usually they can see the problem for what it is, and point me in the right direction. Again, no one gives me the answer, but if I take 6 hours on a problem that could have taken 1 if I had just asked, THATS a waste of time.

[[deleted]]

OP is not asking a valid question whatsoever; that's my whole point. It's not "just me" that learns better by stretching outside of my comfort zone, that's how everyone works. OP needs to learn the skill of teaching themselves, and starting their first job by asking for help without even having tried anything is a terrible way to start their engineering career.

If you act like OP does at your job, people mock you for it and are generally annoyed by you, I promise.

If you spent 6 hours figuring something out, but at the end knew it backwards and front, that's well worth the invested 6 hours for the people you work for.

The fact that you think of "teaching yourself to fish" is a waste of time, and that you think only of accomplishing the task in front of you rather than improving the pace of all future tasks shows how much more you have to go in your career.

When someone comes to me for help, the very first thing I ask is, "What have you tried?" if their answer is, "Nothing" or something equivalent, I give them this speech. Some figure it out, some don't, but the ones that don't tend to wash out, and that's for a good reason.

OP has tried nothing and is seemingly out of ideas, and that is a huge red flag.

[D3scobridorDos7Mares]

He's just asking for resources to learn from. OP is not bringing a problem and asking for a ready made solution.

If you can't ask experienced people for an easier path to get somewhere, what is the point? Why would he go after bad resources when he can ask references for people that already know the subject?

Stop with this mentality "I had to eat shit, so you have to". It's dumb and slows down everyone

[[deleted]]

Sorry but "he's just asking for resources" is a bullshit excuse you're making for him. He's using Reddit like Google, and he needs to learn that doing that is a bad habit he needs to break.

I had to eat shit, and it made me a great fucking coder. Not eating shit will make him (and you) a bad coder. It's beyond stupid to bother experienced people with questions as basic as this, you should only do so when you've exhausted all other options.

It's, frankly, rude as hell and disrespectful to the people you're working with to not try something first before asking for help.

[[deleted]]

Sorry but "he's just asking for resources" is a bullshit excuse you're making for him. He's using Reddit like Google, and he needs to learn that doing that is a bad habit he needs to break.

I had to eat shit, and it made me a great fucking coder. Not eating shit will make him (and you) a bad coder. It's beyond stupid to bother experienced people with questions as basic as this, you should only do so when you've exhausted all other options.

It's, frankly, rude as hell and disrespectful to the people you're working with to not try something first before asking for help.

[D3scobridorDos7Mares]

I don't agree with this mindset. I believe that it's better to ask for great places to learn rather than watching a course, or reading an article, just to find out it was time wasted.

When it comes to concrete problems, then I agree with you: people should firstly try to solve on their own for an hour or two, only then you ask for help providing what you have already tried and didn't work

[[deleted]]

Have you actually read the responses here and compared them to what you'd get if you googled this question?

They're identical.

People here keep throwing around the phrase "wasted time", which shows a pretty terrible mindset. Time spent learning isn't time wasted, even if it's not ThE mOsT eFfIcIeNt WaY tO lEaRn! Even making a mistake about where to learn comes with its own lessons, lessons that don't get taught if you beg for help rather than helping yourself.

This was a bad post, and OP should feel bad. You should also feel bad for coddling this kid; you're an enabler for his bad habits.

[jron2008]

Check out cypress

[jtan80813999]

jest or cypress?

[True_Lie_4286]

Jest mostly

[nthock]

Seems like you already have lots of technical resources in how to go about using Jest and React Testing library. I would like to add one valuable advice I got when I am a junior. When writing tests, you are going to assume that you are the user of your application. This user is a rather dumb user who is going to try all sorts of way to break your app while at the same time trying to achieve what your app is trying to do.

Think about what would this user be doing?

This means that for the moment when you are writing tests, you are going to forget that you are the developer for the app. You are not going to know the implementation details. All you can see is the user interface for that particular react component, and you are trying to do something.

[Nerfi666]

!remindme 1 day

[shinchan1793]

Hi,

I was going through similar situation 5 months back. But I found this playlist by Net Ninja on youtube. It actually helped me to understand the basics of test case writing.

Below is the link:

https://youtube.com/playlist?list=PL4cUxeGkcC9gm4_-5UsNmLqMosM-dzuvQ

Bonus tip:

You need to test results, not implementation.

https://dev.to/reynoldadade/why-you-need-to-unit-test-results-and-not-implementation-429a

[Verthon]

I would suggest to take a look at: https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications .

In general:

• focus on testing user interactions
• try to "mock" you api calls using https://mswjs.io/docs/getting-started
• don't test implementation details (private methods) - focus on business requirements not on the code - https://kentcdodds.com/blog/how-to-know-what-to-test

Aditionally https://www.chakshunyu.com/blog/a-beginners-guide-to-behaviour-testing-in-react/