JavaScript Testing

Open-source JavaScript projects categorized as Testing

Top 23 JavaScript Testing Projects

  • Cypress

    Fast, easy and reliable testing for anything that runs in a browser.

  • Project mention: Simulating Internet Outage and Recovery using Cypress | dev.to | 2024-01-25

    In this blog post, we'll explore a Cypress test that replicates this scenario, utilizing the powerful intercept command to manipulate network requests and responses.

  • javascript-testing-best-practices

    📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)

  • Project mention: Comprehensive and exhaustive JS & Node.js testing best practices (July 2023) | /r/softwarecrafters | 2023-11-30
  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • mocha

    ☕️ simple, flexible, fun javascript test framework for node.js & the browser

  • Project mention: Introdução a testes unitários no desenvolvimento de software | dev.to | 2024-03-22
  • ava

    Node.js test runner that lets you develop with confidence 🚀

  • Project mention: Painless CLI integration testing | dev.to | 2024-01-10

    We use Jest Framework for testing. Jest is not a dogma, and, of course, in its place can be any other test runner, such as Mocha or Ava. Let's focus on tests. I'll provide a short example because I don’t want to waste your time. You can find the full version here. It's crucial to read the comments in the code below. Let's go!

  • Enzyme

    JavaScript Testing utilities for React

  • Project mention: Testing React Components: A Comprehensive Overview of Testing Libraries | dev.to | 2023-10-15

    Enzyme is another popular testing utility for React. It allows you to manipulate and traverse React components' output, making it easier to write comprehensive tests.

  • react-testing-library

    🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

  • Project mention: ReactJS Good Practices | dev.to | 2023-11-01

    React Testing Library

  • jasmine

    Simple JavaScript testing framework for browsers and node.js

  • Project mention: JS Toolbox 2024: Bundlers and Test Frameworks | dev.to | 2024-03-03

    Jasmine is a behavior-driven development framework for testing JavaScript code. It's known for its clean, straightforward syntax and does not rely on any other JavaScript frameworks or a Document Object Model (DOM). Jasmine is often praised for its simplicity and ease of use in both frontend and backend testing environments.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • volkswagen

    :see_no_evil: Volkswagen detects when your tests are being run in a CI server, and makes them pass.

  • Project mention: "Volkswagen' detects when your tests are being run in a CI server | news.ycombinator.com | 2024-04-09
  • nightwatch

    Integrated end-to-end testing framework written in Node.js and using W3C Webdriver API. Developed at @browserstack

  • Project mention: Learn Automated Testing At Home: A Beginner's Guide | dev.to | 2024-04-04

    6.NightwatchJS: NightwatchJS is a Node.js-based end-to-end testing framework. Key Features: Simplifies writing test scripts using a simple syntax. Supports parallel test execution. Integrates with Selenium WebDriver for cross-browser testing

  • Detox

    Gray box end-to-end testing and automation framework for mobile apps

  • Project mention: automation testing | /r/reactnative | 2023-07-01

    Nope. Not even on 0.71 yet https://github.com/wix/Detox/issues/3884

  • pollyjs

    Record, Replay, and Stub HTTP Interactions.

  • Project mention: Polly.js – Record, replay, and stub HTTP interactions | news.ycombinator.com | 2024-01-08

    They "pushed" out this project in 2018

    https://github.com/Netflix/pollyjs/commit/281115d359ee0da5e0...

  • artillery

    Load testing at cloud-scale. Serverless & distributed out-of-the-box. Load test with Playwright. Load test HTTP APIs, GraphQL, WebSocket, and more. Use any Node.js module. Never fail to scale with Artillery!

  • Project mention: Tracetest + Artillery Launch Week Recap 💥 | dev.to | 2024-04-19

    This week was Tracetest’s first-ever Launch Week. We’ve been working on a major integration with Artillery for the last month and our team is beyond excited to share it with you all!

  • web-skills

    A visual overview of useful skills to learn as a web developer

  • tape

    tap-producing test harness for node and browsers

  • Project mention: Having deps is a good thing, and disk space is infinite and free | /r/programmingcirclejerk | 2023-05-18
  • axe-core

    Accessibility engine for automated Web UI testing

  • Project mention: How to Write Accessible Technical Documentation – Best Practices with Examples | dev.to | 2024-04-15

    ‌Videos To caption videos, HTML is a great option. But if you are using markdown, you can embed videos from YouTube and Vimeo using the tag. These apps offer in-built caption support so you can enable captions before adding the embed code.

    You could also install third-party plugins for this purpose.

    Here’s another tip: avoid flashing content in your videos as it could lead to seizure triggers. If your video has flashing bright colours, ensure that it does not exceed two times within a second.

    Add transcripts to audios and videos

    It’s a good idea to add transcripts to your audio and video content. Not everyone will want to watch or listen to the content. But they may be curious to know what it is about.

    By adding a transcript, you make it easier for anyone to navigate through the content and get the information that they need.

    Transcript for audio
    For audio content, you can insert transcripts using HTML.

    Here’s an example:

     controls muted> 
       src="ringtone.mp3" type="audio/mpeg"> 
     
    
     
      

    Here is a transcription of the text

    00:03 = I am going to be productive today

    00:05 = I am going to be productive today

    00:08 = I am going to be productive today

    00:10 = I need to be productive today

    00:11 = I have to be productive today

    00:13 = I should be productive today

    00:16 = I am going to be productive today

    00:18 = I ought to be productive today

    00:21 = I have to be productive today

    00:23 = Productivity matters to me

    Enter fullscreen mode Exit fullscreen mode

    For markdown documentation sites like Docusaurus, you can create a custom component.‌

    • In your src/components folder, create a file named transcript.jsx.

    • Insert this code:

    import React, { useState } from 'react'; 
    export default function Transcript({ }) { 
      const [showTranscript, setShowTranscript] = useState(false); 
      const toggleTranscript = () => { 
        setShowTranscript(!showTranscript); 
      }; 
      return ( 
        <div> <a href="#" onClick={toggleTranscript}> { 
        showTranscript ? 'Hide transcript' : 'View transcript'
        } 
        </a> {showTranscript && ( 
    (insert your transcript text here) div> )} </div> ); }
    Enter fullscreen mode Exit fullscreen mode
    • Go to your markdown file and import it.
    import Transcript from '@site/src/components/transcript'; 
    
    
    
    Enter fullscreen mode Exit fullscreen mode

    A screenshot of the audio transcript output in a documentation site

    Note: I added some tweaks to the code to make transcript display optional. You can edit it if you want the transcript to show as the page loads.

    Transcript for video
    Now for videos, YouTube is a great option. It provides inbuilt transcripts for your videos. So, you can always embed YouTube videos in your docs.

    The transcript is in the video description after the main details. The transcript will display with the timestamps when you click the “Show Transcript” button.

    Add code snippets and use the colour contrast technique

    How to add code snippets
    Use code blocks within the text to explain code instead of images. You could also use code snippets to showcase the output of your code. Unless it is necessary to add an image, you should use code snippets.

    For instance,

    index.html

     
       
        
         
        A calculator app 
         
        
        
        
      
    
    Enter fullscreen mode Exit fullscreen mode

    This will allow screen readers to read through the code, which they are not able to do with screenshots.

    A screenshot of the above code

    Colour contrast technique
    The colour contrast technique implies using colours that are opposite or heavily contrasting.

    For example, using black text on a white background has a high contrast, as opposed to using light brown text on a brown background.

    When combining colours, you could use an accessible colour palette like Color Safe.‌

    Using a pale white colour on a green background gotten from Color Safe

    Add translation options

    There are documentation sites that provide translation options where you can build your docs in multiple languages, websites like Jekyll. This is an example.

    Docusaurus is also another doc site that provides multilingual options using Crowdin or Git.

    Use accessibility testing tools

    There are tools you can use to check for errors in accessibility in your docs. Some examples are WAVE (Web Accessibility Evaluation Tool) and AXE (Accessibility Engine).

    Also, you can get the NVDA(NonVisual Desktop Access) screen reader to test out your content. This software will let you know how the content of your documentation will be perceived by a user using a screen reader.‌

    Set up an improvement or suggestion box

    Finally, it may not be possible to cover the needs of every user. So you could add a suggestion or improvement box, allowing users to send feedback about how you could further improve the content. Hearing firsthand from users can help you know how best to make the docs accessible for them.

    To add an improvement box, you could use an external form link that stores the users’ inputs or you could set up the suggestion box in the docs.

    How to add an external form link in Docusaurus

    You would need to create a custom component for that.

    • Go to src/components folder and create a file feedback.jsx.

    • Add this code:

    import React from 'react'; 
    
    export default function FeedbackButton({ href }) {
      return ( <a href={href} target="_blank" rel="noopener noreferrer" > Give Feedback </a> ); 
    }; 
    
    Enter fullscreen mode Exit fullscreen mode
    • In your markdown file import it:
    import FeedbackButton from '@site/src/components/feedbackbutton';
    
    Enter fullscreen mode Exit fullscreen mode
    • Insert the link
     
    
    Enter fullscreen mode Exit fullscreen mode

    When you run it on your docs, it should showcase a link to Google forms. Google Forms is an example, you could add the link to your company website or server.

    Here’s what it’ll look like:

    A feedback link for suggestion in a docs site

    Summary

    To follow and implement these accessibility best practices, you can consider creating or using an already made style guide. This can help you consistently implement these practices and make it easier for you and other technical writers on your team.

    There are style guides focused on accessibility for technical writers, such as the following:

    That sums up my tips about web accessibility practices in writing. I’m a technical writer, and you can reach out to me on Instagram or hire me via Upwork. Thank you for reading.‌

  • nyc

    the Istanbul command line interface

  • Project mention: Migrating from Jest to Vitest for your React Application | dev.to | 2023-12-14

    Native code coverage via v8 or istanbul.

  • miragejs

    A client-side server to build, test and share your JavaScript app

  • Project mention: Exploring Mirage JS: Simplifying API Mocking in React Development | dev.to | 2023-08-07

    Mirage JS GitHub Repository

  • jest-dom

    :owl: Custom jest matchers to test the state of the DOM

  • Project mention: Mastering Jest Configuration for React TypeScript Projects with Vite: A Step-by-Step Guide | dev.to | 2023-12-15

    //config/jest/setupTests.ts // jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom';

  • dredd

    Language-agnostic HTTP API Testing Tool

  • Project mention: The Uncreative Software Engineer's Compendium to Testing | dev.to | 2023-07-31

    Dredd: used to test APIs based on the API blueprint or OpenAPI specification, to ensure implementation matches the specification.

  • CodeceptJS

    Supercharged End 2 End Testing Framework for NodeJS

  • qunit

    🔮 An easy-to-use JavaScript unit testing framework.

  • Project mention: Unit testing website front end | /r/typescript | 2023-05-16

    Mocha can also run in the browser: https://mochajs.org/#running-mocha-in-the-browser. An alternative library that can also run in the browser is QUnit: https://qunitjs.com/. You can include both with

  • pa11y

    Pa11y is your automated accessibility testing pal

  • Project mention: 🤯 150 Articles to Satisfy Your Curiosity | dev.to | 2024-03-13

    Pa11y is your automated accessibility testing pal (https://pa11y.org/) by Rowan Manning

  • jest-image-snapshot

    ✨ Jest matcher for image comparisons. Most commonly used for visual regression testing.

  • Project mention: How to test chart components in react? | /r/react | 2023-12-10

    You can give a try about visual testing. I think about Cypress components and Cypress Image snapshot or Jest Image snapshot (not DOM testing)

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2024-04-19.

JavaScript Testing related posts

Index

What are some of the best open-source Testing projects in JavaScript? This list will help you:

Project Stars
1 Cypress 46,129
2 javascript-testing-best-practices 23,512
3 mocha 22,412
4 ava 20,620
5 Enzyme 19,967
6 react-testing-library 18,626
7 jasmine 15,714
8 volkswagen 13,192
9 nightwatch 11,714
10 Detox 10,930
11 pollyjs 10,190
12 artillery 7,463
13 web-skills 6,823
14 tape 5,755
15 axe-core 5,629
16 nyc 5,520
17 miragejs 5,279
18 jest-dom 4,284
19 dredd 4,121
20 CodeceptJS 4,048
21 qunit 4,006
22 pa11y 3,950
23 jest-image-snapshot 3,774
The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com