diff --git a/packages/calcite-components/src/components/functional/Heading.spec.tsx b/packages/calcite-components/src/components/functional/Heading.spec.tsx
index 888bec6d0de..4dc1befea3d 100644
--- a/packages/calcite-components/src/components/functional/Heading.spec.tsx
+++ b/packages/calcite-components/src/components/functional/Heading.spec.tsx
@@ -1,5 +1,4 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
+import { h, VNode } from "@stencil/core";
import { constrainHeadingLevel, Heading } from "./Heading";
describe("constrainHeadingLevel", () => {
@@ -13,26 +12,55 @@ describe("constrainHeadingLevel", () => {
});
});
-describe("Heading", () => {
- it("should render", async () => {
- const page = await newSpecPage({
- components: [],
- template: () => (
-
- My Heading
-
+/**
+ * simple VNode assertion util to help get rid of newSpecPage usage
+ *
+ * @param vnode
+ * @param expected
+ * @param expected.tag
+ * @param expected.attrs
+ * @param expected.children
+ */
+function assertVNode(
+ vnode: VNode,
+ expected: {
+ tag: string;
+ attrs: Record;
+ children: (VNode | string)[];
+ },
+) {
+ expect(vnode).toEqual(
+ expect.objectContaining({
+ $tag$: expected.tag,
+ $attrs$: expect.objectContaining(expected.attrs),
+ $children$: expected.children.map((child) =>
+ typeof child === "string"
+ ? expect.objectContaining({ $text$: child })
+ : expect.objectContaining(child),
),
- });
+ }),
+ );
+}
- expect(page.root).toEqualHtml(`My Heading
`);
+describe("Heading", () => {
+ it("should render", async () => {
+ assertVNode(
+
+ My Heading
+ ,
+ {
+ tag: "h1",
+ attrs: { class: "test" },
+ children: ["My Heading"],
+ },
+ );
});
it("should render a div", async () => {
- const page = await newSpecPage({
- components: [],
- template: () => My Heading,
+ assertVNode(My Heading, {
+ tag: "div",
+ attrs: { class: "test" },
+ children: ["My Heading"],
});
-
- expect(page.root).toEqualHtml(`My Heading
`);
});
});