• Core: Add QUnit.config.testFilter to programmatically filter tests. (NullVoxPopuli, Sebastian Gbudje) #1814

See also

• Git tag: 2.25.0

• CLI: Fix TAP compliance for test plan when using QUnit.test.only(). 4b87bc6aa5

See also

• Git tag: 2.24.3

• CLI: Fix TAP compliance for colon in unquoted YAML diag. dbc02fb9fe

See also

• Git tag: 2.24.2

In this post, we’ll walk you through a setup that allows you to integrate the latest versions of Sinon and QUnit into your SAPUI5 project, unlocking its latest features, superior type-safety, and a much-improved developer experience. Let’s get started! […]

(via @scntechblogs.marianzeis.de on Bluesky)

Test lifecycle

Why

An experienced developer will find that test hooks work more or less the same in every JavaScript unit test framework. The execution order is also intuitive enough that most people answer correctly when they guess. So why explain it?

You shouldn’t have to guess!

I think it’s worth laying out explicitly, even if this is not unique to QUnit, because a new developer is going to encounter this for the first time.

But more importantly, by demonstrating that the order is stable and guaranteed, I hope this gives you the confidence to lean into it. Build on it! The new Test lifecycle page showcases what’s possible when you depend on this with intent: Nesting hooks, sharing hooks, global hooks, and extending test context.

Thanks

Thanks to FND, Jan D, and NullVoxPopuli for reviewing, improving, and promoting this work!

See also

• QUnit.module()
• Issue #1358

• CLI: Fix TAP compliance for actual/expected indent and skip/todo colors. b4d48fc710
• CLI: Fix TAP compliance for early errors (e.g. syntax error in test file). 01f7780bd8
• Core: Add memory to late error event listeners, to improve reporting of early errors. 7c2f871ac3

See also

• Git tag: 2.24.1
• QUnit 2.24.0 Released: Add memory to the “runEnd” event

WebdriverIO QUnit Service now supports all sort of QUnit usage in SAP Fiori and UI5 apps! Whatever UI5/QUnit testing method you’re using, you can run it with wdio-qunit-service. All you need is a wdio.conf.js file. Have a look at an example: https://github.com/UI5/sample-app/pull/263

(via @mauriciolauffer on Bluesky)

• ✨ There is a new QUnit Blog. We’re also on Mastodon and Bluesky.
• 📗 There are new Guides, Support, and Chat sections.
  Including best practices and examples for async tests, callbacks, and event-based code.

Added

• CLI: Add .mjs and .cjs to the default file extensions when reading a test directory.

  These have been monitored by watch mode since QUnit 2.18, but were not loaded or executed unless you passed them as individual files, or used your own glob like test/*.{js,mjs,cjs}.

  If you currently pass a directory to the QUnit CLI and have matching .mjs or .cjs files that should not be executed, you can opt-out by passing test/*.js or test/**/*.js explicitly instead of test/.

• CLI: Add stacktrace cleaning by omitting or greying out internal QUnit and Node.js frames in TAP reporter. #1795. #1789

  Learn more about Cleaner stack traces on the QUnit Blog.

• Core: Add QUnit.config.reporters.tap for enabling TAP via preconfig. #1711
• Core: Add memory to the runEnd event to allow late listeners. This helps browser integrations that only relay a summary. 27a33d1593

Fixed

• HTML Reporter: Fix unexpected pointer cursor on “Source:” label. f8cce2bb06
• HTML Reporter: Faster “Hide passed” toggling on large test suites. b13ade0fd7

See also

• Git tag: 2.24.0
• Blog: Cleaner stack traces in QUnit

Background

QUnit has always omitted its own source lines from stack traces when showing assertion failures. ^[1]

This means we can report assertion failures with a stack that is just one level deep, pointing directly at your test file, to the line where the assertion happens.

QUnit.test('banana', function (assert) {
  const actual = 'This is actual.';
  assert.strictEqual(actual, 'This is expected.');
});

not ok 2 banana
  ---
  actual  : This is actual.
  expected: This is expected.
  stack: |
        at /test/example.js:3:10

The “real” stack trace is actually quite a bit longer, but we rebase it to become the trace to your assertion. We remove lines before your assertion point (i.e. QUnit calling your test function), and remove any calls after that point (i.e. code inside an assertion method).

This works well in browsers. But, when it comes to Node.js, we can do better!

Node.js runtime internals

Web browsers generally don’t expose their own internals to stack traces at all. For example, the internals of fetch(), or setTimeout(). ^[2] Node.js implements many of its internals in JavaScript, which are sometimes visible in a stack trace.

Let’s look at an example test:

QUnit.test('slow example', function (assert) {
  assert.timeout(100);

  const done = assert.async();
  // Never done()
});

Status quo with QUnit 2.23.1:

TAP version 13
not ok 1 slow example
  ---
  message: Test took longer than 100ms; test timed out.
  severity: failed
  stack: |
        at listOnTimeout (node:internal/timers:573:17)
        at process.processTimers (node:internal/timers:514:7)
  ...
1..1
# pass 0
# skip 0
# todo 0
# fail 1

Notice the function calls inside the virtual note:internal module?

Hide internal frames

While these functions are not called inside QUnit, we hide them because this timer is scheduled by QUnit. In this case, there are no other stack frames and we can omit the trace entirely, for an even cleaner result. The same result in QUnit 2.24.0:

TAP version 13
not ok 1 slow example
  ---
  message: Test took longer than 100ms; test timed out.
  severity: failed
  ...
1..1
# pass 0
# skip 0
# todo 0
# fail 1

Grey out Node.js internals

Let’s look at a slightly more involved example, where your own code schedules a timer.

QUnit.test('assert example', function (assert) {
  const done = assert.async();
  setTimeout(function () {
    assert.false(true, 'hello');
    done();
  });
});

In this case, we can’t remove any frames. We should report errors from user code with the same level of detail as Node.js would, if you ran it outside a test. But, what we can do is grey out these node:internal frames, and draw attention to what is most likely of interest.

Uncaught exceptions

The above examples were about stack traces that originate from inside a test case.

We also format stack traces when reporting uncaught exceptions (a.k.a. “global failure”). This includes errors that bubble up to window.onerror or process.on('uncaughtException', …), as received by QUnit.onUncaughtException.

As of QUnit 2.24 we now apply the same stack trace cleaner when formatting uncaught exceptions.

// example.js
QUnit.on(null);

qunit example.js

Notice the removal of the first Object.on (qunit/qunit.js) line, so that the trace starts cleanly at your example.js file. The other internal calls are greyed out.

Trimming traces

For both assertion failures and uncaught exceptions, we only trim internal frames from the start or end of a stack. Removing frames from the middle would falsely present a call relationship that never happened, and would cause confusion among developers. Instead, frames we can’t trim, are greyed out. This works similar to Node.js’ error handler.

TAP reporter

These changes are applied to the TAP reporter, which the QUnit CLI uses by default. If you use the TAP reporter in browser environments, the same improvements apply there as well.

See also

• Exclude or grey internal frames in error stacks · Pull Request #1789
• Apply trace cleaning to assertion stack as well · Pull Request #1795
• Remove confusing “expected: undefined” under errors · Pull Request #1794
• Limit colors in TAP reporter to test names · Pull Request #1801
• QUnit 2.23.1 Release
• QUnit 2.24.0 Release

Footnotes

Changelog

Fixed

• CLI: Fix support for strict TAP parsers by limiting colors to test names. #1801
• CLI: Fix confusing --seed option eating the file argument. #1691
• CLI: Remove confusing expected: undefined under error messages in TAP reporter. #1794
• HTML Reporter: Fix broken “Rerun without max depth” link. da0c59e101 (see also 91db92dbc5, 73c03cf277)
• HTML Reporter: Fix <label> to wrap <select> for multi-value urlConfig item. #1773

See also

• Git tag: 2.23.1