Introduction
In the world of testing Next.js applications, developers often face the dilemma of choosing between popular testing tools like Cypress and Jest. At Daxap, we have recently made the decision to embrace Cypress for our testing needs, particularly with the introduction of its component testing capability. In this blog post, we will explore the reasons behind this choice and how it has positively affected our development process.
- Rich Visualization with Cypress
One of the standout features of Cypress that convinced us was its ability to provide a comprehensive visualization of the test session. Unlike Jest, Cypress allows developers to see the entire testing process unfold in the browser. This visibility proved invaluable for troubleshooting and understanding how our components behave in different scenarios.
- Fast Setup and Fast Testing
Setting up a test environment can be an extensive process, especially when dealing with Next.js applications. Cypress emerged as the clear winner in terms of speed and simplicity. With an easy-to-use visual interface, getting started with Cypress was easy, significantly surpassing the manual configurations required by Jest for Next.js.
- Easy Learning and Consistent Syntax
The learning curve for Cypress was remarkably smooth, thanks to its similar syntax to Jest. Harnessing the power of GitHub Copilot accelerated our familiarity with Cypress, making the transition seamless. The consistent syntax between the two frameworks eased the training process for our development team.
- Handling Testing with a UI: A Superb Experience
One of the prominent features that confirmed our choice of Cypress at Daxap AS is the unique experience of handling tests through a graphical user interface (UI). Unlike Jest, which mainly relies on the command line for test execution and reporting results, Cypress offers an intuitive and visually rich dashboard.
Visualization of test runs
Cypress's UI not only allows developers to see the testing process in real time, but also provides detailed insights into each test case. The interactive dashboard displays test results, logs and allows easy navigation between different test packages. This visual representation significantly improves the troubleshooting process, making it faster and more efficient.
- Challenges with Mocking in Cypress
Although Cypress excelled in many areas, we ran into challenges with mocking, especially when it came to Next.js-specific hooks like useRouter from next/navigation. Unlike Jest, Cypress doesn't offer easy solutions for mocking, which required us to find a workaround.
Mocking Next.js Hooks in Cypress
To illustrate the challenges we faced, let's consider a simple Next.js component that uses useRouter:
When attempting to render this page with Cypress, the following code results in an error:
The error you may encounter is something like: 'invariant expected app router to be mounted'. This is because Cypress is having trouble handling the useRouter hook from next/navigation during testing.
The solution
To tackle this problem, we implemented a solution inspired by community discussions. Modifying our component code, we introduced a custom useRouter property in the component and mocked it during testing:
This solution allowed us to overcome the challenges that Cypress presented in mocking Next.js-specific hooks, and provided a clear path forward for testing components that use useRouter in a Next.js context.
Conclusion
In the end, our decision to choose Cypress over Jest for testing Next.js components has proven to be a wise one. The rich visualization, quick set-up and simplicity of learning have significantly increased our development flow. Although challenges arose with mocking, the innovative solutions and workarounds made Cypress an overall superior choice for our testing needs.
As we continue to explore and leverage Cypress in our projects, we look forward to the continued advancements and improvements in the testing landscape for Next.js applications.
Sources
1. "ComponentTestingNext.jswithCypress" - CypressBlog
○ https://www.cypress.io/blog/2023/02/16/component-testing-next-js-with-cypress
2. Cypress-Testing»-Next.jsDocumentation
○ https://nextjs.org/docs/pages/building-your-application/optimizing/testing#cypress
This post was written by backend developer, Oğuzhan K., at Daxap