How to use the new Ember theme for QUnit

The integrated web UI test runner in Ember is a convenient way to run your tests. If you’ve been using the default QUnit theme, it might not surprise you that it was designed over ten years ago.

As of the latest release of qunit-ember, support for theming has been added. The qunit-theme-ember, a modern theme based on the Ember styleguide, has been included as a built-in option. Here’s how to enable it in your app:

First, create an Ember app if you haven’t already.

npx ember-cli new example-app --embroider --pnpm

If you already have an app, make sure qunit-ember version 8.1.0 or above is used as dependency.

pnpm install -D ember-qunit@^8.1.0

Next, install @embroider/macros to be able to pass configuration options to ember-qunit.

pnpm install -D @embroider/macros

Now configuration options can be set in the ember-cli-build.js file. Add the following to the file:

module.exports = function (defaults) {
 const app = new EmberApp(defaults, { // Add options here
+ '@embroider/macros': {
+ setConfig: {
+ 'ember-qunit': {
+ theme: 'ember',
+ },
+ },
+ },
 });

 // ...
};

And that’s it 🎉

Simply restart your dev server and go to http://localhost:4200/tests to see it in action.