Overview

Jest

Stacks10.0K

Followers4.1K

Votes175

Mocha

Stacks8.9K

Followers3.0K

Votes430

Cypress

Stacks2.4K

Followers2.0K

Votes115

GitHub Stars49.4K

Forks3.4K

Cypress vs Jest vs Mocha: What are the differences?

Introduction

Cypress, Jest, and Mocha are popular testing frameworks used in web development. While they all serve the same purpose of facilitating testing, there are key differences between them that make each framework unique. In this Markdown code, we will explore these differences and provide a concise comparison between Cypress, Jest, and Mocha.

Ease of Setup: Cypress, as an end-to-end testing framework, provides an all-in-one setup experience. It includes built-in dependencies and an intuitive user interface, making it easy to start testing without much configuration. On the other hand, both Jest and Mocha require additional setup, including the installation of test runners, assertion libraries, and other necessary packages.
Testing Approach: Cypress focuses on end-to-end testing and provides a comprehensive testing environment for simulating user interactions and testing the entire application stack. It uses a real browser environment, allowing developers to perform actions as if they were a user. In contrast, Jest and Mocha are primarily used for unit testing and focus on isolating and testing individual units of code, such as functions or components.
Syntax and Framework Support: Cypress uses a JavaScript-based syntax with a fluent and easy-to-understand API. It provides direct support for modern frameworks like React, Vue, and Angular, making it seamless to test applications built with these frameworks. Jest, on the other hand, has a similar JavaScript syntax but also supports TypeScript out of the box. While Mocha supports both JavaScript and TypeScript, it does not have built-in support for any specific framework.
Mocking and Spies: Cypress, being an end-to-end testing framework, does not have built-in support for mocking and spying functionalities. Instead, it encourages the use of network stubbing and fixtures to simulate server responses. In contrast, Jest and Mocha provide comprehensive mocking and spying functionalities, allowing developers to easily mock dependencies and track function invocations.
Code Coverage: Jest is known for its excellent code coverage capabilities. It provides detailed reports indicating which parts of the codebase are covered by tests and which are not. This feature helps identify areas of the code that require additional testing. While Cypress can generate code coverage reports, it is not as detailed as Jest. Mocha, on the other hand, does not have built-in code coverage capabilities and requires the integration of additional tools like Istanbul to generate coverage reports.
Community and Ecosystem: Cypress has gained popularity for its extensive documentation, active community support, and growing ecosystem of plugins and custom commands. It has strong backing from the Cypress team and regular updates and enhancements. Jest also has a large and active community, with numerous plugins and integrations available. Mocha has been around for quite some time and has a mature community and ecosystem, although it may not have the same level of growth and updates as Cypress and Jest.

In summary, Cypress offers an easy setup and end-to-end testing capabilities while providing excellent support for modern frameworks. Jest is well-known for its code coverage capabilities and extensive community support, while Mocha has a mature community and is great for unit testing but lacks some of the features offered by Cypress and Jest.

Advice on Jest, Mocha, Cypress

Dane

Feb 7, 2020

Needs adviceon

Cypress

Jest

As we all know testing is an important part of any application. To assist with our testing we are going to use both Cypress and Jest. We feel these tools complement each other and will help us get good coverage of our code. We will use Cypress for our end to end testing as we've found it quite user friendly. Jest will be used for our unit tests because we've seen how many larger companies use it with great success.

835k views835k

Comments

Yildiz

testmanager/automation tester at medicalservice

May 12, 2020

Needs adviceon

AngularJS

TypeScript

Cypress

In the company I will be building test automation framework and my new company develops apps mainly using AngularJS/TypeScript. I was planning to build Protractor-Jasmine framework but a friend of mine told me about Cypress and heard that its users are very satisfied with it. I am trying to understand the capabilities of Cypress and as the final goal to differentiate these two tools. Can anyone advice me on this in a nutshell pls...

277k views277k

Comments

Kevin

QE Systems Engineer at Discovery, Inc.

Jan 11, 2021

Review

I've used both Protractor and Cypress extensively. Cypress is the easier and more reliable tool, whereas Protractor is the more powerful tool. Your choice of tool should depend on your specific testing needs. Here are some advantages and disadvantages of each tool:

Cypress advantages:

Faster
More reliable (tends to throw fewer intermittent false failures)
Easier to read code (handles promises gracefully)

Cypress disadvantages:

Cannot switch between browser tabs
Cannot switch to iFrames
Cannot specify clicks or keypresses explicitly as if a real user was interacting
Cannot move the mouse to specific co-ordinates
Sometimes has trouble switching between different top-level domains, so not good for testing external links
Cypress is a newer tool with less extensive documentation and less community support

Protractor advantages:

More powerful because it is Selenium-based - it can switch between tabs, it can handle external links to other domains, it can handle iFrames, simulate keypresses and clicks, and move the mouse to specific co-ordinates within the browser.
More extensive community support and documentation

Protractor disadvantages:

Slower and more brittle - in general there is a higher likelihood of cryptic and/or intermittent errors which may cause your tests to fail even though there is nothing wrong with your application
For highly experienced automation engineers, the fundamental "brittle" nature of Selenium can be worked around - it can be reliable but only if you really know what you are doing
Less graceful handling of promises - relies on async/await or .then to manage the order of execution. Therefore it is a bit harder to read the code.
Harder to set up, and the method of setup impacts its reliability. For example, a hub/node configuration where the selenium jar is on a different physical machine than the browser under test will cause unreliability in your tests. Not everyone knows about this type of thing, so it's common to find Selenium frameworks that are set up poorly.

It's probably better to use Cypress if

you're at a smaller company and have a close relationship with developers who can help write hooks or stubs in their code to assist your testing
you don't need to do things like switch between tabs or test links to external top-level domains

It's probably better to use Protractor if

You might need to switch between tabs or test external links to other domains within the scope of your framework
You want to use a more accurate simulation of how a real user interacts with a browser (i.e. click at this location, type these keys)
You're at a company where you won't have any support from developers in writing hooks or stubs to make their code more testable in a less powerful framework like Cypress

171k views171k

Comments

Detailed Comparison

Jest	Mocha	Cypress
Jest provides you with multiple layers on top of Jasmine.	Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.	Cypress is a front end automated testing application created for the modern web. Cypress is built on a new architecture and runs in the same run-loop as the application being tested. As a result Cypress provides better, faster, and more reliable testing for anything that runs in a browser. Cypress works on any front-end framework or website.
Familiar Approach: Built on top of the Jasmine test framework, using familiar expect(value).toBe(other) assertions;Mock by Default: Automatically mocks CommonJS modules returned by require(), making most existing code testable;Short Feedback Loop: DOM APIs are mocked and tests run in parallel via a small node.js command line utility	browser support;simple async support, including promises;test coverage reporting;string diff support;javascript API for running tests;proper exit status for CI support etc;auto-detects and disables coloring for non-ttys;maps uncaught exceptions to the correct test case;async test timeout support;test-specific timeouts;growl notification support;reports test durations;highlights slow tests;file watcher support;global variable leak detection	Time Travel; Debuggability; Automatic Waiting; Spies, Stubs, and Clocks; Network Traffic Control; Consistent Results; Screenshots and Videos
Statistics
GitHub Stars -	GitHub Stars -	GitHub Stars 49.4K
GitHub Forks -	GitHub Forks -	GitHub Forks 3.4K
Stacks 10.0K	Stacks 8.9K	Stacks 2.4K
Followers 4.1K	Followers 3.0K	Followers 2.0K
Votes 175	Votes 430	Votes 115
Pros & Cons
Pros 36 Open source 32 Mock by default makes testing much simpler 23 Testing React Native Apps 20 Parallel test running 16 Fast Cons 4 Ambiguous configuration 4 Documentation 3 Difficult 2 Many bugs still not fixed months/years after reporting 2 Ambiguous	Pros 137 Open source 102 Simple 81 Promise support 48 Flexible 29 Easy to add support for Generators Cons 3 Cannot test a promisified functions without assertion 2 No assertion count in results 1 Not as many reporter options as Jest	Pros 29 Open source 22 Great documentation 20 Simple usage 18 Fast 10 Cross Browser testing Cons 21 Cypress is weak at cross-browser testing 14 Switch tabs : Cypress can'nt support 12 No iFrame support 9 No page object support 9 No multiple domain support

What are some alternatives to Jest, Mocha, Cypress?

Jasmine

Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it's suited for websites, Node.js projects, or anywhere that JavaScript can run.

CodeceptJS

It is a modern end to end testing framework with a special BDD-style syntax. The test is written as a linear scenario of user's action on a site. Each test is described inside a Scenario function with I object passed into it.

Protractor

Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

AVA

Even though JavaScript is single-threaded, IO in Node.js can happen in parallel due to its async nature. AVA takes advantage of this and runs your tests concurrently, which is especially beneficial for IO heavy tests. In addition, test files are run in parallel as separate processes, giving you even better performance and an isolated environment for each test file.

Ghost Inspector

It lets you create and manage UI tests that check specific functionality in your website or application. We execute these automated browser tests continuously from the cloud and alert you if anything breaks.

QUnit

QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!

Sorry-cypress

Open-source, self-hosted alternative Cypress Dashboard.

Baretest

It is a fast and simple JavaScript test runner. It offers near-instant performance and a brainless API. It makes testing tolerable.

SinonJS

It is a really helpful library when you want to unit test your code. It supports spies, stubs, and mocks. The library has cross browser support and also can run on the server using Node.js.

Chai

It is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework. It has several interfaces that allow the developer to choose the most comfortable. The chain-capable BDD styles provide an expressive language & readable style, while the TDD assert style provides a more classical feel.