Testing Next.js application with Cypress

Gain real-world knowledge with end-to-end testing and Cypress. You will learn the ins and outs of Cypress by selecting elements and making assertions. Next, you will learn how to test a real-world Next.js application and get hands-on experience writing end-to-end and component tests from scratch.

By the end of this course, you will have the required skills to set up a comprehensible Cypress test suit that can test any web application. Whether you are a seasoned Next.js developer or just getting started, this course empowers you to elevate your testing game, contributing to the overall quality and reliability of your Next.js applications.

Testing Next.js applications with Cypress.

Course overview

This course is divided into multiple different chapters filled with interactive hands-on exercises, quizzes, expert knowledge, and real-world examples.

Introduction to Next.js and testing

A gentle introduction to the world of automated testing, Next.js, and the course contents. If you don't have any previous experience with testing or Next.js, don't worry, this course will hold your hand from start to finish.

You will learn all the concepts and techniques at a pace that's easy to understand but still challenges you at times.

Introduction to Cypress

Learn the core concepts of Cypress such as selecting elements, making assertions, and the pros and cons of it. This chapter will prime you for the upcoming lessons and exercises.

Throughout this course, we will learn Cypress more in-depth so at the end you'll be an end-to-end testing machine.

Testing a Next.js application

In this chapter, we will learn how to integrate Cypress with Next.js. We will set up our scripts, testing environment with a SQL database, and write solid tests.

We will master the challenging but crucial parts of having a database be part of our tests. You will learn how to populate the database for tests with particular data and how to clean it up afterward.

End-to-end testing with Cypress

In this chapter, we will move on to testing our real-world Next.js application. We will learn how to work with production applications and all the challenges that come with it. We will exercise good testing practices and focus on writing maintainable and not-flaky tests.

We will be faced with multiple different challenges that most common web applications have and learn the best practices on testing them.

We will spend time on:

• Testing different database states.

• Different ways of selecting elements and their pros and cons.

• Handling form submissions with Cypress.

• Asserting asynchronous events.

• Testing API routes.

• Best practices of end-to-end testing.

Component testing with Cypress

In this chapter, we will move on to component testing. We will learn how component tests differ from end-to-end tests and in which situation you should use them.

We will set up a component testing environment and learn about concepts such as spies and mounting React components.

Assessment: Testing Next.js applications with Cypress

In this 15 minute timed assessment you will test yourself on the knowledge you learned to ready yourself to apply these skills in the real world.

Conclusion

We will recap our course material and give you insight on where to go next.