Component Troubleshooting
Cypress Component Testing is currently in beta.
This guide covers some common issues specific to Cypress Component Testing.
For more general troubleshooting of Cypress, visit the main Troubleshooting Guide. For information on migrating to Cypress v10.0, visit the Migration Guide.
Common Issues
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
eslint-plugin-cypress
often helps to solve this.
TypeScript Types Conflict
Some frameworks or libraries are strongly opinionated about TypeScript
configuration. For example, Create React App assumes the root level
tsconfig.json is the source of truth for compiling your application. CRA comes
with Jest integrated, but does not support additional tsconfig files.
⚠️ There is currently an open CRA issue about this:
Because isolating different tsconfigs for different purposes may not be possible in your framework, a workaround is necessary to avoid type conflicts between third party dependencies.
Below are two options that aren't pretty but necessary for some tools with limited TypeScript support.
1. Add Directives
Add a
TypeScript triple-slash-directive
to each Cypress spec where type checking is desired. To have them type checked,
you will need to create a tsconfig.json for both Cypress and Jest that only
includes those files.
2. Relocate Component Specs
Alternatively, you can group your Cypress tests and Jest tests inside separate folders (not colocated 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 udpate your
specPattern
to include the new file location.
Next.js Global Style Error
If you import the Next styles/globals.css in cypress/support/component.js to
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.