diff --git a/app/assets/javascripts/discourse/tests/acceptance/custom-html-template-test.js b/app/assets/javascripts/discourse/tests/acceptance/custom-html-template-test.js
index ce10631ae92..898910299e2 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/custom-html-template-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/custom-html-template-test.js
@@ -3,12 +3,11 @@ import { visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import Ember from "ember";
+import hbs from "htmlbars-inline-precompile";
 
 acceptance("CustomHTML template", function (needs) {
   needs.hooks.beforeEach(() => {
-    Ember.TEMPLATES["top"] = Ember.HTMLBars.compile(
-      `<span class='top-span'>TOP</span>`
-    );
+    Ember.TEMPLATES["top"] = hbs`<span class='top-span'>TOP</span>`;
   });
   needs.hooks.afterEach(() => {
     delete Ember.TEMPLATES["top"];
diff --git a/app/assets/javascripts/discourse/tests/acceptance/modal-test.js b/app/assets/javascripts/discourse/tests/acceptance/modal-test.js
index 2ddea16a25b..f0d4f15fc04 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/modal-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/modal-test.js
@@ -8,6 +8,7 @@ import {
   controllerFor,
 } from "discourse/tests/helpers/qunit-helpers";
 import showModal from "discourse/lib/show-modal";
+import hbs from "htmlbars-inline-precompile";
 
 acceptance("Modal", function (needs) {
   let _translations;
@@ -60,9 +61,9 @@ acceptance("Modal", function (needs) {
       "ESC should close the modal"
     );
 
-    Ember.TEMPLATES["modal/not-dismissable"] = Ember.HTMLBars.compile(
-      '{{#d-modal-body title="" class="" dismissable=false}}test{{/d-modal-body}}'
-    );
+    Ember.TEMPLATES[
+      "modal/not-dismissable"
+    ] = hbs`{{#d-modal-body title="" class="" dismissable=false}}test{{/d-modal-body}}`;
 
     run(() => showModal("not-dismissable", {}));
 
@@ -81,7 +82,7 @@ acceptance("Modal", function (needs) {
   });
 
   test("rawTitle in modal panels", async function (assert) {
-    Ember.TEMPLATES["modal/test-raw-title-panels"] = Ember.HTMLBars.compile("");
+    Ember.TEMPLATES["modal/test-raw-title-panels"] = hbs``;
     const panels = [
       { id: "test1", rawTitle: "Test 1" },
       { id: "test2", rawTitle: "Test 2" },
@@ -98,10 +99,10 @@ acceptance("Modal", function (needs) {
   });
 
   test("modal title", async function (assert) {
-    Ember.TEMPLATES["modal/test-title"] = Ember.HTMLBars.compile("");
-    Ember.TEMPLATES["modal/test-title-with-body"] = Ember.HTMLBars.compile(
-      "{{#d-modal-body}}test{{/d-modal-body}}"
-    );
+    Ember.TEMPLATES["modal/test-title"] = hbs``;
+    Ember.TEMPLATES[
+      "modal/test-title-with-body"
+    ] = hbs`{{#d-modal-body}}test{{/d-modal-body}}`;
 
     await visit("/");
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-connector-class-test.js b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-connector-class-test.js
index 5d72aada13d..fe8db8b1258 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-connector-class-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-connector-class-test.js
@@ -4,6 +4,7 @@ import { test } from "qunit";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import { extraConnectorClass } from "discourse/lib/plugin-connectors";
 import { action } from "@ember/object";
+import hbs from "htmlbars-inline-precompile";
 
 const PREFIX = "javascripts/single-test/connectors";
 
@@ -45,20 +46,16 @@ acceptance("Plugin Outlet - Connector Class", function (needs) {
 
     Ember.TEMPLATES[
       `${PREFIX}/user-profile-primary/hello`
-    ] = Ember.HTMLBars.compile(
-      `<span class='hello-username'>{{model.username}}</span>
+    ] = hbs`<span class='hello-username'>{{model.username}}</span>
         <button class='say-hello' {{action "sayHello"}}></button>
-        <span class='hello-result'>{{hello}}</span>`
-    );
+        <span class='hello-result'>{{hello}}</span>`;
     Ember.TEMPLATES[
       `${PREFIX}/user-profile-primary/hi`
-    ] = Ember.HTMLBars.compile(
-      `<button class='say-hi' {{action "sayHi"}}></button>
-        <span class='hi-result'>{{hi}}</span>`
-    );
+    ] = hbs`<button class='say-hi' {{action "sayHi"}}></button>
+        <span class='hi-result'>{{hi}}</span>`;
     Ember.TEMPLATES[
       `${PREFIX}/user-profile-primary/dont-render`
-    ] = Ember.HTMLBars.compile(`I'm not rendered!`);
+    ] = hbs`I'm not rendered!`;
   });
 
   needs.hooks.afterEach(() => {
diff --git a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-decorator-test.js b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-decorator-test.js
index 2a7c843c3bf..bb331928bc6 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-decorator-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-decorator-test.js
@@ -4,6 +4,7 @@ import { visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import { withPluginApi } from "discourse/lib/plugin-api";
+import hbs from "htmlbars-inline-precompile";
 
 const PREFIX = "javascripts/single-test/connectors";
 
@@ -11,12 +12,8 @@ acceptance("Plugin Outlet - Decorator", function (needs) {
   needs.user();
 
   needs.hooks.beforeEach(() => {
-    Ember.TEMPLATES[
-      `${PREFIX}/discovery-list-container-top/foo`
-    ] = Ember.HTMLBars.compile("FOO");
-    Ember.TEMPLATES[
-      `${PREFIX}/discovery-list-container-top/bar`
-    ] = Ember.HTMLBars.compile("BAR");
+    Ember.TEMPLATES[`${PREFIX}/discovery-list-container-top/foo`] = hbs`FOO`;
+    Ember.TEMPLATES[`${PREFIX}/discovery-list-container-top/bar`] = hbs`BAR`;
 
     withPluginApi("0.8.38", (api) => {
       api.decoratePluginOutlet(
diff --git a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-multi-template-test.js b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-multi-template-test.js
index 80ead275a17..9402f7e4755 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-multi-template-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-multi-template-test.js
@@ -3,6 +3,7 @@ import { visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import { clearCache } from "discourse/lib/plugin-connectors";
+import hbs from "htmlbars-inline-precompile";
 
 const HELLO = "javascripts/multi-test/connectors/user-profile-primary/hello";
 const GOODBYE =
@@ -11,12 +12,8 @@ const GOODBYE =
 acceptance("Plugin Outlet - Multi Template", function (needs) {
   needs.hooks.beforeEach(() => {
     clearCache();
-    Ember.TEMPLATES[HELLO] = Ember.HTMLBars.compile(
-      `<span class='hello-span'>Hello</span>`
-    );
-    Ember.TEMPLATES[GOODBYE] = Ember.HTMLBars.compile(
-      `<span class='bye-span'>Goodbye</span>`
-    );
+    Ember.TEMPLATES[HELLO] = hbs`<span class='hello-span'>Hello</span>`;
+    Ember.TEMPLATES[GOODBYE] = hbs`<span class='bye-span'>Goodbye</span>`;
   });
 
   needs.hooks.afterEach(() => {
diff --git a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-single-template-test.js b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-single-template-test.js
index 3915cad663a..1455360174b 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-single-template-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/plugin-outlet-single-template-test.js
@@ -2,15 +2,16 @@ import { queryAll } from "discourse/tests/helpers/qunit-helpers";
 import { visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
+import hbs from "htmlbars-inline-precompile";
 
 const CONNECTOR =
   "javascripts/single-test/connectors/user-profile-primary/hello";
 
 acceptance("Plugin Outlet - Single Template", function (needs) {
   needs.hooks.beforeEach(() => {
-    Ember.TEMPLATES[CONNECTOR] = Ember.HTMLBars.compile(
-      `<span class='hello-username'>{{model.username}}</span>`
-    );
+    Ember.TEMPLATES[
+      CONNECTOR
+    ] = hbs`<span class='hello-username'>{{model.username}}</span>`;
   });
 
   needs.hooks.afterEach(() => {
diff --git a/app/assets/javascripts/test-shims.js b/app/assets/javascripts/test-shims.js
index da575b1e6d3..f7beba796db 100644
--- a/app/assets/javascripts/test-shims.js
+++ b/app/assets/javascripts/test-shims.js
@@ -17,6 +17,14 @@ define("ember-qunit", () => {
     moduleForComponent: window.moduleForComponent,
   };
 });
+define("htmlbars-inline-precompile", () => {
+  return {
+    default: function (str) {
+      return Ember.HTMLBars.compile(str[0]);
+    },
+  };
+});
+
 let _app;
 define("@ember/test-helpers", () => {
   let helpers = {