QUnit Basics

QUnit is the default Ember test framework. Three primitives — module, test, and assert — and a rich set of DOM assertions via qunit-dom.

4 min read Level 2/5 #ember#testing#qunit

What you'll learn

Use module and test to group cases
Assert with strictEqual, ok, true, and deepEqual
Use qunit-dom assertions like assert.dom().hasText

QUnit is the test framework that ships with Ember. The API is intentionally tiny — module, test, and an assert object that you receive per test.

Module + Test

import { module, test } from 'qunit';

module('math utils', function (hooks) {
  hooks.beforeEach(function () {
    this.context = makeContext();
  });

  test('adds positive numbers', function (assert) {
    assert.strictEqual(add(2, 3), 5);
  });

  test('handles zero', function (assert) {
    assert.strictEqual(add(0, 0), 0);
  });
});

module groups tests; hooks exposes beforeEach, afterEach, before, after.

Core Assertions

assert.strictEqual(actual, expected);
assert.deepEqual({ a: 1 }, { a: 1 });
assert.ok(value);            // truthy
assert.notOk(value);         // falsy
assert.true(value);          // === true
assert.false(value);         // === false
assert.throws(() => boom());

qunit-dom Assertions

Bundled with new Ember apps. assert.dom(selector) returns a chainable matcher:

assert.dom('h1').exists();
assert.dom('h1').hasText('Welcome');
assert.dom('button').hasClass('primary').isNotDisabled();
assert.dom('input[name=email]').hasValue('a@b.co');

Expecting a Count

test('fires once', function (assert) {
  assert.expect(1);
  button.addEventListener('click', () => assert.step('clicked'));
  button.click();
  assert.verifySteps(['clicked']);
});

assert.expect(n) declares how many assertions must run — guards against async tests that finish early.

FastBoot — SSR for Ember →