DEV Community

Cover image for How to use the new Ember theme for QUnit
Ignace Maes
Ignace Maes

Posted on β€’ Edited on β€’ Originally published at blog.ignacemaes.com

2

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 ember-qunit, 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
Enter fullscreen mode Exit fullscreen mode

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

pnpm install -D ember-qunit@^8.1.0
Enter fullscreen mode Exit fullscreen mode

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

pnpm install -D @embroider/macros
Enter fullscreen mode Exit fullscreen mode

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

  // ...
};
Enter fullscreen mode Exit fullscreen mode

And that's it πŸŽ‰

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

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay