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.
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:
- Install Cypress
- Run
npx cypress opento get the folder hierarchy set up - (optional) If you want type safety, add a
tsconfig.jsonfile to the./cypressfolder and rename the spec files from.jsto.ts - 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.
Top comments (3)
Thank you for sharing these valuable Cypress best practices! I've been exploring different resources to enhance my test automation skills, I recently came across another article titled 'Cypress Best Practices for Test Automation' that expands on some of the concepts you've covered here. It delves deeper into practical tips and techniques for optimizing test automation workflows with Cypress. Keep up the great work!"
What about Mocha? It can run our tests in the browser as well
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. :)