DEV Community

Testing UI - Next JS, Typescript, Jest and React Testing Library

Maciek Grzybek on November 10, 2020

Intro As you know, React is just JavaScript. That means it can be tested just like any other JS application. There are lots of testing l...
Collapse
 
adrien profile image
Adrien Rahier

This is exactly what I needed thanks a lot Maciek for writing this comprehensive article!
One suggestion: use the tag #nextJS (the official one) and not #next which will help referencing your post even better.

Collapse
 
maciekgrzybek profile image
Maciek Grzybek

Glad you liked it and thank you :) I'll change the tag, didn't know about it :)

Collapse
 
adrien profile image
Adrien Rahier

Great :-)
Another question actually: looking at the files's naming I see that you prefix them with spec. I have seen several people just using test
=> So is this a personal convention or more like a best practice?

Thread Thread
 
maciekgrzybek profile image
Maciek Grzybek

Just a personal convention to be honest. We use this at my work, so I just got used to it :)

Thread Thread
 
adrien profile image
Adrien Rahier

Got it! Thanks for your reply :-)

Collapse
 
upupkenchoong profile image
Ken Choong

Very nice post sir, definitely what I need. But 1 thing, the repo stated is link is broken, do you mind to take a look? If it is for purpose, then is ok, understood.

Collapse
 
maciekgrzybek profile image
Maciek Grzybek

Thanks Ken :) I've just fixed the broken Github link, not sure how but somehow I've managed to remove it before :D

Collapse
 
upupkenchoong profile image
Ken Choong

Now is fixed.. thanks a lot

Thread Thread
 
maciekgrzybek profile image
Maciek Grzybek

No worries, let me know if you need anything else :)

Collapse
 
xavierbrinonecs profile image
Xavier Brinon

Amazing article, not sure Dev.to is the best medium for that though :)
I could subscribe to a newsletter or a blog of yours, develop your brand !

Collapse
 
maciekgrzybek profile image
Maciek Grzybek

Thanks, Xavier :) I am in the middle of building my own website, but you know how it is :)

Collapse
 
doctorderek profile image
Dr. Derek Austin 🥳

Hey Maciek, Nice article -- thanks so much for sharing. How do you like to test routes in Next.js?

Collapse
 
maciekgrzybek profile image
Maciek Grzybek

Thanks :) Not sure if I understand correctly your question, but I also wrote something here - dev.to/maciekgrzybek/testing-ui-ne...

Collapse
 
doctorderek profile image
Dr. Derek Austin 🥳

Hey Maciek, thanks for the reply and the link, I already read that one too. I was asking how you prefer to test routes such as "/" or "/news" in Next. It looks like there's a "next-page-tester" library as well as a "next-test-api-routes-handler" -- have you tried either of those to test your _app.tsx and /pages/* files?

Thread Thread
 
maciekgrzybek profile image
Maciek Grzybek

Yep the article I've mentioned actually talks about testing routes with next-page-tester

Thread Thread
 
doctorderek profile image
Dr. Derek Austin 🥳

Ohhh got it. Sorry, the link in the comment took me back to this article, so I thought it was a different but similar article 🙈 Here's the correct link to your other piece dev.to/maciekgrzybek/testing-next-...

Thread Thread
 
maciekgrzybek profile image
Maciek Grzybek

My bad sorry :) :)

Collapse
 
drspaceman profile image
Spaceman M.D.

Great article, Maciek! I like how you start with expert advice and an example project.

FYI the repo you cited is MIA (github.com/maciekgrzybek/react-ts-...).

Collapse
 
maciekgrzybek profile image
Maciek Grzybek

Thanks man :) Appreciate ite :) As for the github link - just fixed, somehow I've managed to remove the repo before :D