DEV Community

Cover image for Testing Next.js pages - Little Bits

Testing Next.js pages - Little Bits

Maciek Grzybek on May 26, 2021

Why? Next.js is a super cool React framework, that gives you an amazing developer experience. In this episode, I'll show you how to test...
Collapse
 
matiasbacelar98 profile image
Matias Bacelar •

hello, great post !! there is not much information about testing in next js going around, I am having a bug if I use fetch instead of axios I guess it is because fetch is only available in the browser , i try using something like node fetch but I still get "fetch is not defined ", if you know any solution I'm all ears haha. Thank you

Collapse
 
maciekgrzybek profile image
Maciek Grzybek •

Hey Matias thanks for that :) this bug you're talking, do you mean in app or in tests?

Collapse
 
matiasbacelar98 profile image
Matias Bacelar •

In getServerSideProps when I use fetch and run the test it throws me "fetch is not defined", but only if I use fetch with axios the error does not appear

Thread Thread
 
maciekgrzybek profile image
Maciek Grzybek •

If you could send me the code or even better - a link to repo, I can take a look and try to help you out :)

Thread Thread
 
matiasbacelar98 profile image
Matias Bacelar •

I solve the problem using fetch-node thanks for answering anyway!

Thread Thread
 
alilop profile image
Alicia Lopez •

Hello Matias I am having the same issue trying to test GetServerSideProps, but keep getting the "fetch is not defined". How did you solve it exactly via fetch-node? I am failing so far... Thank You in advace!

Collapse
 
braydoncoyer profile image
Braydon Coyer •

Very handy! There isn’t a lot of content around testing with Next apps; this was very informative!

Collapse
 
maciekgrzybek profile image
Maciek Grzybek •

Glad I could help :)

Collapse
 
danilockthar profile image
Daniel Arroyo •

You didnt specify where the test has to be located and with what name.

Collapse
 
maciekgrzybek profile image
Maciek Grzybek •

It doesn't really matter :) You can name it however you want and put it wherever you want :)

Collapse
 
soudagar profile image
saifulla •

Hi @maciekgrzybek nice post!!
can we use MSW to test pages/api of next js application, I am using cypress I need idea how to mock pages/api in next js application.
Thank you

Collapse
 
maciekgrzybek profile image
Maciek Grzybek •

Hey, thanks for that :) Not sure if I understand you correctly, but MSW, has something that's called setupWorker - which is similar to mock server, but can be used in the browser. Maybe that will help?