react-qunit

v0.0.2

Published

7 days ago

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. Th

0High
0Medium
0Low

apatz

React QUnit

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.

Installation

pnpm install react-qunit qunit qunit-dom

Setup

// 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');
  });
});

Running the app in qunit mode

Run pnpm dev:qunit for the harnessed QUnit version of the app.

Test helpers

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

React QUnit

Installation

Setup

Running the app in qunit mode

Test helpers