DEV Community

Dan Greene
Dan Greene

Posted on • Updated on

Wow! Cypress can run unit tests! 🥳

Seriously, I am super excited about this. You can write unit tests in Cypress without even having to run a web server. That makes Cypress the ideal tool for testing a JS/TS library that is meant to be used in the browser.

I know what you're thinking... "I've got {some other testing library}, why would I need to use Cypress?"

Well, if you haven't tried it yet, Cypress really is rather lovely.
But Don't Take My Word For It

It's not just that Cypress is super user-friendly and easy to learn. No, there's something incredibly important that Cypress does that other tools don't do (by default). Cypress actually runs in a browser.

Huh? Why not Jest?

And as great as Jest is (and it has basically won the unit testing war), there's a not very clearly advertised problem with Jest...

... Jest doesn't run code in a browser.

It runs in JSDom which is really just a wrapper on NodeJS that mocks out different browser APIs.

Which means... a test can pass in Jest but fail in the production code. That's not what you want out of your test automation code. You want confidence.

But hold up, what about Karma?

Ah, I see you've been doing this for a while. Yes, Karma is/was a thing and in some cases is still quite popular.

But after spending more than a few hours trying to get Karma set up, I eventually bailed. I guess I've been spoiled by the incredibly easy setup of Jest and Cypress.

Alright, I'm sold. What do I need to do?

The Cypress.io team has made some pretty useful examples of Cypress unit testing, but the one that has me most excited is the example where you don't need to run a web server.

It's really as simple as:

  1. Install Cypress
  2. Run npx cypress open to get the folder hierarchy set up
  3. (optional) If you want type safety, add a tsconfig.json file to the ./cypress folder and rename the spec files from .js to .ts
  4. import your library (or whatever software you're testing) at the top of the test file

I honestly can't believe that it's as simple as just importing the function you want to test.

Caveat

This is a little bit harder for React code, so the steps I provided above are more for testing "vanilla JS/TS" code (i.e. code that isn't specific to any UI framework).

But again, the Cypress.io team has you covered with example of React unit test examples too.

Wrap Up

Please give this a try and let me know what you think of it. Ultimately, I feel incredibly grateful to be developing code at a time when we have such wonderfully fast and easy to use tooling at our disposal.

I'd love to hear what your experiences are, so please share! :)


P.S. If you're already a pro with Cypress and you're looking to level-up, learn how "fixture factories" can improve your test code.

Discussion (2)

Collapse
pegahsafaie profile image
Pegah Safaie

What about Mocha? It can run our tests in the browser as well

Collapse
dgreene1 profile image
Dan Greene Author • Edited

They’re really different tools entirely. I’d recommend you try Cypress out to see how it lends itself better to end-to-end or mocked API end-to-end tests as where mocha is a unit testing tool. As shown above Cypress can also do unit testing too but it’s a newer thing for Cypress.

I reach for both when the timing is right (although I rarely use Mocha anymore since if I need to write unit tests I use Jest and in most other places I rely on TypeScript to enforce things).

Cypress gives me sanity. :)