Manual:JavaScript unit testing

MediaWiki's QUnit test suite running in Chrome.

MediaWiki uses QUnit to unit test its JavaScript code base.

Run from a browser

1. Set $wgEnableJavaScriptTest to true. (This is already set if you use MediaWiki-Docker-Dev or MediaWiki-Vagrant.)
2. Visit Special:JavaScriptTest in a browser to run the tests.

Run from the command line

Getting started

1. Enter an isolated environment where you have Node.js and npm installed. Why?
   • For MediaWiki-Vagrant, ssh to your Vagrant VM.
   • For MDD or other, consider Fresh. Run fresh-node -net -env.
2. Run npm ci from the MediaWiki directory.

Run

This runs the QUnit tests in Headless Chrome and prints the results.

$ npm run qunit

Running "karma:main" (karma) task
START:
INFO [launcher]: Starting browser ChromeHeadless
…
mediawiki.util
    ✔ escapeRegExp
    ✔ debounce
…
Finished in 5.659 secs / 5.442 secs

SUMMARY:
✔ 440 tests completed

Done.

How to help?

Run tests before committing

Make it a habit to run unit tests before committing and submitting your changes to Gerrit.

Write unit tests

Always write unit tests for new functionality. We're also looking to expand our unit test coverage of already existing modules in the MediaWiki JavaScript library.

Write a test

It is the convention to name the test suite file after the module it covers. For example, mediawiki.user.test.js covers the mediawiki.user module.

Inside the test suite should be one, and only one, call to QUnit.module with the module name.

The unit tests for MediaWiki core are located in the tests/qunit/suites directory.

Register a test

MediaWiki core

Test suites are added to the registration of the mediawiki.tests.qunit.suites module in /tests/qunit/QUnitTestResources.php.

Tests are organised into a directory structure that matches the directory structure of the code being tested. For example: The unit test for resources/mediawiki.util/mediawiki.util.js can be found at tests/qunit/suites/resources/mediawiki.util/mediawiki.util.test.js.

Example:

 'mediawiki.tests.qunit.suites' => array(
 	'scripts' => array(
 		'tests/qunit/suites/resources/mediawiki/mediawiki.test.js',
+		'tests/qunit/suites/resources/mediawiki/mediawiki.example.test.js',
 		'tests/qunit/suites/resources/mediawiki/mediawiki.user.test.js',
 		'tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js',
 	),
 	'dependencies' => array(
 		'mediawiki',
+		'mediawiki.example',
 		'mediawiki.user',
 		'mediawiki.util',

Extensions

Extensions register their QUnit tests via the ResourceLoaderTestModules hook.

See also

• Manual:Hooks/ResourceLoaderTestModules
• Manual:JavaScript unit testing/QUnit guidelines
• Writing Testable JavaScript (May 2013), Rebecca Murphey, A List Apart