Next.Js testing
My background - I am a software engineer working as the lead frontend currently with 4 years of experience working on frontend applications using Next.js + TypeScript (currently)
My question is - I haven't done any frontend testing before at all (Only on our backend in python at work) What libraries would you recommend to use to test the frontend and what is your opinion on how much the test coverage should be? (>50%?, 80%? 100%?) Also any videos would be useful 🙂
I've looked into Jest, React Testing Library, and Vitest but wanted to hear from the community and what you guys prefer and if you have the time to give a few points on why.
Edit: What is typically tested? All components or only key components? Utility functions? At what point is it unnecessary to test?
2 Replies
I would suggest to test things that are fundamental for the user experience.
An example, you have an routine that needs to be called using a button
For this you have to pass a method that should be called if a button was clicked. You would need to find the label of the button, trigger a click event and see how many times was called. Doing like this tells you that the user was able to find that button.
I would strongly suggest to stay away from test that try to find a
data-test-id or something like does not represent the way the app is going to be experiencedThe libraries you mentioned are pretty fundamental to most codebases, I'd suggest to also learn a bit of Mock Service Worker to test APIs and Cypress for end to end (e2e) testing.
MSW allows you to intercept outcoming requests and handle them depending of test scenarios
Cypress pretty much mimics user input for your application, very expensive but extremely useful to test the whole workflow of your app