Skip to content

Cypress 10 - The Latest Release Details - Component Testing, Configuration Options

Cypress 10 was recently released with some long awaited features and bug fixes!

In this article, I will talk about some of the exciting features in the latest releases of 10.3.0, 10.2.0 and 10.1.0. Some of these features include component testing, changes to the Cypress configuration file, a new design for Cypress Onboarding UI Design, enabling Cypress natively for Apple silicon and Linux ARM64 and AArch64 systems, and adding live test data into the Cypress Dashboard!

Critical features of Cypress 10

Cypress 10 release was announced on June 2022. This was a feature-packed release with many community-request features like component testing, TypeScript improvements, improved onboarding experience, improved error messages, Cypress configuration files, and more.

To learn more, check out ChangeLog for a detailed list.

Component Testing

Let’s start with component testing. Component testing is directly integrated into the main Cypress application.

Testing applications to achieve full coverage could be done using many approaches. Major web frameworks focus on breaking applications into components to create a complex functional component. Component testing allows you to test components independently in isolation, and focuses on the functionality of the particular component providing more focused coverage.

End-to-end testing focuses on testing the entire application to ensure the application runs as expected while unit testing breaks down the application into smaller individual units of functions, methods, or modules tested in isolation.

Unit testing provides little interaction between components and the application, which tends to make debugging difficult.

The new Cypress 10 component testing provides component interaction between other components and the entire application. This is rendered in a real browser providing access to dev tools, and making debugging a lot easier during tests.

To learn more about component testing, check out GitHub Issue #21111.

To learn more about Cypress 10 and other included features, you can check out the announcement blog.

Cypress Config File

To provide a flexible and extensible configuration option for testing, Cypress 10 now supports multiple configuration file types, including TypeScript, CommonJS, or ESM Module configuration, and drop the cypress.json configuration file. The Cypress configuration file can be cypress.config.js, cypress.config.ts, cypress.config.cjs, or cypress.config.mjs file. 20643.

A configuration file is required in a project. Running cypress open will walk you through to set up your Cypress project with specific testing options for your project. 20643.

Cypress Onboarding UI Design

Project set up for Cypress 10 now takes you through a beautiful UI, built with Vue. Running cypress open renders the on-boarding UI with specific instructions for your test configuration, and allows you to choose between end-to-end testing or component testing.

Screenshot 2022-07-25 1.25.18 PM

Cypress 10.2.0

A minor version release of Cypress 10.2.0 was announced on Jun 21, 2022. This release focuses on machine compatibility for Apple and Linux distros.

Cypress is now available natively on Apple silicon. This means no extra system configuration with emulators, and approximately 2.5x faster testing environment on Apple devices including M1 and M2. 19908 20686

Cypress is now natively available on ARM64 and AArch64 systems running Linux 22252.

To learn more about the 10.2.0 release read Cypress 10.2.0: Run tests up to 2x faster on Apple silicon (M1)

Cypress 10.3.0

A minor version release of Cypress 10.3.0 was announced on Jun 28, 2022. This version focuses on improving the cloud testing developer experience workflow.

Cypress added actionable test data in the Cypress Dashboard from the test runs. Cypress Dashboard is a service by Cypress to provide access to recorded test results when running Cypress tests from a CI provider, giving insight to the tests which helps with tracking and debugging.

With Cypress 10.3.0, test result data are directly retrieved and cached whenever possible to provide real-time metrics for test coverage. New columns include #21250:

Latest runs to monitor, run, and fix tests locally within CI workflows. Average duration to help quickly identify and take action to improve the performance. To learn more check out Cypress 10.3.0: Speed up testing workflows with improved visibility into your test results

Conclusion

What do you think of these new features and the latest release?

Make sure to read the ChangeLogs for a complete list of features in the releases including bug fixes. To start using the latest Cypress, run npm install cypress@latest --save-dev from your browser.