DOCSEARCHbyAlgolia
Submit Docs

QUnit Documentation

repository·main·Indexed 26 days ago

https://github.com/qunitjs/qunit

A lightweight, dependency-free JavaScript testing framework for client-side and server-side code across browsers and Node.js. QUnit provides a comprehensive API for defining tests, assertions, and callback events, with support for asynchronous testing via Promises and async functions. It includes a CLI runner and integrates with tools like Karma, Testem, Istanbul (nyc), Grunt, Rollup, and Webpack.

Tokens
45.7K
Snippets
138
Records
346
Agent score
86%

What's inside QUnit

  2. Overview of QUnit API and Documentation

    main

    QUnit is a feature-rich JavaScript test framework. The documentation provides detailed information on the following core areas:

    • Main methods: Core QUnit functions for defining and running tests.
    • Assertions: Methods used to verify expected outcomes within tests.
    • Callback events: Hooks and events available during the test lifecycle.
    • Configuration options: Settings to customize QUnit behavior.
    • Reporters: Mechanisms for outputting test results.
    • Extension interface: How to build plugins or extend QUnit functionality.

  3. Overview of QUnit

    main
    QUnit is a powerful, easy-to-use JavaScript testing framework. Originally developed for jQuery, it is now used to test any client-side or server-side JavaScript code. It has no dependencies and supports all major desktop and mobile web browsers, Node.js, and SpiderMonkey.

  4. Use the HTML Reporter

    main
    The HTML Reporter provides a toolbar for filtering modules or tests, visualizes test results with diffs, and provides 'Rerun' links for individual tests. It is automatically enabled in browser environments if a <div id="qunit"> element is present on the page.

  6. Module Selector Improvements in QUnit 2.18.2

    main

    Starting from version 2.18.2, the QUnit module dropdown menu (typeahead field) has been redesigned for better performance, usability, and accessibility. Key improvements include:

    • Lazy Rendering: The module menu is now rendered only when the field is first focused, preventing startup delays in large test suites (e.g., suites with 800+ modules).
    • Instant Typeahead: The input debounce has been reduced to 0 ms, providing real-time filtering on every keystroke.
    • Improved Fuzzy Search: The 'threshold' option in the underlying fuzzysort.js engine has been disabled, allowing for more intuitive fuzzy matching (e.g., finding results even with minor typos).
    • Enhanced Accessibility: Improved keyboard navigation, better focus ring visibility, and hoisting currently selected choices to the top of the list.

  7. Cleaner stack traces in QUnit

    main

    Starting from QUnit 2.24.0, stack traces in the QUnit CLI and TAP reporter are automatically cleaned to improve readability.

    For assertion failures, QUnit rebases the stack trace to point directly at your test file by removing internal QUnit calls from the start and end of the trace.

    In Node.js environments, internal runtime calls (e.g., from node:internal/timers) are either:

    1. Removed entirely if they are the only frames remaining (e.g., when a test times out via assert.timeout()).
    2. Greyed out if they appear in the middle of a trace (e.g., when your code schedules a timer that later triggers an assertion), allowing you to focus on your own code while maintaining the actual call relationship.

  8. Get started with QUnit in the browser

    main

    QUnit is a standalone library that requires no runtime dependencies. To run tests in a browser, create an HTML file that loads qunit.js and qunit.css.

    For local or offline development, it is recommended to install or download QUnit within your project rather than using a CDN. Some integrations like Web Test Runner or Karma can automatically generate this HTML from your JS files.

    <!DOCTYPE html>
<meta charset="utf-8">
<title>QUnit</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.26.0.css">
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="https://code.jquery.com/qunit/qunit-2.26.0.js"></script>
  <!-- <script src="your_app.test.js"></script> -->
</body>
</html>

  9. Filter and select tests in the HTML Reporter

    main

    You can narrow down your test runs using the following UI components:

    Filter

    Use the search phrase input to re-run only tests that match the phrase. It performs a case-insensitive substring match on both module and test names. You can use regular expressions or invert the match to exclude specific tests.

    Module selector

    To quickly re-run specific modules:

    1. Select modules from the module selector dropdown.
    2. Use the input field for fuzzy matching (e.g., bor game will find awesome board games).
    3. Press "Apply".

    Note: Selecting a parent module will also run all its nested modules and their tests.

  10. Use async functions and Promises in QUnit event handlers

    main

    Starting with QUnit 2.8.0, core event handlers support async functions and functions that return Promises. This allows you to perform asynchronous setup or teardown tasks within the following lifecycle hooks:

    • QUnit.begin
    • QUnit.moduleStart
    • QUnit.testStart
    • QUnit.testDone
    • QUnit.moduleDone
    • QUnit.done

  12. Use automatic labels in QUnit.test.each()

    main
    In QUnit 2.23.0 and later, QUnit.test.each() automatically assigns labels to test cases when iterating over simple array values. This allows the data in your array to serve directly as the label for each individual test case, improving test report clarity without manual labeling.