In this piece, I will take you through reviews and analyses of the 2019 State of JavaScript report to show you JavaScript testing frameworks that will take center stage in 2020.
State of JavaScript
In the wake of 2019, we’ll take a look at the state of JavaScript as reflected in insights from State of JS, which surveyed over 21,000 developers across the world.
What is StateOfJS?
State of JS is basically an annual survey of everything JavaScript where opinions of developers who take the survey are recorded and beautifully visualized to show insights that signify the state of JavaScript in that year.
The data points cover frontend web development frameworks, databases, state management, relationships between frameworks, reception and ease of use, languages that compile to JavaScript, mobile frameworks, build tools, JavaScript testing tools, and a whole lot more.
It is a very comprehensive JavaScript survey that was started in 2016 by Sacha Greif and a few other helpers. Now it has over 21,000 developer responses in this latest edition.
Why StateOfJS?
In my opinion, State of JS is actually the very first JavaScript-only developer survey that is universally respected as far as the JavaScript community is concerned.
There are other very popular surveys like the StackOverflow developer survey, which draws on over 100,000 respondents. Jetbrain’s State of Developer Ecosystem Report is also pretty comprehensive, with over 6,000 respondents.
Testing tools
According to survey insights, these are the most in-demand testing tools by JavaScript developers in 2019 arranged in the order of importance determined by awareness, interests, and satisfaction.
Jest
Jest is one of the most popular JavaScript testing frameworks built and constantly maintained by the team at Facebook. It is a zero-configuration JavaScript testing framework recommended by React and the most easy to use.
Jest has a very impressive acceptance rate in 2018 and even more so this year among the JavaScript community. Jest is currently being used by over 1.5 million projects, according to GitHub data.
In the last 12 months, the retention rate has increased drastically from 39% to 61%. This is a recurrent growth rate, as it also increased from 2017 to 2018.
Also the percentage of people interested in Jest has reduced. The number is now at 22%, down from 29%. Most of them are now return users as shown by the retention insights.
Mocha
Mocha has been one of the most-used JavaScript testing frameworks for years now. It’s used with third party assertions, mocking, and spying tools like Chai or Enzyme. Aside from its massive ecosystem, Mocha has well-established options with a great documentation.
It is very flexible and open to a lot of extensions. Mocha has been used by over 900,000 projects, according to GitHub data.
According to the survey insights, the retention rate has grown from 39% to 42% in the last 12 months. About 8% of respondents have not heard about Mocha, and there is an awareness gap which Mocha is constantly filling, because last year the percentage was 10.
Storybook
Storybook is a development environment for UI components.
It allows you to browse a component library, view the different states of each component, and interactively develop and test components. It has been starred about 44,000 times on GitHub and has a massive userbase.
The retention rate of using Storybook doubled from 15% to 32% in 12 months, and the interest level also rose from 23% to 26% in the same timeframe.
Storybook was not even on developers’ radar last year, but there has been massive growth in 2019 and heading into 2020. It will be an interesting year.
Cypress
Cypress is a very fast and reliable JavaScript testing tool. It basically injects tests into a web application, provides a very clear and extensive documentation, and is in constant competition with another testing framework called TestCafe.
It is being used by over 25,000 projects, according to GitHub data.
The retention rate is 23%, and the interest rate is 28% for Cypress. There is an awareness gap, which Cypress is working to fill.
Enzyme
Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components’ output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
Enzyme’s API is meant to be intuitive and flexible by mimicking jQuery’s API for DOM manipulation and traversal.
The retention rate grew from 20% to 23% in the last 12 months. There is also a bridge of awareness gap all the way from 46% to 38%.
Ava
Ava is a test runner for Node.js with a concise API, detailed error output, embrace of new language features, and process isolation that lets you write tests more effectively.
With Ava, you can ship more awesome code. It is currently being used by 47,000 projects, according to GitHub data.
Last year, about 72% of the JavaScript developers had heard of Ava. This year, that number has reduced to 69%, while the retention rate has grown to 5%.
Jasmine
Jasmine is a Behavior Driven Development testing framework for JavaScript.
It does not rely on browsers, DOM, or any JavaScript framework. As a result, it is suited for websites, Node.js projects, or anywhere that JavaScript can run.
According to survey insights, the retention rate slightly increased in the past 12 months. However, there is a growing gap in awareness, which Jasmine can try to bridge in 2020.
Puppeteer
Puppeteer, built by the team at Google, is a Node library that provides a high-level API to control Chrome or Chromium over the DevTools Protocol.
Puppeteer runs headless by default, but it can be configured to run full (non-headless) Chrome or Chromium. It’s also fast, since it’s native.
The survey insights show a retention rate of 24.3% for Puppeteer, and an interest rate of 24%. There is a need for more awareness for the product, although it is already being used by over 55,000 projects.
In summary
Puppeteer and Cypress were new entrants identified by JavaScript developers this year. Since 2016, it’s been Mocha, Jasmine, Jest, Enzyme, and Ava.
It seems there is a kind of even distribution of developers-to-testing-tools, although Jest seems to be leading the market with over 96% of its users being return users.
What testing framework do you use? Tell me down in the comments section.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Full visibility into production React apps
Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.
LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.
Have a look also at oxygenhq.org
Node.js based automation framework
I wouldn’t put in Enzyme anymore, it’s been good but i see it being use wrong a lot and we need something more opinionated.
There is still a huge focus in companies on the exact division of unit/integration/end-to-end plus 100% coverage and these concepts for frontend have become counter-productive.
Enzyme give you all the tools to create an insane amount of brittle tests, as useful as it seems in the beginning.
I’m hopeful react-testing-library will be better, giving you not just some simple tools, but a new way of thinking about testing front-end, but we will see.