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!

Thread Thread
 
maciekgrzybek profile image
Maciek Grzybek

Native fetch is only accessible in the browser and Next is using SSR, which means you have to use something that can be used in the server as well instead. Node fetch or axios for example

Thread Thread
 
matiasbacelar98 profile image
Matias Bacelar • Edited

As Maciek said, native fetch was not possible, that's why I used fetch node but it would go with axios anyway especially because there is a good chance that you are using it on the client. Cheers

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?