Creating a minimal Next.js application

To explore the Cypress component testing capabilities we can first install a very simple out-of-the-box Next.js application.

Install Next.js and create a project (next-test-app):

npx create-next-app next-test-app

After the project is created, navigate into the newly created folder next-test-app and run the simple out-of-the-box application:

yarn dev

Now you can open a browser on the Windows host machine and navigate to the page http://localhost:3000 and access the application running on WSL:

Installing and running Cypress

Add cypress and other packages necessary for component testing to the existing project:

yarn add -D cypress @cypress/react @cypress/webpack-dev-server @testing-library/cypress html-webpack-plugin webpack webpack-dev-server

Start Cypress:

yarn cypress open

Click on the [Component Testing] option:

Make sure that “Next.js” is selected as the [Front-end framework], then click on [Next step]:

Confirm the installation of the suggested dependencies by clicking on [Continue]:

Confirm the addition of the configuration files by clicking on [Continue]:

Choose a browser and then start the component testing:

To be completed

Troubleshooting

Error: Cannot find module ‘next/dist/server/config’

Problem

Trying to open the Cypress Runner component testing throws the following error:

Error: Failed to load "next/dist/server/config" with error: Cannot find module 'next/dist/server/config'

Resolution

Make sure that the next package is installed and available in package.json.

Type error: ‘commands.ts’ cannot be compiled under ‘–isolatedModules’ because

Problem

We have installed Cypress inside a next.js project. We try to build the next.js project:

yarn build

The following error is issued:

...
Failed to compile.

./cypress/support/commands.ts:1:1
Type error: 'commands.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

> 1 | /// <reference types="cypress" />
    | ^
  2 | // ***********************************************
  3 | // This example commands.ts shows you how to
  4 | // create various custom commands and overwrite
error Command failed with exit code 1.
...

Resolution

See https://github.com/cypress-io/cypress/issues/24137

Error: spawn Xvfb ENOENT

Problem

We try to execute Cypress component tests:

yarn cypress run --component

We get the following error:

...
[FAILED] Your system is missing the dependency: Xvfb
[FAILED] 
[FAILED] Install Xvfb and run Cypress again.
[FAILED] 
[FAILED] Read our documentation on dependencies for more information:
[FAILED] 
[FAILED] https://on.cypress.io/required-dependencies
[FAILED] 
[FAILED] If you are using Docker, we provide containers with all required dependencies installed.
[FAILED] 
[FAILED] ----------
[FAILED] 
[FAILED] Error: spawn Xvfb ENOENT
[FAILED] 
[FAILED] ----------
...

Resolution

See this discussion: https://stackoverflow.com/questions/66373352/bitbucket-pipeline-your-system-is-missing-the-dependency-xvfb

Use a Cypress-provided docker image (see this page for official Cypress docker images: https://github.com/cypress-io/cypress-docker-images).

Here is an example:

# Base image taken from:https://github.com/cypress-io/cypress-docker-images
FROM cypress/browsers:node16.16.0-chrome107-ff107-edge

# Specify where our app will live in the container
WORKDIR /app

# Copy the React App to the container
COPY "my_application/" /app/

RUN yarn && yarn cache clean

# We want the production version
RUN yarn build

# Executable commands the container will use [Exec Form]
ENTRYPOINT ["yarn", "cypress", "run"]

# With CMD in this case, we can specify more parameters to the last entrypoint
CMD [""]

You can build this image like this:

docker build -f fe-adminpanel/Dockerfile -t cypress/test-image:1.0.0 .

Run the docker container with a command like this:

docker run -i cypress/test-image:1.0.0 --component --headless --browser chrome

The testing type selected (e2e) is not configured in your config file

Problem

We try to run Cypress component tests headlessly with the following command:

yarn cypress run --config '{"specPattern":["/tests/components/**/*.cy.ts"]}'

And we get the following error:

The testing type selected (e2e) is not configured in your config file.

Please run ‘cypress open’ and choose your testing type to automatically update your configuration file.

Potential Resolution

To be determined