We’re proud to announce the alpha release of Cypress’s dedicated Component Test Runner. It’s a brand new test runner that’s designed to replace your node-based component tests.
Our Component Test Runner executes your component tests in the browser as a user would by simulating real interactions by using Cypress's robust test driver. Since it runs in the browser, you get to debug your components using your favorite developer tools. As of today, the Cypress core team officially supports the following libraries and bundlers: React, Vue, Webpack, Rollup*, and Vite*.
Features
- Fast startup, live reload
- Real browsers
- No jsdom
- No polyfill APIs
- In-Browser debugging
- Network-layer mocking with
cy.intercept - Dev Server Agnostic (Webpack, Rollup*, Vite*)
- All the
cy.* APIs you already know and love
Differences between E2E and Component Testing
Our Component Test Runner is separate from the Cypress End-to-End (E2E) Test Runner and they can be used either separately or together. They share the same driver, server, and commands. The primary difference is that with E2E you visit a webserver with cy.visit() and with component testing you mount your components directly with mount.
Testing components requires less infrastructure than testing web applications; therefore, Cypress component tests are much, much faster than their E2E counterparts. Cypress component tests perform similarly to component tests executed within node-based runners like Jest and Mocha.
The component test runner has a dedicated entry point from the CLI: cypress open-ct which will launch directly into the browser.
Getting Started
The best way to try the Cypress Component Test Runner is to generate an example project with a React or Vue and give it a go. The documentation always contains the most up-to-date code examples. The following posts contain configuration and installation instructions that can serve as a reference or a quick-start:
Why?
As frontend developers, we felt comfortable writing unit tests for self-contained business logic and E2E tests for multi-page experiences, but we struggled with trusting and maintaining component tests. We needed a test framework that rendered components in a real browser, interacted with them as a user would, and allowed us to debug them using our local development environments.
Through the team’s shared experiences as both component library authors and test library authors, we assessed the gaps and complexities when testing with existing tools. Here are some of the challenges and anti-patterns required by node-based test runners:
- Mocking native browser functionality (Cookies, History, Local Storage, fetch, XHR, and much, much more...)
- Mounting components and selecting their DOM asynchronously
- Managing mock timers
- File-level mocks
- Implementing library-specific network mocks
- Executing third-party dependencies that are browser-only
- Separate transpilation configuration for tests
Many of these problems are immediately solved when running tests in a browser instead of within jsdom, while others were solved by the Cypress Test Runner. Cypress is already uniquely positioned to solve these problems because of its robust test driver and assertion framework. Cypress also has native support for retry-ability, network stubbing, and real user interactions. Finally, because Cypress runs in your browser, the development environment is intuitive. As fans of the Testing Library and Kent C. Dodds, we strongly believe that the more your tests resemble the way your software is used, the more confidence they can give you. Cypress Component Testing is the closest experience we have found to meeting this philosophy.
The Team
The project has been in development for quite some time, largely maintained by external contributors. However, during the last year, Cypress built a dedicated, full-time component testing team comprised of the following people:
- Jessica Sachs
- Dmitriy Kovalenko
- Lachlan Miller
- Brian Mann
- Bart Ledoux
- Adam Gastineau
- Gleb Bahmutov
- You!
Our goal is to build the best Component Test Runner possible for the modern frontend developer, and we hope you’ll help by becoming a user and a part of the community.
Improved Dashboard Experience: Coming Soon
Recording Cypress component tests to the Dashboard will work out of the box, but we’re still actively developing features and UI that are specific to component testing.
Submitting Issues
You can submit an issue on Github here or chat with us on our Discord. In this early stage, issue submissions are critical, and we thank you for your support.
Community
The Cypress component testing team is active on Discord.
Happy testing!
The Cypress Component Testing Team