diff --git a/client/src/components/WorkflowInvocationState/JobStep.test.js b/client/src/components/WorkflowInvocationState/JobStep.test.js
index a22ad555d243..b11420459940 100644
--- a/client/src/components/WorkflowInvocationState/JobStep.test.js
+++ b/client/src/components/WorkflowInvocationState/JobStep.test.js
@@ -51,14 +51,29 @@ describe("DatasetUIWrapper.vue with Dataset", () => {
         expect(wrapper.vm.toggledItems["1"]).toBeTruthy();
         expect(wrapper.find(".expanded").exists()).toBeTruthy();
         // 2 collapsed rows, plus 1 expanded row
-        expect(wrapper.find("tbody").findAll("tr").length).toBe(3);
+        expect(countVisibleRows(wrapper)).toBe(3);
         // update data
         const additionalJob = { ...jobs[0], id: 3 };
         await wrapper.setProps({ jobs: [...jobs, additionalJob] });
         // verify new data is displayed
-        expect(wrapper.find("tbody").findAll("tr").length).toBe(4);
+        expect(countVisibleRows(wrapper)).toBe(4);
         // verify first row is still expanded
         expect(wrapper.vm.toggledItems["1"]).toBeTruthy();
         expect(wrapper.find(".expanded").exists()).toBeTruthy();
     });
 });
+
+/** When expanding a row, a hidden `<tr>` may be added like:
+ * ```
+ * <tr aria-hidden="true" role="presentation" class="d-none"></tr>
+ * ```
+ * and this function will count rows other than these hidden ones.
+ */
+function countVisibleRows(wrapper) {
+    const rows = wrapper.find("tbody").find("tbody").findAll("tr");
+    const visibleRows = rows.filter((row) => {
+        // only count rows that are not hidden
+        return !(row.attributes("aria-hidden") && row.attributes("aria-hidden") === "true");
+    });
+    return visibleRows.length;
+}
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
index eafa5a84b1a0..555e69030b0d 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
@@ -1,3 +1,4 @@
+import { createTestingPinia } from "@pinia/testing";
 import { shallowMount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
@@ -15,10 +16,12 @@ describe("WorkflowInvocationSummary.vue with terminal invocation", () => {
             invocation: invocationData,
             invocationAndJobTerminal: true,
             invocationSchedulingTerminal: true,
+            jobStatesSummary: {},
         };
         wrapper = shallowMount(WorkflowInvocationSummary, {
             propsData,
             localVue,
+            pinia: createTestingPinia(),
         });
     });
 
@@ -42,6 +45,7 @@ describe("WorkflowInvocationSummary.vue with invocation scheduling running", ()
             invocation: invocationData,
             invocationAndJobTerminal: false,
             invocationSchedulingTerminal: false,
+            jobStatesSummary: {},
         };
         wrapper = shallowMount(WorkflowInvocationSummary, {
             store,
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
index fbedd3669522..71f57c087d81 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
@@ -118,7 +118,7 @@ const invocationPdfLink = computed<string | null>(() => {
 });
 
 const hasMessages = computed<boolean>(() => {
-    return !!props.invocation?.messages.length;
+    return props.invocation?.messages.length ? true : false;
 });
 
 const stepStatesStr = computed<string>(() => {