Cypress Component Test Runner

Building unit component tests for React

Cypress Component Test Runner

Cypress, which you might know from their very powerful end-to-end testing framework, has just announced a new player for component testing: Cypress Component Test Runner.

Real browser, real results

The new Cypress Component Test Runner, which is in alpha stage as I’m writing this article, will not use shallow renders to process the component part of your unit testing. The new tool actually uses a real browser, based on Chromium. This is the same approach that Cypress uses for their end-to-end testing framework. As a result, you will see a visual output next to the validation of your component tests, which is a great and welcome change to UI testing in general, and for React developers in particular.

One tool to rule them all?

Personally, I don’t think that the Cypress Component Test Runner will replace the awesome existing testing libraries “@testing-library” as well as “Enzyme”. They both target different use cases for your app’s test setup. The new testing tool by Cypress will supplement this already good selection.

Testing the testing tool

I’ve linked all necessary links in the addendum to this article below, so you can quickly try the Cypress Component Test Runner yourself out right now. Note that it’s still in alpha stage and shouldn’t be used near any production environment.