Cypress.io, the leading automated testing platform announced on 6th April 2021, the release of Cypress’s dedicated Component Test Runner. The Test Runner is formulated in such a manner that it can be used instead of node-based component tests.
The Component Test Runner will execute the user’s component test in the browser just like the users would by simulating real interactions by utilizing Cypress’s robust test driver. As it runs in the browser, users can debug their components by making use of suitable developer tools. At present, the libraries and bundlers supported by Cypress are Vue, React, Vite, Rollup, and Webpack.
The features of the Cypress Component Test Runner are as follows:
- Has all the cy. APIs that users are familiar with.
- Real browsers.
- No polyfill APIs.
- No jsdom.
- Allows In-Browser debugging.
- Has an extremely fast startup and along with that live reloading.
- Dev Server Agnostic (Vite, Rollup, Webpack)
How is E2E different from Component Testing?
Cypress’s Component Test Runner and Cypress End-to-End (E2E) Test Runner are two separate things. The two can either be used separately or together, and the two also share the same driver, commands, and server.
The only difference between the two is that with component testing users mount their components directly with mount while with E2E users visit a webserver with cy.visit(). Also, Testing components requires less infrastructure as compared to testing web applications, because of which Cypress component tests are much, much faster than their E2E counterparts.
How to get started?
The most ideal way to start using Cypress Component Test Runner is to create a sample project with React or Vue. The following links below can be referred to for configuration and installation instructions:
What’s the reason behind Cypress Component Test Runner
According to Cypress, Developers have often struggled with trusting and maintaining component tests. They require a test framework that provides components in a real browser, interacts just like a user would, and enable them to debug by making use of local development environments. Some of the common anti-patterns and challenges faced by node-based test runners are as follows:
- Executing third-party dependencies that are browser-only.
- Mounting components and choosing their DOM asynchronously.
- Regulating mock timers.
- Mocking native browser functionality like Local Storage, Cookies, and more.
- Enforcing library-specific network mocks.
Most of the issues are instantly solved when tests run in a browser rather than within jsdom, and others are solved by the Cypress Test Runner.
Cypress because of its assertion framework and strong test driver can easily tackle all these dilemmas. Also, because Cypress runs in the browser, the development environment is spontaneous. The motive behind this is to create the most promising Component Test Runner and make it available in the market for modern frontend developers.