ScreenshotNeo

BlogGuides

Cypress 11: New Features and Changes

Cypress 11 made Component Testing generally available and changed mount behavior. Here are the release highlights and the migration details to check in existing tests.

By the ScreenshotNeo team4 October 20266 min read

Cypress 11.0.0, released November 8, 2022, made Component Testing generally available for React, Next.js, Angular, and Vue. For teams upgrading, the most important changes are to component mounting: a later cy.mount() in the same test removes the component mounted earlier, several mount options and APIs were removed, and Vue’s mount return value changed. This guide summarizes the release and gives you a practical migration checklist. Cypress’s changelog and version migration guide are the authoritative references for details.

1. What changed in Cypress 11?

Change What it means
Component Testing became generally available The beta tag was removed for React, Next.js, Angular, and Vue support.
Component Testing API updates Mount behavior and framework-specific APIs changed; existing component tests may need edits.
Reported startup improvement Cypress reported startup improvements of up to 84% in its results after changing how its binary ships. The actual result varies by situation; this is a vendor-reported figure, not an independent benchmark.

The Cypress Team described the Component Testing API as stable and generally available, and said the mount API changes laid groundwork for supported libraries and third-party integrations. Read the team’s Component Testing announcement for that context.

2. Component Testing migration checklist

  1. Read the Cypress 11 section of the migration guide for your framework.
  2. Search component tests and support files for cy.mount(), removed mount options, and imports from cypress/react.
  3. Update tests that mount more than one component in sequence.
  4. Update Vue tests that consume the mount result.
  5. Run the relevant component test suite, then run the project’s normal Cypress checks and review failures individually.
  6. Confirm which 11.x release you are using. Cypress 11.0.0 was followed by 11.0.1, 11.1.0, and 11.2.0, with fixes and changes documented in the changelog.

Repeated mounts in one test

In Cypress 11, a subsequent cy.mount() call in the same test removes the previously mounted component. If your test expects two components to remain on the page, render them together under a single mounted parent and interact with them in that state.

// Before: do not rely on the first component remaining after the second mount.
cy.mount(<FirstComponent />)
cy.mount(<SecondComponent />)

// For a test that needs both present, compose them into one mounted tree.
function TestPage() {
  return (
    <>
      <FirstComponent />
      <SecondComponent />
    </>
  )
}

cy.mount(<TestPage />)

This React example illustrates the behavior; use the equivalent composition pattern for the framework in your project. If the test is intended to replace one component with another, sequential mounting can still express that intent, but assertions should reflect that the earlier component has been removed.

Removed mount options and React APIs

The Cypress 11 migration guide lists these removed mount options: cssFile, cssFiles, style, styles, stylesheet, and stylesheets. It also lists mountHook and unmount as removed from cypress/react. Find their uses and follow the framework-specific replacement guidance in the official migration guide rather than assuming a one-to-one substitute.

// Search your project for references before upgrading component tests.
// Example shell command:
rg -n 'cssFile|cssFiles|stylesheet|stylesheets|mountHook|unmount|cy\.mount' cypress src

Vue mount return value

The Vue mount return value changed from the VueWrapper alone to an object containing wrapper and component. Update code that accesses the old return value, and consult the migration guide for the exact framework-specific usage.

// Cypress 11 shape: access the wrapper through the returned object.
cy.mount(Component).then(({ wrapper, component }) => {
  // Use wrapper for VueWrapper operations.
  // component is also available in the returned object.
})

3. Startup performance: how to interpret the claim

Cypress attributed its reported startup improvement to shipping a snapshot of its binary instead of source files. The changelog says results vary by situation. Treat “up to 84% faster” as Cypress’s reported upper result, not as a guaranteed improvement for every machine, project, or run. If startup time matters to your team, compare the same workflow before and after the upgrade under comparable conditions.

4. Cypress 11 point releases

“Cypress 11” can refer to the original 11.0.0 release or the later 11.x releases. The changelog records 11.0.1 on November 9, 11.1.0 on November 14, and 11.2.0 on November 22, 2022. Examples of later changes include fixes for TypeScript migration workflow failures and a cypress run crash involving the JUnit reporter in 11.1.0, plus the return of “Run All Specs” behind the experimentalRunAllSpecs flag in 11.2.0. Check the changelog entry for the precise version and full list.

5. Troubleshooting upgrade issues

Symptom Likely cause What to do
A component disappears after another mount Each later mount replaces the previously mounted component in that test. Mount a composed tree when both components must coexist, or revise the test to expect replacement.
TypeScript reports an invalid mount option The option may have been removed in Cypress 11, including one of the stylesheet options. Remove the obsolete option and follow the migration guide for the relevant framework and styling setup.
An import or call involving mountHook or unmount fails These APIs were removed from cypress/react. Update the React support code according to the version 11 migration instructions.
Vue test code cannot access wrapper methods The mount result now contains wrapper and component. Destructure the returned object and use its wrapper property where the old code used the wrapper directly.
Upgrade workflow fails in a TypeScript project The initial 11.0.0 release and early 11.x releases had follow-up fixes. Identify the exact installed 11.x version and check the changelog for the relevant point-release fix.
cypress run crashes when using JUnit reporting The changelog records a JUnit reporter crash fix in 11.1.0. Check the changelog and use the appropriate later 11.x release if your project is intentionally pinned to this line.

These are historical release notes. The research for this article did not establish Cypress 11’s support status or whether it is suitable for a new project in 2026. Check current official lifecycle information before making a present-day support decision.

6. Browser screenshots for test artifacts

If your workflow also needs screenshots of a website outside Cypress—for example, a capture for a report, documentation, or an AI agent—ScreenshotNeo is a website screenshot API and MCP server. Its API returns an image or PDF from a GET request, and its documented options include full-page or selector-based captures, viewport and device settings, custom waits, cookies and headers, and async jobs. See the ScreenshotNeo API documentation for parameters and response details.

Or skip the browser setup

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.

7. FAQ

When did Cypress 11.0.0 come out?

November 8, 2022, according to the Cypress changelog.

Which frameworks had generally available Component Testing in Cypress 11?

React, Next.js, Angular, and Vue.

Does the “up to 84%” startup result mean every project starts 84% faster?

No. It is a Cypress-reported upper result, and Cypress qualified that performance varies by situation.

Should I start a new project on Cypress 11?

This article covers the historical 11.x release and does not establish its current support status. Check Cypress’s current official lifecycle and release information before choosing a version for a new project.