Write e2e Tests for our Next.js Application with Nx and Cypress
Nx promotes best practices by automatically generating Cypress based e2e tests for all applications inside an Nx monorepo workspace. Not only does Nx take away the burden of configuring Cypress, but it also allows to easily serve Cypress in "watch" or headless mode. The latter is particularly useful to also run in your CI pipeline. When you run Cypress test with Nx, it automatically makes sure to first launch the tested application, then run Cypress and point it to the running application.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] Clearly, Nx is very helpful if we have a large monorepo scenario. Even if we don't, for instance, by setting up my blog here with Nx, I get already a lot of value out of it, for instance, by having a pre-configured setup for Jest, which you can see here in our project. We have a Jest config for the project as well as the libraries, but also end-to-end tests with Cypress.
[0:23] As you might have noticed, this site-e2e test had got generated at the very beginning when we created our workspace and our Next.js application.
[0:32] Let's explore a bit more, what this has set up for us. We can see here, there's the Cypress config already set up to work properly. We have already an integration test here created, which does nothing else than basically visit the root of the application and check for some predefined values there.
[0:52] These are just example setups of a potential spec file, which obviously don't work anymore, because we have changed our application, meanwhile.
[1:00] Similarly, how we are able to serve the site project, our Next.js app, or Storybook in our library folder, also for Cypress here, we got such a target setup. There's this site-e2e project generated, which is exactly the application which we see up here. That has an end-to-end target that we can invoke.
[1:21] If we go and execute, yarn nx e2e site-e2e, it will launch Cypress for us on top of our application. What happens here, is that Nx understands that it needs to bootstrap, first, the application itself, which is our Next.js-based site project, then launch Cypress and connect it to the actual application.
[1:44] Here, we will run it in headless mode and verify whether everything works. I expect a failure, because as mentioned, we changed the application. You can see here now the output, and as expected, one of our spec fails. Let's go and implement a passing test.
[1:59] What we want to do is launch this in watch mode, such that we can interactively see how the Cypress test passes after some time, and based on our modifications. By using the watch mode, behind the scenes, the Cypress test runner got instantiated. We can click that directly and see how the test runs in a much more visual way, and understand better, what failed.
[2:19] Let's go back and implement our app spec now. What we want to do, is to go to our articles dynamic routing article. We would visit articles/routing, and then we would want to verify whether that renders the title of the article. We could change this one here to, "Should Render the Title." In here, we would simply do a ci.get of the H1 title. Let's see what the title of our article is. As you clean exactly this title at the very top.
[2:51] Let's save this. We can clean up here the imports, which you don't need at the moment. Now, if we go over again, you can now see that Cypress's test run already refreshed the page. It basically opens up our article, it verifies the H1 expects our expectation here, such that it has dynamic routing and static site generation. Therefore, the test passes.
[3:14] Similarly, we could add another one to verify that our YouTube component renders. That would verify that our MDX embedded component worked properly. Here we can, again, use the Cypress get(iframe), which should be rendered by our YouTube component, and that should be visible. Again, let's jump over here. You can now see the second test also got probably recognize and executed, and it passed.
[3:38] This is a very easy way of testing our personal portfolio site. Given, that Nx already converted the whole Cypress setup and made sure that I can code here in TypeScript, and it also instantiates behind the scenes, the application for me, this is really easy. While otherwise, I wouldn't probably set up a testing environment for my own portfolio site.