diff --git a/test/javascripts/integration/components/payment-options-test.gjs b/test/javascripts/integration/components/payment-options-test.gjs
new file mode 100644
index 0000000..28b9804
--- /dev/null
+++ b/test/javascripts/integration/components/payment-options-test.gjs
@@ -0,0 +1,53 @@
+import { tracked } from "@glimmer/tracking";
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import PaymentOptions from "discourse/plugins/discourse-subscriptions/discourse/components/payment-options";
+
+module("Subscriptions | payment-options", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("payment options have no plans", async function (assert) {
+    await render(<template><PaymentOptions @plans={{false}} /></template>);
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe")
+      .doesNotExist("The plan buttons are not shown");
+  });
+
+  test("payment options has content", async function (assert) {
+    const plans = [
+      {
+        currency: "aud",
+        recurring: { interval: "year" },
+        amountDollars: "44.99",
+      },
+      {
+        currency: "gdp",
+        recurring: { interval: "month" },
+        amountDollars: "9.99",
+      },
+    ];
+
+    class State {
+      @tracked selectedPlan;
+    }
+
+    const testState = new State();
+
+    await render(<template>
+      <PaymentOptions
+        @plans={{plans}}
+        @selectedPlan={{testState.selectedPlan}}
+      />
+    </template>);
+
+    assert.dom(".btn-discourse-subscriptions-subscribe").exists({ count: 2 });
+
+    assert.strictEqual(
+      this.selectedPlan,
+      undefined,
+      "No plans are selected by default"
+    );
+  });
+});
diff --git a/test/javascripts/integration/components/payment-options-test.js b/test/javascripts/integration/components/payment-options-test.js
deleted file mode 100644
index 37b583b..0000000
--- a/test/javascripts/integration/components/payment-options-test.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import hbs from "htmlbars-inline-precompile";
-import componentTest, {
-  setupRenderingTest,
-} from "discourse/tests/helpers/component-test";
-import { count, discourseModule } from "discourse/tests/helpers/qunit-helpers";
-
-discourseModule("Subscriptions | payment-options", function (hooks) {
-  setupRenderingTest(hooks);
-
-  componentTest("payment options have no plans", {
-    template: hbs`{{payment-options plans=plans}}`,
-
-    async test(assert) {
-      this.set("plans", false);
-
-      assert.strictEqual(
-        count(".btn-discourse-subscriptions-subscribe"),
-        0,
-        "The plan buttons are not shown"
-      );
-    },
-  });
-
-  componentTest("payment options has content", {
-    template: hbs`{{payment-options
-      plans=plans
-      selectedPlan=selectedPlan
-    }}`,
-
-    beforeEach() {
-      this.set("plans", [
-        {
-          currency: "aud",
-          recurring: { interval: "year" },
-          amountDollars: "44.99",
-        },
-        {
-          currency: "gdp",
-          recurring: { interval: "month" },
-          amountDollars: "9.99",
-        },
-      ]);
-    },
-
-    async test(assert) {
-      assert.strictEqual(
-        this.selectedPlan,
-        undefined,
-        "No plans are selected by default"
-      );
-    },
-  });
-});
diff --git a/test/javascripts/integration/components/payment-plan-test.gjs b/test/javascripts/integration/components/payment-plan-test.gjs
new file mode 100644
index 0000000..bfd08c7
--- /dev/null
+++ b/test/javascripts/integration/components/payment-plan-test.gjs
@@ -0,0 +1,57 @@
+import { tracked } from "@glimmer/tracking";
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import PaymentPlan from "discourse/plugins/discourse-subscriptions/discourse/components/payment-plan";
+
+module("Subscriptions | payment-plan", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("Payment plan subscription button rendered", async function (assert) {
+    const plan = {
+      type: "recurring",
+      currency: "aud",
+      recurring: { interval: "year" },
+      amountDollars: "44.99",
+    };
+    let selectedPlan;
+
+    await render(<template>
+      <PaymentPlan @plan={{plan}} @selectedPlan={{selectedPlan}} />
+    </template>);
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe")
+      .exists("The payment button is shown");
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe:first-child .interval")
+      .hasText("Yearly", "The plan interval is shown -- Yearly");
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe:first-child .amount")
+      .hasText("$44.99", "The plan amount and currency is shown");
+  });
+
+  test("Payment plan one-time-payment button rendered", async function (assert) {
+    const plan = {
+      type: "one_time",
+      currency: "USD",
+      amountDollars: "3.99",
+    };
+
+    class State {
+      @tracked selectedPlan;
+    }
+
+    const testState = new State();
+
+    await render(<template>
+      <PaymentPlan @plan={{plan}} @selectedPlan={{testState.selectedPlan}} />
+    </template>);
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe:first-child .interval")
+      .hasText("One-Time Payment", "Shown as one time payment");
+  });
+});
diff --git a/test/javascripts/integration/components/payment-plan-test.js b/test/javascripts/integration/components/payment-plan-test.js
deleted file mode 100644
index dcc3f6e..0000000
--- a/test/javascripts/integration/components/payment-plan-test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import hbs from "htmlbars-inline-precompile";
-import componentTest, {
-  setupRenderingTest,
-} from "discourse/tests/helpers/component-test";
-import {
-  count,
-  discourseModule,
-  query,
-} from "discourse/tests/helpers/qunit-helpers";
-
-discourseModule("Subscriptions | payment-plan", function (hooks) {
-  setupRenderingTest(hooks);
-
-  componentTest("Payment plan subscription button rendered", {
-    template: hbs`{{payment-plan
-      plan=plan
-      selectedPlan=selectedPlan
-    }}`,
-
-    beforeEach() {
-      this.set("plan", {
-        type: "recurring",
-        currency: "aud",
-        recurring: { interval: "year" },
-        amountDollars: "44.99",
-      });
-    },
-
-    async test(assert) {
-      assert.strictEqual(
-        count(".btn-discourse-subscriptions-subscribe"),
-        1,
-        "The payment button is shown"
-      );
-
-      assert.strictEqual(
-        query(
-          ".btn-discourse-subscriptions-subscribe:first-child .interval"
-        ).innerText.trim(),
-        "Yearly",
-        "The plan interval is shown -- Yearly"
-      );
-
-      assert.strictEqual(
-        query(
-          ".btn-discourse-subscriptions-subscribe:first-child .amount"
-        ).innerText.trim(),
-        "$44.99",
-        "The plan amount and currency is shown"
-      );
-    },
-  });
-
-  componentTest("Payment plan one-time-payment button rendered", {
-    template: hbs`{{payment-plan
-      plan=plan
-      selectedPlan=selectedPlan
-    }}`,
-
-    beforeEach() {
-      this.set("plan", {
-        type: "one_time",
-        currency: "USD",
-        amountDollars: "3.99",
-      });
-    },
-
-    async test(assert) {
-      assert.strictEqual(
-        query(
-          ".btn-discourse-subscriptions-subscribe:first-child .interval"
-        ).innerText.trim(),
-        "One-Time Payment",
-        "Shown as one time payment"
-      );
-    },
-  });
-});