Rendering Tests

setupRenderingTest plus render(hbs) is the fastest way to test component output and interactions.

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

What you'll learn

Use setupRenderingTest
Call render with an hbs template literal
Use test-helpers like click, fillIn, and assert.dom

Rendering tests mount a single component into a test container and let you interact with the resulting DOM. They are fast, focused, and the layer you will write most often.

Render and Assert

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

module('Integration | Component | my-card', function (hooks) {
  setupRenderingTest(hooks);

  test('shows the title', async function (assert) {
    await render(hbs`<MyCard @title="Hi" />`);
    assert.dom('h2').hasText('Hi');
  });
});

hbs is a tagged template literal — you write the same syntax you would write in a real .hbs file.

Interactions

@ember/test-helpers ships click, fillIn, select, blur, focus, etc:

import { render, click, fillIn } from '@ember/test-helpers';

test('signup form', async function (assert) {
  await render(hbs`<SignupForm />`);

  await fillIn('input[name=email]', 'a@b.co');
  await click('button[type=submit]');

  assert.dom('[data-test-toast]').hasText('Welcome!');
});

Every helper is awaitable — Ember waits for the run loop to settle before resolving.

Passing State

test('renders user', async function (assert) {
  this.set('user', { name: 'Ada' });
  await render(hbs`<UserChip @user={{this.user}} />`);
  assert.dom('.name').hasText('Ada');
});

this.set writes onto the test context — the template reads it back via this.user.

Application (Acceptance) Tests →