Cypress Component Testing is currently in beta.
This guide covers some common issues specific to Cypress Component Testing.
Spec File Doesn't Appear in the Cypress App
If something appears missing from the spec list, make sure the files have the
proper extension and the
specPattern is correctly defined.
ESLint Global Errors
You may experience ESLint errors in your code editor after migrating to Cypress
v10.0.0 or while using a framework (e.g. Create React App) that has ESLint
rules which cause the Cypress globals to error.
Installing and configuring the
often helps to solve this.
The TypeScript Types for
cy.mount is Not Working in Component Tests
In some instances, TypeScript might not recognize the custom
command in Cypress spec files not located in the cypress directory. You will
get a compiler error specifying that the type is not found in this case.
A quick way to fix this is to include the cypress directory in your tsconfig.json options like so:
"include": [ "src", "cypress" ]
TypeScript will now monitor all files in the cypress folder and pick up the typings defined in the cypress/support/component.ts file.
Alternatively, you can move your typings to an external file and include that file in your tsconfig.json file. See our TypeScript Configuration guide for more info on doing this.
Cypress Types Conflict with Jest
For frameworks that include Jest out of the box (like Create React App), you
might run into issues where the Cypress global types for TypeScript conflict
with Jest global types (
it, etc..). In this case, other
Cypress globals like
cy might not be working properly either.
We are currently investigating better ways to handle this, but for the time being, we recommend using a triple slash references directive to instruct the TypeScript compiler to look at the Cypress global types in each of your affected spec files:
/// <reference types="cypress" />
Alternatively, Relocate Component Specs
You can also group your Cypress tests and Jest tests inside separate folders (not co-located with components).
You will need to add a
tsconfig.json to the folder and specify the types the
files inside that folder should use.
Don't forget to update your
to include the new file location.
Next.js Global Style Error
If you import the Next
style your components, you'll get an error from Next about not allowing
importing global css from files other than your main app file.
To solve this, install the
next-global-css package and
update the Next Webpack configuration.
See our example Next.js application for a demonstration of this configuration.