A lightweight library for writing QUnit acceptance tests for React applications that run directly in the browser. It provides intuitive async test helpers (visit, click, fillIn, waitFor, etc.) and integrates with qunit-dom for DOM assertions. The pauseTest() function lets you pause a running test mid-flight and inspect the live UI in the browser, making it especially useful for prototyping and interactive debugging. You can then run resumeTest() from the developer console to continue test execution.
This library is based on https://github.com/emberjs/ember-qunit and is also useful for migrating from Ember to React, while keeping application level tests as they are.
pnpm install react-qunit qunit qunit-dom
// vite.config.qunit.js or vite.config.qunit.ts
import { mergeConfig } from 'vite';
import baseConfig from './vite.config';
export default mergeConfig(baseConfig, {
root: './src/tests',
});Add the following to scripts in package.json.
"dev:qunit": "vite --config vite.config.qunit.js",
Add a test helper file
// ./src/tests/test-helper.js
import 'react-qunit/setup-test-helper';
import { start } from 'react-qunit';
// Import main.jsx / main.tsx
import '../main.jsx';
// Import test files
import './qunit/basic-test.js';
start();Add a QUnit harnessed index.html root file.
<!-- ./src/tests/index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
href="/favicon.ico"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>QUnit</title>
</head>
<body>
<div id="qunit"></div>
<div id="react-testing-container">
<div id="react-testing">
<div id="root"></div>
</div>
</div>
<script
type="module"
src="./test-helper.js"
></script>
</body>
</html>Create a test module
// ./src/tests/qunit/basic-test.js
import { visit, click, waitFor } from 'react-qunit/test-helpers';
import { module, test } from 'qunit';
import { setupApplicationTest } from 'react-qunit';
module('Basic module', function (hooks) {
setupApplicationTest(hooks);
test('Basic test', async function (assert) {
await this.pauseTest();
assert.ok(true, 'This test should pass');
});
});Run pnpm dev:qunit for the harnessed QUnit version of the app.
A set of async helpers for interacting with and querying the DOM in tests — covering navigation, user input, waiting, and more.
See the API docs for the full reference.