jQuery Test Runner
The jQuery Test Runner (jtr) is a specialized command-line interface (CLI) tool developed by the jQuery team to execute QUnit test suites across real browsers. It leverages Selenium for browser automation and integrates with BrowserStack for running tests in cloud-based environments. Currently at version 0.3.0, the project shows an active development cadence, with frequent minor releases and bug fixes addressing issues like Selenium driver compatibility (e.g., Safari Technology Preview, IE), console forwarding in JSDOM, and reporting improvements. Its key differentiator is its focus on reliable, real-browser QUnit testing, particularly useful for projects requiring broad browser compatibility testing without relying solely on headless environments.
Common errors
-
WebDriverError: session not created: This version of ChromeDriver only supports Chrome version XX
cause Incompatibility between your installed Chrome browser version and the ChromeDriver version used by Selenium.fixUpdate ChromeDriver to match your Chrome browser version, or update Chrome. -
Error: connect ECONNREFUSED 127.0.0.1:4444
cause Selenium server (WebDriver hub) is not running or is not accessible at the specified address and port.fixStart your Selenium WebDriver server or ensure `selenium.host` and `selenium.port` in your configuration are correct. -
Error: Could not connect to BrowserStack Local. Please check your network or proxy settings.
cause BrowserStack Local daemon failed to start or connect, often due to network issues, firewall, or incorrect local setup.fixVerify network connectivity, check firewall rules, and ensure BrowserStack Local is correctly installed and configured. Try running `BrowserStackLocal.exe` manually to debug. -
MIME type ('text/plain') is not a supported stylesheet MIME type, and stylesheet will be ignored.cause Incorrect MIME type served for JavaScript files, preventing browser from executing scripts, particularly in older browsers or strict environments.fixUpgrade to `jquery-test-runner` version `0.3.0` or newer, which includes a fix for the `.js` MIME type.
Warnings
- breaking The `sendTo( console )` method for forwarding console messages in JSDOM environments has been renamed to `forwardTo`. Code relying on the old method will fail.
- gotcha Running tests in real browsers via Selenium requires appropriate WebDriver installations (e.g., Chromedriver, Geckodriver) or active cloud service configurations (BrowserStack credentials). Misconfigured drivers or credentials will prevent tests from running.
- gotcha Older versions might not fully report QUnit global errors. Ensure `jquery-test-runner` is updated for comprehensive reporting.
- gotcha Safari Technology Preview support was added in version 0.3.0. If you require testing in STP, you must be on this version or higher.
Install
-
npm install jquery-test-runner -
yarn add jquery-test-runner -
pnpm add jquery-test-runner
Imports
- run
const { run } = require('jquery-test-runner');import { run } from 'jquery-test-runner/lib/commands/run'; - createTestServer
import createTestServer from 'jquery-test-runner/lib/server';
import { createTestServer } from 'jquery-test-runner/lib/server'; - TestRunner
const TestRunner = require('jquery-test-runner').TestRunner;import { TestRunner } from 'jquery-test-runner/lib/testrunner';
Quickstart
const { spawn } = require('child_process');
const path = require('path');
const fs = require('fs');
// Create a dummy QUnit test file for demonstration
const testFilePath = path.join(__dirname, 'tests', 'example.js');
const testHtmlPath = path.join(__dirname, 'tests', 'index.html');
fs.mkdirSync(path.dirname(testFilePath), { recursive: true });
fs.writeFileSync(testFilePath, `
QUnit.module('My Example Module');
QUnit.test('should assert true', function(assert) {
assert.ok(true, 'true is truthy');
});
`);
fs.writeFileSync(testHtmlPath, `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.20.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.20.0.js"></script>
<script src="example.js"></script>
</body>
</html>
`);
console.log('Starting jQuery Test Runner...');
// IMPORTANT: Ensure you have a ChromeDriver installed and in your PATH,
// or specify BrowserStack credentials (e.g., via environment variables).
// Example for BrowserStack:
// process.env.BROWSERSTACK_USERNAME = process.env.BROWSERSTACK_USERNAME ?? '';
// process.env.BROWSERSTACK_ACCESS_KEY = process.env.BROWSERSTACK_ACCESS_KEY ?? '';
const jtrProcess = spawn('jtr', [
'run',
'--url', 'http://localhost:8000/tests/index.html', // URL to your test HTML file
'--browser', 'chrome', // Specify the browser to use (e.g., 'chrome', 'firefox', 'safari', 'ie')
'--reporters', 'console',
'--test-timeout', '30000', // Max time for a test to complete
'--serve', '8000', // Serve local files from the current directory on port 8000
'--cwd', __dirname // Set current working directory for file serving
], { stdio: 'inherit' });
jtrProcess.on('close', (code) => {
if (code === 0) {
console.log('jQuery Test Runner completed successfully.');
} else {
console.error(`jQuery Test Runner exited with code ${code}.`);
process.exit(1);
}
// Clean up dummy files
fs.rmSync(path.join(__dirname, 'tests'), { recursive: true, force: true });
});