Getting Started
Get familiar with Cypress by testing a “Hello World” example.
We'll cover the following...
“Hello World” in Next.js
We have set up a simple Next.js application with a single page accessible on the home page route /. The only thing it does is render the h1 element with the text, “Hello World.” Run the application below and see what it looks like on our browser.
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
The first end-to-end test
For our “Hello World” example, we have a simple test. If you are not familiar with Cypress yet, don’t worry. We will cover all the requirements. Our first test visits our website at the path / and checks if the page contains the Hello World text. Click the “Run” button to run the test and see it log the result into the console.
describe("Landing page", () => {
it("contains 'Hello World'", () => {
cy.visit("/");
cy.contains("Hello World");
});
});
We have just accomplished our very first test.
Feel free to play around with the example above. Try changing the text from “Hello World” to “Banana” to see what happens.