{
"doc": {
"id": "app/write-tests/component-testing/get-started",
"title": "Get started with component testing",
"description": "Write Cypress component tests in React, Angular, Vue, or Svelte. Learn how to set up, write, and run your first component test in a real browser with full debugging capabilities.",
"section": "app",
"source_path": "/llm/markdown/app/write-tests/component-testing/get-started.md",
"version": "e4f4d57da4cfedd520d3d465137d387fd54b532f",
"updated_at": "2026-09-08T17:49:12.214Z",
"headings": [
{
"id": "app/write-tests/component-testing/get-started#cypress-component-testing",
"text": "Cypress Component Testing",
"level": 1
},
{
"id": "app/write-tests/component-testing/get-started#why-cypress-for-component-testing",
"text": "Why Cypress for Component Testing?",
"level": 2
},
{
"id": "app/write-tests/component-testing/get-started#configuring-component-testing",
"text": "Configuring Component Testing",
"level": 2
},
{
"id": "app/write-tests/component-testing/get-started#supported-frameworks",
"text": "Supported Frameworks",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#select-testing-type",
"text": "Select Testing Type",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#project-setup",
"text": "Project Setup",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#install-dependencies",
"text": "Install Dependencies",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#config-files",
"text": "Config Files",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#choose-a-browser",
"text": "Choose A Browser",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#writing-your-first-test",
"text": "Writing Your First Test",
"level": 2
},
{
"id": "app/write-tests/component-testing/get-started#frameworks",
"text": "Frameworks",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#your-first-component-test",
"text": "Your First Component Test",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#test-explanation",
"text": "Test Explanation",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#running-the-test",
"text": "Running the Test",
"level": 2
},
{
"id": "app/write-tests/component-testing/get-started#selectors-assertions",
"text": "Selectors & Assertions",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#passing-props-to-components",
"text": "Passing Props to Components",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#testing-interactions",
"text": "Testing Interactions",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#testing-components-with-events",
"text": "Testing Components with Events",
"level": 2
},
{
"id": "app/write-tests/component-testing/get-started#using-spies",
"text": "Using Spies",
"level": 3
},
{
"id": "app/write-tests/component-testing/get-started#whats-next",
"text": "What's Next?",
"level": 2
}
]
},
"content": {
"type": "root",
"children": [
{
"type": "heading",
"depth": 1,
"children": [
{
"type": "text",
"value": "Cypress Component Testing"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Cypress Component Testing mounts your components directly in a real browser — not a simulated DOM — so you test them exactly as they will behave for your users. Every component renders visually during the test run, and you can use browser DevTools to inspect, interact, and debug just as you would during development."
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Why Cypress for Component Testing?"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Teams that adopt Cypress for component testing typically come looking for faster feedback on their UI components. They stay because Cypress brings together capabilities that would otherwise require assembling several separate tools:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "See your component in action. Components render visually inside the Cypress App as each test runs. You can interact with them manually, inspect elements with DevTools, and use "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/core-concepts/open-mode.md#Command-Log",
"children": [
{
"type": "text",
"value": "Time Travel"
}
]
},
{
"type": "text",
"value": " to step back through exactly what happened at each point in the test — no guessing, no `console.log` archaeology."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Write less test boilerplate. "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/core-concepts/introduction-to-cypress.md#Cypress-is-Not-Like-jQuery",
"children": [
{
"type": "text",
"value": "Automatic waiting"
}
]
},
{
"type": "text",
"value": " means your assertions run only after your component has rendered and updated. There is no need for `waitFor`, `act()`, or manual timeouts. You describe what should be true; Cypress waits until it is."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Use powerful testing primitives — built in. "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/guides/stubs-spies-and-clocks.md",
"children": [
{
"type": "text",
"value": "Spies and stubs"
}
]
},
{
"type": "text",
"value": " to verify event handlers and isolate dependencies. "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/guides/network-requests.md",
"children": [
{
"type": "text",
"value": "Network interception"
}
]
},
{
"type": "text",
"value": " to test how your component handles any server response without a running backend. "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/api/commands/clock.md",
"children": [
{
"type": "text",
"value": "Clock control"
}
]
},
{
"type": "text",
"value": " to test time-sensitive logic instantly, without sleeping."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "One project, one quality signal. Component tests live in the same Cypress project as your end-to-end tests. When connected to "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/cloud/get-started/introduction.md",
"children": [
{
"type": "text",
"value": "Cypress Cloud"
}
]
},
{
"type": "text",
"value": ", results, flake patterns, and "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/ui-coverage/get-started/introduction.md",
"children": [
{
"type": "text",
"value": "coverage data"
}
]
},
{
"type": "text",
"value": " flow into a single view — so your team has clear evidence of quality at every layer before a release ships."
}
]
}
]
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Catching a component bug in isolation is far cheaper than catching the same bug in an end-to-end test or, worse, in production. Teams that test components with Cypress close that feedback loop earlier, reduce the cost of fixing defects, and ship with more confidence."
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Configuring Component Testing"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Assuming you've successfully "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/get-started/install-cypress.md",
"children": [
{
"type": "text",
"value": "installed Cypress"
}
]
},
{
"type": "text",
"value": " and "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/get-started/open-the-app.md",
"children": [
{
"type": "text",
"value": "opened Cypress"
}
]
},
{
"type": "text",
"value": ", now it's time to set up component testing."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The Cypress App will guide you through configuring your project."
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Supported Frameworks"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Cypress currently has official mounting libraries for "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/react/overview.md",
"children": [
{
"type": "text",
"value": "React"
}
]
},
{
"type": "text",
"value": ", "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/angular/overview.md",
"children": [
{
"type": "text",
"value": "Angular"
}
]
},
{
"type": "text",
"value": ", "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/vue/overview.md",
"children": [
{
"type": "text",
"value": "Vue"
}
]
},
{
"type": "text",
"value": ", and "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/svelte/overview.md",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
},
{
"type": "text",
"value": " and support for the following development servers and frameworks:"
}
]
},
{
"type": "table",
"align": [
null,
null,
null
],
"children": [
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Framework"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "UI Library"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Bundler"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/react/overview.md#React-with-Vite",
"children": [
{
"type": "text",
"value": "React with Vite"
}
]
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "React 18-19"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Vite 8"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/react/overview.md#React-with-Webpack",
"children": [
{
"type": "text",
"value": "React with Webpack"
}
]
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "React 18-19"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Webpack 5"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/react/overview.md#Nextjs",
"children": [
{
"type": "text",
"value": "Next.js 15-16"
}
]
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "React 18-19"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Webpack 5"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/vue/overview.md#Vue-with-Vite",
"children": [
{
"type": "text",
"value": "Vue with Vite"
}
]
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Vue 3"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Vite 8"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/vue/overview.md#Vue-with-Webpack",
"children": [
{
"type": "text",
"value": "Vue with Webpack"
}
]
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Vue 3"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Webpack 5"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/angular/overview.md#Framework-Configuration",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Angular 21-22"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Webpack 5"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/svelte/overview.md#Svelte-with-Vite",
"children": [
{
"type": "text",
"value": "Svelte with Vite"
}
]
},
{
"type": "text",
"value": " Alpha"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Svelte 5"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Vite 8"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/svelte/overview.md#Svelte-with-Webpack",
"children": [
{
"type": "text",
"value": "Svelte with Webpack"
}
]
},
{
"type": "text",
"value": " Alpha"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Svelte 5"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Webpack 5"
}
]
}
]
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The following integrations are built and maintained by Cypress community members."
}
]
},
{
"type": "table",
"align": [
null,
null,
null
],
"children": [
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Framework"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "UI Library"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Bundler"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "https://github.com/qwikifiers/cypress-qwik",
"children": [
{
"type": "text",
"value": "Qwik"
}
]
},
{
"type": "text",
"value": " Community"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Qwik"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Vite"
}
]
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"children": [
{
"type": "link",
"title": null,
"url": "https://github.com/redfox-mx/cypress-lit",
"children": [
{
"type": "text",
"value": "Lit"
}
]
},
{
"type": "text",
"value": " Community"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Lit"
}
]
},
{
"type": "tableCell",
"children": [
{
"type": "text",
"value": "Vite"
}
]
}
]
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Select Testing Type"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Whenever you run Cypress for the first time, the app will prompt you to set up either E2E Testing or Component Testing. Click on \"Component Testing\" to start the configuration wizard."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "For more information on how to choose a testing type, we recommend this "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/core-concepts/testing-types.md",
"children": [
{
"type": "text",
"value": "Testing Types Guide"
}
]
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Choose Component Testing"
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Project Setup"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The Project Setup screen will automatically detect your framework and bundler. In this example we will use "
},
{
"type": "link",
"title": null,
"url": "https://react.dev/",
"children": [
{
"type": "text",
"value": "React"
}
]
},
{
"type": "text",
"value": " and "
},
{
"type": "link",
"title": null,
"url": "https://vitejs.dev/",
"children": [
{
"type": "text",
"value": "Vite"
}
]
},
{
"type": "text",
"value": ". Click \"Next Step\" to continue."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React and Vite are automatically detected"
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Install Dependencies"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The next screen checks that all the required dependencies are installed. All the items should have green checkboxes on them, indicating everything is good, so click \"Continue\"."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "All necessary dependencies are installed"
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Config Files"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Next, Cypress generates all the necessary configuration files and gives you a list of all the changes it made to your project. Click \"Continue\"."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The most important generated setting is `component.devServer` in `cypress.config`, which tells Cypress which UI framework and bundler to use. For most projects, the scaffolded values are all you need. See "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/component-framework-configuration.md#Dev-Server-and-Bundler",
"children": [
{
"type": "text",
"value": "Dev Server and Bundler"
}
]
},
{
"type": "text",
"value": " for how this works and how to customize it."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The Cypress launchpad will scaffold all of these files for you"
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Choose A Browser"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "After setting up component testing, you will be at the browser selection screen."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Pick the browser of your choice and click the \"Start Component Testing\" button to open the Cypress App."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Choose your browser"
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Writing Your First Test"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "At this point, your project is configured to use Cypress Component Testing. However, when the app appears, it won't find any specs because we haven't created any yet. Now we need write our first Component Test."
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Frameworks"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Cypress currently has official mounting libraries for "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/react/overview.md",
"children": [
{
"type": "text",
"value": "React"
}
]
},
{
"type": "text",
"value": ", "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/angular/overview.md",
"children": [
{
"type": "text",
"value": "Angular"
}
]
},
{
"type": "text",
"value": ", "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/vue/overview.md",
"children": [
{
"type": "text",
"value": "Vue"
}
]
},
{
"type": "text",
"value": ", and "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/component-testing/svelte/overview.md",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
},
{
"type": "text",
"value": ". In addition to our official framework support there are many community plugins such as "
},
{
"type": "link",
"title": null,
"url": "https://github.com/qwikifiers/cypress-qwik",
"children": [
{
"type": "text",
"value": "Qwik"
}
]
},
{
"type": "text",
"value": " and "
},
{
"type": "link",
"title": null,
"url": "https://github.com/redfox-mx/cypress-lit",
"children": [
{
"type": "text",
"value": "Lit"
}
]
},
{
"type": "text",
"value": "."
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Your First Component Test"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Though every framework is different and has its own unique nuances, in general, writing tests is very similar. Let's look at how a basic test is written for a `StepperComponent`."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Let's assume the Stepper Component consists of two `buttons`, one used to decrement the counter and one to increment it as well as a `span` tag that sits in the middle of the buttons to show the current value of the counter."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "To see examples of the Stepper Component and its tests in each Framework, visit our "
},
{
"type": "link",
"title": null,
"url": "https://github.com/cypress-io/component-testing-quickstart-apps",
"children": [
{
"type": "text",
"value": "Component Testing Quick Start Apps Repo"
}
]
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
}
]
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import React from 'react'\nimport Stepper from './Stepper'\n\ndescribe('', () => {\n it('mounts', () => {\n // see: https://on.cypress.io/mounting-react\n cy.mount()\n })\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import { StepperComponent } from './stepper.component'\n\ndescribe('StepperComponent', () => {\n it('mounts', () => {\n // see: https://on.cypress.io/mounting-angular\n cy.mount(StepperComponent)\n })\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import Stepper from './Stepper.vue'\n\ndescribe('', () => {\n it('mounts', () => {\n // see: https://on.cypress.io/mounting-vue\n cy.mount(Stepper)\n })\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "import Stepper from './Stepper.svelte'\n\ndescribe('Stepper', () => {\n it('mounts', () => {\n // see: https://on.cypress.io/mounting-svelte\n cy.mount(Stepper)\n })\n})"
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Test Explanation"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Let's break down the spec. First, we import the `Stepper` component. Then, we organize our tests using the functions `describe` and `it`, which allows us to group tests into sections by using method blocks. These are global functions provided by Cypress, which means you don't have to import them directly to use them. The top-level `describe` block will be the container for all our tests in a file, and each `it` represents an individual test. The `describe` function takes two parameters, the first of which is the name of the test suite, and the second is a function that will execute the tests."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "We defined a test using the `it` function inside `describe`. The first parameter to `it` is a brief description of the spec, and the second parameter is a function that contains the test code. In our example above, we only have one test, but soon we'll see how we can add multiple `it` blocks inside of a `describe` for a series of tests."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/api/commands/mount.md",
"children": [
{
"type": "text",
"value": "cy.mount()"
}
]
},
{
"type": "text",
"value": " method will mount our component into the test app so we can begin running tests against it."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Now it's time to see the test in action."
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Running the Test"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Switch back to the browser you opened for testing, and you should now see the `Stepper` Component in the spec list. Click it to see the spec execute."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Our first test verifies the component can mount in its default state without any errors. If there is a runtime error during test execution, the test will fail, and you will see a stack trace pointing to the source of the problem."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "A basic test like the one above is an excellent way to start testing a component. Cypress renders your component in a real browser, and you can use all the techniques/tools you would normally during development, such as interacting with the component in the test runner, and using the browser dev tools to inspect and debug both your tests and the component's code."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Feel free to play around with the `Stepper` component by interacting with the increment and decrement buttons."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Now that the component is mounted, our next step is to test that the behavior of the component is correct."
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Selectors & Assertions"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "By default, the Stepper's counter is initialized to \"0\". We can override that value by specifying an initial count. Let's write a couple of tests that will verify both these states."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "To do so, we will use a selector to access the `span` element that contains the counter, and then assert that the text value of the element is what we expect it to be."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "There are various ways to select items from the DOM using Cypress. We will use "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/api/commands/get.md",
"children": [
{
"type": "text",
"value": "cy.get()"
}
]
},
{
"type": "text",
"value": ", which allows us to pass in a CSS-like selector."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "After we \"get\" the element, we use the "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/api/commands/should.md",
"children": [
{
"type": "text",
"value": "should"
}
]
},
{
"type": "text",
"value": " assertion method to verify it has the correct text value."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Add the following test inside the `describe` block, right below the first test:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
}
]
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('stepper should default to 0', () => {\n cy.mount()\n cy.get('span').should('have.text', '0')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('stepper should default to 0', () => {\n cy.mount(StepperComponent)\n cy.get('span').should('have.text', '0')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('stepper should default to 0', () => {\n cy.mount(Stepper)\n cy.get('span').should('have.text', '0')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('stepper should default to 0', () => {\n cy.mount(Stepper)\n cy.get('span').should('have.text', '0')\n})"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "When you go back to the test runner, you should see the test pass."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "In the above test, we select the element by passing in \"span\" to `cy.get()`, which will select all `span` tags in our component. We only have one `span` currently, so this works. However, if our component evolves and we add another `span`, then this test could start to fail. We should use a selector that will be less brittle to future changes."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "In the `Stepper` component, the `span` tag has a `data-cy` attribute on it:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
}
]
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "{count}"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "{{ count }}"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "{{ count }}"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "{count}"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "We assign a unique id to the `data-cy` attribute that we can use for testing purposes. Update the test to use a CSS attribute selector to `cy.get()`:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
}
]
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('stepper should default to 0', () => {\n cy.mount()\n cy.get('[data-cy=counter]').should('have.text', '0')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('stepper should default to 0', () => {\n cy.mount(StepperComponent)\n cy.get('[data-cy=counter]').should('have.text', '0')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('stepper should default to 0', () => {\n cy.mount(Stepper)\n cy.get('[data-cy=counter]').should('have.text', '0')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('stepper should default to 0', () => {\n cy.mount(Stepper)\n cy.get('[data-cy=counter]').should('have.text', '0')\n})"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The test will still pass as expected, and our selector is now future-proof. For more info on writing good selectors, see our guide "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/core-concepts/best-practices.md#Selecting-Elements",
"children": [
{
"type": "text",
"value": "Selector Best Practices"
}
]
},
{
"type": "text",
"value": "."
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Passing Props to Components"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "We should also have a test to ensure the `count` prop sets the count to something else besides its default value of \"0\". We can pass in props to the `Stepper` component like so:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
}
]
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('supports a \"count\" prop to set the value', () => {\n cy.mount()\n cy.get('[data-cy=counter]').should('have.text', '100')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('supports a \"count\" prop to set the value', () => {\n cy.mount(StepperComponent, {\n componentProperties: {\n count: 100,\n },\n })\n cy.get('[data-cy=counter]').should('have.text', '100')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('supports a \"count\" prop to set the value', () => {\n cy.mount(Stepper, { props: { count: 100 } })\n cy.get('[data-cy=counter]').should('have.text', '100')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('supports a \"count\" prop to set the value', () => {\n cy.mount(Stepper, { props: { count: 100 } })\n cy.get('[data-cy=counter]').should('have.text', '100')\n})"
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Testing Interactions"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "We mounted and selected the element in the above tests but didn't interact with it. We should also test that the value of the counter changes when a user clicks the \"increment\" and \"decrement\" buttons."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "To do so, we will interact with the component by using the "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/api/commands/click.md",
"children": [
{
"type": "text",
"value": "click()"
}
]
},
{
"type": "text",
"value": " command, which clicks a DOM element just like a real user would."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Add the following tests:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
}
]
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('when the increment button is pressed, the counter is incremented', () => {\n cy.mount()\n cy.get('[data-cy=increment]').click()\n cy.get('[data-cy=counter]').should('have.text', '1')\n})\n\nit('when the decrement button is pressed, the counter is decremented', () => {\n cy.mount()\n cy.get('[data-cy=decrement]').click()\n cy.get('[data-cy=counter]').should('have.text', '-1')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('when the increment button is pressed, the counter is incremented', () => {\n cy.mount(StepperComponent)\n cy.get('[data-cy=increment]').click()\n cy.get('[data-cy=counter]').should('have.text', '1')\n})\n\nit('when the decrement button is pressed, the counter is decremented', () => {\n cy.mount(StepperComponent)\n cy.get('[data-cy=decrement]').click()\n cy.get('[data-cy=counter]').should('have.text', '-1')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('when the increment button is pressed, the counter is incremented', () => {\n cy.mount(Stepper)\n cy.get('[data-cy=increment]').click()\n cy.get('[data-cy=counter]').should('have.text', '1')\n})\n\nit('when the decrement button is pressed, the counter is decremented', () => {\n cy.mount(Stepper)\n cy.get('[data-cy=decrement]').click()\n cy.get('[data-cy=counter]').should('have.text', '-1')\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('when the increment button is pressed, the counter is incremented', () => {\n cy.mount(Stepper)\n cy.get('[data-cy=increment]').click()\n cy.get('[data-cy=counter]').should('have.text', '1')\n})\n\nit('when the decrement button is pressed, the counter is decremented', () => {\n cy.mount(Stepper)\n cy.get('[data-cy=decrement]').click()\n cy.get('[data-cy=counter]').should('have.text', '-1')\n})"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "When you view the results of each of the tests, you will see that the counter is now \"1\" in the increment test, and \"-1\" in the decrement test. Not only did our tests pass, but we can visually see the results in a browser!"
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Testing Components with Events"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "All the state of the `Stepper` Component (ie: the count) is handled internally in the component and then consumers are then alerted to changes to the state."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "As the developer of the `Stepper` Component, you want to make sure when the end-user clicks the increment and decrement buttons, that the appropriate event is triggered with the proper values in the consuming component."
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Using Spies"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "We can use "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/guides/stubs-spies-and-clocks.md#Spies",
"children": [
{
"type": "text",
"value": "Cypress Spies"
}
]
},
{
"type": "text",
"value": " to validate these events are being called correctly. A spy is a special function that keeps track of how many times it was called and any parameters that it was called with. We can then assign a spy to our event, interact with the component, and then query the spy to validate it was called with the parameters we expect."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Let's set up the spies and bind them to the component:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "React"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Angular"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Vue"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Svelte"
}
]
}
]
}
]
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('clicking + fires a change event with the incremented value', () => {\n const onChangeSpy = cy.spy().as('onChangeSpy')\n cy.mount()\n cy.get('[data-cy=increment]').click()\n cy.get('@onChangeSpy').should('have.been.calledWith', 1)\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('clicking + fires a change event with the incremented value', () => {\n const onChangeSpy = cy.spy().as('onChangeSpy')\n cy.mount(StepperComponent, {\n componentProperties: {\n change: {\n emit: onChangeSpy,\n } as any,\n },\n })\n cy.get('[data-cy=increment]').click()\n cy.get('@changeSpy').should('have.been.calledWith', 1)\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('clicking + fires a change event with the incremented value', () => {\n const onChangeSpy = cy.spy().as('onChangeSpy')\n cy.mount(Stepper, { props: { onChange: onChangeSpy } })\n cy.get('[data-cy=increment]').click()\n cy.get('@onChangeSpy').should('have.been.calledWith', 1)\n})"
},
{
"type": "code",
"lang": null,
"meta": null,
"value": "it('clicking + fires a change event with the incremented value', () => {\n const onChangeSpy = cy.spy().as('onChangeSpy')\n cy.mount(Stepper, { props: { onChange: onChangeSpy } })\n cy.get('[data-cy=increment]').click()\n cy.get('@onChangeSpy').should('have.been.calledWith', 1)\n})"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "First, we create a new spy by calling the `cy.spy()` method. We pass in a string that gives the spy an "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/core-concepts/variables-and-aliases.md",
"children": [
{
"type": "text",
"value": "alias"
}
]
},
{
"type": "text",
"value": ", which assigns the spy a name by which we can reference it later. In `cy.mount()`, we initialize the component and pass the spy into it. After that, we click the increment button."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The next line is a bit different. We've seen how we can use the `cy.get()` method to select elements, but we can also use it to grab any aliases we've set up previously. We use `cy.get()` to grab the alias to the spy (by prepending an \"@\" to the alias name). We assert that the method was called with the expected value."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "With that, the `Stepper` component is well tested. Nice job!"
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "What's Next?"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Congratulations, you covered the basics for Component Testing with Cypress!"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "To learn more about testing with Cypress, check out the "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/core-concepts/introduction-to-cypress.md",
"children": [
{
"type": "text",
"value": "Introduction to Cypress"
}
]
},
{
"type": "text",
"value": " guide."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "To track which parts of your components are exercised by your tests, set up "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/tooling/code-coverage.md#component-testing-code-coverage",
"children": [
{
"type": "text",
"value": "code coverage for component tests"
}
]
},
{
"type": "text",
"value": "."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Writing component tests with an AI coding tool? The `/cypress-author` skill applies Cypress best practices automatically. See "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/tooling/ai-skills.md",
"children": [
{
"type": "text",
"value": "Cypress AI Skills"
}
]
},
{
"type": "text",
"value": "."
}
]
}
]
},
"token_estimate": 3611
}