Wow! Cypress can run unit tests! 🥳
Tags: testing, javascript, webdev, typescript
Published: 2020-11-12 21:09:09

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](https://dev-to-uploads.s3.amazonaws.com/i/akjgtch13v45i65ek3ke.jpg)

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](https://docs.cypress.io/examples/examples/recipes.html#Unit-Testing), but the one that has me most excited is [the example where you don't need to run a web server](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/unit-testing__application-code).

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.](https://docs.cypress.io/examples/examples/recipes.html#Unit-Testing)

# 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.](https://dev.to/dgreene1/don-t-use-fixtures-in-cypress-and-unit-tests-use-factories-5cnh)