From 161da9e8e47c7cd230ca7b1d1ed2ceeab1ce6174 Mon Sep 17 00:00:00 2001
From: Manuel Holtgrewe <manuel.holtgrewe@bih-charite.de>
Date: Wed, 3 Jan 2024 17:16:37 +0100
Subject: [PATCH] feat: cleanup front-end tests (#355) (#363)

---
 docs/dev_frontend.rst                         |  15 ++
 frontend/src/api/intervar.ts                  |  33 +++
 .../SeqvarDetails/BeaconNetworkCard.vue       |  11 +-
 .../components/VarDetails/ClinvarsubCard.vue  |  13 +-
 .../__tests__/BookmarkListItem.spec.ts        |   4 +-
 .../__tests__/CaseInformationCard.spec.ts     |   2 +-
 .../__tests__/CriterionSwitch.spec.ts         |   4 +-
 .../__tests__/FooterDefault.spec.ts           |   2 +-
 .../AlternativeIdentifiers.spec.ts            |   2 +-
 .../BasicInfoCard/ExternalResources.spec.ts   |   2 +-
 .../BasicInfoCard/GeneRifs.spec.ts            |   2 +-
 .../BasicInfoCard/LocusDatabase.spec.ts       |   2 +-
 .../BasicInfoCard/SupplementaryList.spec.ts   |   2 +-
 .../ClinvarCard/ClinvarFreqPlot.spec.ts       |   2 +-
 .../ClinvarCard/ClinvarImpact.spec.ts         |   2 +-
 .../ClinvarCard/VariationLandscape.spec.ts    |   2 +-
 .../GeneDetails/ConditionsCard.spec.ts        |   8 +-
 .../ConditionsCard/CadaRanking.spec.ts        |   2 +-
 .../GeneDetails/ExpressionCard.spec.ts        |   2 +-
 .../GeneDetails/OverviewCard.spec.ts          |   4 +-
 .../GeneDetails/PathogenicityCard.spec.ts     |   2 +-
 .../__tests__/GenomeBrowser.spec.ts           |   4 +-
 .../components/__tests__/PageHeader.spec.ts   |   6 +-
 .../__tests__/Profile/BookmarksCard.spec.ts   |   2 +-
 .../__tests__/Profile/CaseCard.spec.ts        |   6 +-
 .../ClinvarsubSubmittingOrgsCard.spec.ts      |   3 +-
 .../Profile/ProfileInformationCard.spec.ts    |   4 +-
 .../__tests__/Profile/SeqVarsACMGCard.spec.ts |   4 +-
 .../components/__tests__/SearchBar.spec.ts    |   6 +-
 .../SeqvarDetails/BeaconNetworkCard.spec.ts   |  30 ++-
 .../SeqvarDetails/ClinsigCard.spec.ts         |  80 ++++---
 .../ClinsigCard/CriterionSwitch.spec.ts       |   2 +-
 .../ClinsigCard/SummarySheet.spec.ts          |   2 +-
 .../SeqvarDetails/ClinvarCard.spec.ts         |  21 +-
 .../__tests__/SeqvarDetails/FreqsCard.spec.ts |   4 +-
 .../FreqsCard/AutosomalFreqs.spec.ts          |   9 +-
 .../FreqsCard/MitochondrialFreqs.spec.ts      |   8 +-
 .../__tests__/SeqvarDetails/TxCsq.spec.ts     |   2 +-
 .../SeqvarDetails/VariantScoresCard.spec.ts   |   4 +-
 .../VariantScoresCard/ScoreDisplay.spec.ts    |   2 +-
 .../UcscConservation.spec.ts                  |   2 +-
 .../SeqvarDetails/VariantToolsCard.spec.ts    |   4 +-
 .../VariantValidatorCard.spec.ts              |  13 +-
 .../__tests__/StaticViews/AboutView.spec.ts   |   2 +-
 .../__tests__/StaticViews/ContactView.spec.ts |   2 +-
 .../__tests__/StaticViews/PrivacyView.spec.ts |   4 +-
 .../__tests__/StaticViews/TermsView.spec.ts   |   2 +-
 .../AcmgRatingCard/CnGain.spec.ts             |   2 +-
 .../AcmgRatingCard/CnLoss.spec.ts             |   2 +-
 .../AcmgRatingCard/SummarySheet.spec.ts       |   2 +-
 .../StrucvarDetails/ClinsigCard.spec.ts       |   8 +-
 .../StrucvarDetails/ClinvarCard.spec.ts       |   2 +-
 .../StrucvarDetails/GeneListCard.spec.ts      |   4 +-
 .../GeneListCard/GeneDosage.spec.ts           |   6 +-
 .../GeneListCard/GeneListEntry.spec.ts        |   2 +-
 .../GeneListCard/ScoreChip.spec.ts            |   4 +-
 .../StrucvarDetails/VariantToolsCard.spec.ts  |   5 +-
 .../__tests__/UserProfileButton.spec.ts       |   6 +-
 .../src/components/__tests__/VegaPlot.spec.ts |   2 +-
 frontend/src/lib/__tests__/test-utils.spec.ts |  10 +-
 frontend/src/lib/test-utils.ts                |  38 ++-
 frontend/src/lib/utils.ts                     |   5 -
 .../__tests__/strucVarAcmgRating.spec.ts      |  15 +-
 .../src/stores/__tests__/strucVarInfo.spec.ts |   7 +-
 .../__tests__/variantAcmgRating.spec.ts       |  15 +-
 .../src/stores/__tests__/variantInfo.spec.ts  |  17 +-
 frontend/src/stores/case.ts                   |   6 +-
 frontend/src/stores/seqVarAcmgRating.ts       |  17 +-
 .../views/__tests__/ACMGCriteriaDoc.spec.ts   |   4 +-
 .../src/views/__tests__/ACMGSVDocs.spec.ts    |   4 +-
 .../views/__tests__/GeneDetailView.spec.ts    | 224 ++++--------------
 frontend/src/views/__tests__/HomeView.spec.ts |  10 +-
 .../src/views/__tests__/LoginView.spec.ts     |   6 +-
 .../src/views/__tests__/PathNotFound.spec.ts  |   2 +-
 .../src/views/__tests__/ProfileView.spec.ts   |   6 +-
 .../views/__tests__/SeqvarDetailsView.spec.ts |  20 +-
 .../src/views/__tests__/StaticView.spec.ts    |   4 +-
 .../__tests__/StrucvarDetailsView.spec.ts     |   2 +-
 .../views/__tests__/VerifyEmailView.spec.ts   |   4 +-
 79 files changed, 385 insertions(+), 422 deletions(-)
 create mode 100644 frontend/src/api/intervar.ts

diff --git a/docs/dev_frontend.rst b/docs/dev_frontend.rst
index 5e780081..2b943613 100644
--- a/docs/dev_frontend.rst
+++ b/docs/dev_frontend.rst
@@ -18,6 +18,13 @@ Import order should be (and is also enforced by prettier):
 
 Overall, restrict relative include order for tests to include code to be tested with ``../``.
 
+-----
+Types
+-----
+
+- For the Vue reactive stores, explicitely specify the type in the creating function, e.g., `ref<string>` or `ref<string | undefined>`.
+- In many places in the UI, using `undefined` is more appropriate than `null` as this is the value before the data is loaded from the backend.
+
 --------------
 Test Structure
 --------------
@@ -29,6 +36,7 @@ Consider the following structure, an example is given below.
     - put larger fixture data into ``.json`` files within the ``__tests__`` folders (will go to LFS by our ``.gitattributes`` configuration)
 - define the tests
 - use assemble, act, assert structure e.g., `as described here <http://wiki.c2.com/?AssembleActivateAssert>`__
+    - guard assertions are OK
 - use ``describe.concurrent`` to describe the tests, usually one block per ``.spec.ts`` file
 - use ``it`` to define the tests
     - use ``async () => { ... }`` only when necessary, e.g., for ``await nextTick()``
@@ -37,3 +45,10 @@ Consider the following structure, an example is given below.
 .. literalinclude:: ../frontend/src/components/__tests__/UserProfileButton.spec.ts
     :language: typescript
 
+Note that there is a separation between views and components (cf. https://stackoverflow.com/a/50866150/84349) that is also reflected in the tests.
+
+- The main purpose of views is to handle the routing.
+- The actual work happens in components.
+
+In tests, we thus use stubbed out of nested components in views but not components.
+This keeps the load time acceptable while testing the components in isolation.
diff --git a/frontend/src/api/intervar.ts b/frontend/src/api/intervar.ts
new file mode 100644
index 00000000..bcdd726b
--- /dev/null
+++ b/frontend/src/api/intervar.ts
@@ -0,0 +1,33 @@
+import { API_INTERNAL_BASE_PREFIX } from '@/api/common'
+import type { Seqvar } from '@/lib/genomicVars'
+import type { AcmgRatingBackend } from '@/stores/seqVarAcmgRating'
+
+const API_BASE_URL = `${API_INTERNAL_BASE_PREFIX}/`
+
+export class InterVarClient {
+  private apiBaseUrl: string
+  private csrfToken: string | null
+
+  constructor(apiBaseUrl?: string, csrfToken?: string) {
+    this.apiBaseUrl = apiBaseUrl ?? API_BASE_URL
+    this.csrfToken = csrfToken ?? null
+  }
+
+  /**
+   * Fetch ACMG rating from InterVar via proxy.
+   */
+  async fetchAcmgRating(seqvar: Seqvar): Promise<AcmgRatingBackend> {
+    const { genomeBuild, chrom, pos, del, ins } = seqvar
+    const release = genomeBuild === 'grch37' ? 'hg19' : 'hg38'
+    const url =
+      `${API_BASE_URL}remote/acmg/?release=${release}&chromosome=${chrom}` +
+      `&position=${pos}&reference=${del}&alternative=${ins}`
+    const response = await fetch(url, { method: 'GET' })
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ACMG rating for ${seqvar.userRepr}`)
+    }
+
+    return await response.json()
+  }
+}
diff --git a/frontend/src/components/SeqvarDetails/BeaconNetworkCard.vue b/frontend/src/components/SeqvarDetails/BeaconNetworkCard.vue
index 28730e37..9267705e 100644
--- a/frontend/src/components/SeqvarDetails/BeaconNetworkCard.vue
+++ b/frontend/src/components/SeqvarDetails/BeaconNetworkCard.vue
@@ -1,17 +1,26 @@
+<!--
+This component allows to trigger a query to the Beacon Network for a given variant.
+
+The query is performed using the `<iframe>` feature of `beacon-network.org`.
+-->
 <script setup lang="ts">
 import { ref } from 'vue'
 
 import DocsLink from '@/components/DocsLink.vue'
 import { type Seqvar } from '@/lib/genomicVars'
 
+/** Interface for this component's props. */
 interface Props {
   seqvar?: Seqvar
 }
 
+/** This component's props. */
 const props = defineProps<Props>()
 
-const beaconAddress = ref('')
+/** The beacon iframe address; when set the iframe is loaded. */
+const beaconAddress = ref<string>('')
 
+/** Update `beaconAddress.value` to the URL indicated by `props.seqvar`. */
 const loadBeacon = () => {
   if (!props.seqvar) {
     return
diff --git a/frontend/src/components/VarDetails/ClinvarsubCard.vue b/frontend/src/components/VarDetails/ClinvarsubCard.vue
index fb8c51c7..001fc289 100644
--- a/frontend/src/components/VarDetails/ClinvarsubCard.vue
+++ b/frontend/src/components/VarDetails/ClinvarsubCard.vue
@@ -29,7 +29,6 @@ import { type SubmittingOrgRead } from '@/api/clinvarsub'
 import DocsLink from '@/components/DocsLink.vue'
 import ClinvarsubThreadList from '@/components/VarDetails/ClinvarsubThreadList.vue'
 import { type Seqvar, type Strucvar } from '@/lib/genomicVars'
-import { deepCopy } from '@/lib/utils'
 import { useClinvarsubStore } from '@/stores/clinvarsub'
 import { StoreState } from '@/stores/misc'
 import { useTermsStore } from '@/stores/terms'
@@ -132,7 +131,7 @@ const prepareModelStateDefaults: PrepareModel = {
   scv: undefined
 }
 /** Current state of preparation step. */
-const prepareModelState = ref<PrepareModel>(deepCopy(prepareModelStateDefaults))
+const prepareModelState = ref<PrepareModel>(structuredClone(prepareModelStateDefaults))
 /** Rules for the prepare model state. */
 const prepareModelRules = {
   scv: {
@@ -223,7 +222,9 @@ const createDefaultModelStateDefault: CreateUpdateModel = {
   structVarMethod: null
 }
 /** The model for the create/update data. */
-const createUpdateModelState = ref<CreateUpdateModel>(deepCopy(createDefaultModelStateDefault))
+const createUpdateModelState = ref<CreateUpdateModel>(
+  structuredClone(createDefaultModelStateDefault)
+)
 /** Rules for the prepare model state. */
 const createUpdateModelRules = {
   dateLastEvaluated: {
@@ -334,7 +335,7 @@ const constructCreateUpdatePayload = (
   prepareModel: PrepareModel,
   createUpdateModel: CreateUpdateModel
 ): SubmissionContainer => {
-  const modelCopy: CreateUpdateModel = deepCopy(createUpdateModel)
+  const modelCopy: CreateUpdateModel = structuredClone(createUpdateModel)
   let submissionVariant: SubmissionVariant
   if (props.seqvar) {
     submissionVariant = constructSeqvarVariant(props.seqvar)
@@ -407,8 +408,8 @@ const constructDeletePayload = (
 const onClickCancel = async () => {
   display.value = Display.List
   currentStep.value = 1
-  prepareModelState.value = deepCopy(prepareModelStateDefaults)
-  createUpdateModelState.value = deepCopy(createDefaultModelStateDefault)
+  prepareModelState.value = structuredClone(prepareModelStateDefaults)
+  createUpdateModelState.value = structuredClone(createDefaultModelStateDefault)
 }
 /** Handler for click on "previous". */
 const onClickPrevious = async () => {
diff --git a/frontend/src/components/__tests__/BookmarkListItem.spec.ts b/frontend/src/components/__tests__/BookmarkListItem.spec.ts
index 60ffa49d..a6236b5e 100644
--- a/frontend/src/components/__tests__/BookmarkListItem.spec.ts
+++ b/frontend/src/components/__tests__/BookmarkListItem.spec.ts
@@ -7,7 +7,7 @@ import { StoreState } from '@/stores/misc'
 describe.concurrent('BookmarkListItem.vue', () => {
   it('renders information with StoreState Active', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: BookmarkListItem, template: false },
+      { component: BookmarkListItem },
       {
         props: {
           type: 'seqvar',
@@ -35,7 +35,7 @@ describe.concurrent('BookmarkListItem.vue', () => {
 
   it('renders information with StoreState Error', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: BookmarkListItem, template: false },
+      { component: BookmarkListItem },
       {
         props: {
           type: 'seqvar',
diff --git a/frontend/src/components/__tests__/CaseInformationCard.spec.ts b/frontend/src/components/__tests__/CaseInformationCard.spec.ts
index 175b2064..18062c51 100644
--- a/frontend/src/components/__tests__/CaseInformationCard.spec.ts
+++ b/frontend/src/components/__tests__/CaseInformationCard.spec.ts
@@ -8,7 +8,7 @@ import CaseInformationCard from '../CaseInformationCard.vue'
 describe.concurrent('CaseInformationCard.vue', () => {
   it('renders information', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: CaseInformationCard, template: false },
+      { component: CaseInformationCard },
       {
         initialStoreState: {
           case: {
diff --git a/frontend/src/components/__tests__/CriterionSwitch.spec.ts b/frontend/src/components/__tests__/CriterionSwitch.spec.ts
index c95aea6c..ac126668 100644
--- a/frontend/src/components/__tests__/CriterionSwitch.spec.ts
+++ b/frontend/src/components/__tests__/CriterionSwitch.spec.ts
@@ -14,7 +14,7 @@ describe.concurrent('ClinsigCard', async () => {
     const criteriaState = acmgRating.getCriteriaState(criteria)
 
     const { wrapper } = await setupMountedComponents(
-      { component: CriterionSwitch, template: false },
+      { component: CriterionSwitch },
       {
         props: {
           acmgRating: acmgRating,
@@ -40,7 +40,7 @@ describe.concurrent('ClinsigCard', async () => {
     const criteriaState = acmgRating.getCriteriaState(criteria)
 
     const { wrapper } = await setupMountedComponents(
-      { component: CriterionSwitch, template: false },
+      { component: CriterionSwitch },
       {
         props: {
           acmgRating: acmgRating,
diff --git a/frontend/src/components/__tests__/FooterDefault.spec.ts b/frontend/src/components/__tests__/FooterDefault.spec.ts
index 6ebb3ea0..d71c033c 100644
--- a/frontend/src/components/__tests__/FooterDefault.spec.ts
+++ b/frontend/src/components/__tests__/FooterDefault.spec.ts
@@ -7,7 +7,7 @@ import FooterDefault from '../FooterDefault.vue'
 describe.concurrent('FooterDefault.vue', () => {
   it('renders information', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: FooterDefault, template: true },
+      { component: FooterDefault },
       {
         initialStoreState: {
           misc: {
diff --git a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/AlternativeIdentifiers.spec.ts b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/AlternativeIdentifiers.spec.ts
index 44eff6d8..dfd6cad2 100644
--- a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/AlternativeIdentifiers.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/AlternativeIdentifiers.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('AlternativeIdentifiers', async () => {
   it('renders the AlternativeIdentifiers information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: AlternativeIdentifiers, template: false },
+      { component: AlternativeIdentifiers },
       {
         props: {
           hgnc: BRCA1GeneInfo['genes']['HGNC:1100']['hgnc']
diff --git a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/ExternalResources.spec.ts b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/ExternalResources.spec.ts
index b4621831..6cca6fd2 100644
--- a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/ExternalResources.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/ExternalResources.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('ExternalResources', async () => {
   it('renders the ExternalResources information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ExternalResources, template: false },
+      { component: ExternalResources },
       {
         props: {
           hgnc: BRCA1GeneInfo['genes']['HGNC:1100']['hgnc']
diff --git a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/GeneRifs.spec.ts b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/GeneRifs.spec.ts
index e50bc2cf..67e26c11 100644
--- a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/GeneRifs.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/GeneRifs.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('GeneRifs', async () => {
   it('renders the GeneRifs information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: GeneRifs, template: false },
+      { component: GeneRifs },
       {
         props: {
           ncbi: BRCA1GeneInfo['genes']['HGNC:1100']['ncbi']
diff --git a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/LocusDatabase.spec.ts b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/LocusDatabase.spec.ts
index 9470e770..2e3f1c73 100644
--- a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/LocusDatabase.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/LocusDatabase.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('LocusDatabases', async () => {
   it('renders the LocusDatabases information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: LocusDatabases, template: false },
+      { component: LocusDatabases },
       {
         props: {
           hgnc: BRCA1GeneInfo['genes']['HGNC:1100']['hgnc']
diff --git a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/SupplementaryList.spec.ts b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/SupplementaryList.spec.ts
index a8f61651..8c9393d3 100644
--- a/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/SupplementaryList.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/BasicInfoCard/SupplementaryList.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('SupplementaryList', async () => {
   it('renders the SupplementaryList information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: SupplementaryList, template: false },
+      { component: SupplementaryList },
       {
         props: {
           acmgSf: BRCA1GeneInfo['genes']['HGNC:1100']['acmgSf']
diff --git a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/ClinvarFreqPlot.spec.ts b/frontend/src/components/__tests__/GeneDetails/ClinvarCard/ClinvarFreqPlot.spec.ts
index 48c6e5c9..29712da2 100644
--- a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/ClinvarFreqPlot.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/ClinvarCard/ClinvarFreqPlot.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('ClinVarFreqPlot', async () => {
   it('renders the ClinVarFreqPlot info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ClinVarFreqPlot, template: false },
+      { component: ClinVarFreqPlot },
       {
         props: {
           geneSymbol: 'BRCA1',
diff --git a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/ClinvarImpact.spec.ts b/frontend/src/components/__tests__/GeneDetails/ClinvarCard/ClinvarImpact.spec.ts
index 94bc65c4..11eefda0 100644
--- a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/ClinvarImpact.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/ClinvarCard/ClinvarImpact.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('ClinvarImpact', async () => {
   it('renders the ClinvarImpact information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ClinvarImpact, template: false },
+      { component: ClinvarImpact },
       {
         props: {
           geneClinvar: BRCA1ClinVar['genes']['HGNC:1100']
diff --git a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts b/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts
index ad10c843..5c2a07b6 100644
--- a/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/ClinvarCard/VariationLandscape.spec.ts
@@ -8,7 +8,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('VariationLandscape', async () => {
   it('renders the VariationLandscape plot', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: VariationLandscape, template: false },
+      { component: VariationLandscape },
       {
         props: {
           clinvar: BRCA1Clinvar['genes']['HGNC:1100'],
diff --git a/frontend/src/components/__tests__/GeneDetails/ConditionsCard.spec.ts b/frontend/src/components/__tests__/GeneDetails/ConditionsCard.spec.ts
index f421ba38..0c8593f5 100644
--- a/frontend/src/components/__tests__/GeneDetails/ConditionsCard.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/ConditionsCard.spec.ts
@@ -8,7 +8,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('ConditionsCard', async () => {
   it('renders the ConditionsCard information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ConditionsCard, template: false },
+      { component: ConditionsCard },
       {
         props: {
           geneInfo: BRCA1GeneInfo['genes']['HGNC:1100'],
@@ -24,7 +24,7 @@ describe.concurrent('ConditionsCard', async () => {
 
   it('expands the Orphanet Disorders information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ConditionsCard, template: false },
+      { component: ConditionsCard },
       {
         props: {
           geneInfo: BRCA1GeneInfo['genes']['HGNC:1100'],
@@ -41,7 +41,7 @@ describe.concurrent('ConditionsCard', async () => {
 
   it.skip('shows numerical values for HPO terms.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ConditionsCard, template: false },
+      { component: ConditionsCard },
       {
         props: {
           geneInfo: BRCA1GeneInfo['genes']['HGNC:1100'],
@@ -77,7 +77,7 @@ describe.concurrent('ConditionsCard', async () => {
 
   it.skip('shows links for HPO terms.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ConditionsCard, template: false },
+      { component: ConditionsCard },
       {
         props: {
           geneInfo: BRCA1GeneInfo['genes']['HGNC:1100'],
diff --git a/frontend/src/components/__tests__/GeneDetails/ConditionsCard/CadaRanking.spec.ts b/frontend/src/components/__tests__/GeneDetails/ConditionsCard/CadaRanking.spec.ts
index 10a41a74..29334e2c 100644
--- a/frontend/src/components/__tests__/GeneDetails/ConditionsCard/CadaRanking.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/ConditionsCard/CadaRanking.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('CadaRanking', async () => {
   it('renders the CadaRanking info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: CadaRanking, template: false },
+      { component: CadaRanking },
       {
         props: {
           hgncId: 'HGNC:1100'
diff --git a/frontend/src/components/__tests__/GeneDetails/ExpressionCard.spec.ts b/frontend/src/components/__tests__/GeneDetails/ExpressionCard.spec.ts
index d8b0eb60..15cc6357 100644
--- a/frontend/src/components/__tests__/GeneDetails/ExpressionCard.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/ExpressionCard.spec.ts
@@ -9,7 +9,7 @@ describe.concurrent('GtexGenePlotVue', async () => {
     // Disable warinings, because of invalid test data
     console.warn = vi.fn()
     const { wrapper } = await setupMountedComponents(
-      { component: GtexGenePlotVue, template: false },
+      { component: GtexGenePlotVue },
       {
         props: {
           geneSymbol: 'BRCA1',
diff --git a/frontend/src/components/__tests__/GeneDetails/OverviewCard.spec.ts b/frontend/src/components/__tests__/GeneDetails/OverviewCard.spec.ts
index 3b279cf4..6da81aff 100644
--- a/frontend/src/components/__tests__/GeneDetails/OverviewCard.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/OverviewCard.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('OverviewCard', async () => {
   it('renders the OverviewCard information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: OverviewCard, template: false },
+      { component: OverviewCard },
       {
         props: {
           geneInfo: BRCA1GeneInfo['genes']['HGNC:1100']
@@ -21,7 +21,7 @@ describe.concurrent('OverviewCard', async () => {
 
   it('expands the OverviewCard information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: OverviewCard, template: false },
+      { component: OverviewCard },
       {
         props: {
           geneInfo: BRCA1GeneInfo['genes']['HGNC:1100']
diff --git a/frontend/src/components/__tests__/GeneDetails/PathogenicityCard.spec.ts b/frontend/src/components/__tests__/GeneDetails/PathogenicityCard.spec.ts
index d142534c..b8232e91 100644
--- a/frontend/src/components/__tests__/GeneDetails/PathogenicityCard.spec.ts
+++ b/frontend/src/components/__tests__/GeneDetails/PathogenicityCard.spec.ts
@@ -8,7 +8,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('PathogenicityCard', async () => {
   it('renders the Pathogenicity information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: PathogenicityCard, template: false },
+      { component: PathogenicityCard },
       {
         props: {
           geneInfo: BRCA1GeneInfo['genes']['HGNC:1100']
diff --git a/frontend/src/components/__tests__/GenomeBrowser.spec.ts b/frontend/src/components/__tests__/GenomeBrowser.spec.ts
index 662da500..e692ad74 100644
--- a/frontend/src/components/__tests__/GenomeBrowser.spec.ts
+++ b/frontend/src/components/__tests__/GenomeBrowser.spec.ts
@@ -7,7 +7,7 @@ import GenomeBrowser from '../GenomeBrowser.vue'
 describe.concurrent('GenomeBrowser', async () => {
   it('renders the GenomeBrowser with the hg19 genome', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: GenomeBrowser, template: false },
+      { component: GenomeBrowser },
       {
         props: {
           genomeRelease: 'grch37',
@@ -20,7 +20,7 @@ describe.concurrent('GenomeBrowser', async () => {
 
   it('renders the GenomeBrowser with the hg38 genome', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: GenomeBrowser, template: false },
+      { component: GenomeBrowser },
       {
         props: {
           genomeRelease: 'grch38',
diff --git a/frontend/src/components/__tests__/PageHeader.spec.ts b/frontend/src/components/__tests__/PageHeader.spec.ts
index 6a899c84..fd35409f 100644
--- a/frontend/src/components/__tests__/PageHeader.spec.ts
+++ b/frontend/src/components/__tests__/PageHeader.spec.ts
@@ -28,7 +28,7 @@ describe.concurrent('PageHeader', async () => {
 
   it('renders the gene symbol and nav links', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: PageHeader, template: true },
+      { component: PageHeader },
       {
         initialStoreState: geneData
       }
@@ -47,7 +47,7 @@ describe.concurrent('PageHeader', async () => {
 
   it('renders the search bar', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: PageHeader, template: true },
+      { component: PageHeader },
       {
         initialStoreState: geneData
       }
@@ -69,7 +69,7 @@ describe.concurrent('PageHeader', async () => {
     )
 
     const { wrapper, router } = await setupMountedComponents(
-      { component: PageHeader, template: true },
+      { component: PageHeader },
       {
         initialStoreState: geneData
       }
diff --git a/frontend/src/components/__tests__/Profile/BookmarksCard.spec.ts b/frontend/src/components/__tests__/Profile/BookmarksCard.spec.ts
index bfce1e80..fbd358b8 100644
--- a/frontend/src/components/__tests__/Profile/BookmarksCard.spec.ts
+++ b/frontend/src/components/__tests__/Profile/BookmarksCard.spec.ts
@@ -22,7 +22,7 @@ describe.concurrent('BookmarksCard', async () => {
     })
     bookmarkStore.fetchBookmark = mockFetchBookmark
     const { wrapper } = await setupMountedComponents(
-      { component: BookmarksCard, template: false },
+      { component: BookmarksCard },
       {
         initialStoreState: {
           bookmarks: {
diff --git a/frontend/src/components/__tests__/Profile/CaseCard.spec.ts b/frontend/src/components/__tests__/Profile/CaseCard.spec.ts
index ee8f8724..32a4e0c5 100644
--- a/frontend/src/components/__tests__/Profile/CaseCard.spec.ts
+++ b/frontend/src/components/__tests__/Profile/CaseCard.spec.ts
@@ -7,7 +7,7 @@ import { StoreState } from '@/stores/misc'
 describe.concurrent('CaseCard', async () => {
   it('renders the CaseCard information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: CaseCard, template: false },
+      { component: CaseCard },
       {
         initialStoreState: {
           case: {
@@ -31,7 +31,7 @@ describe.concurrent('CaseCard', async () => {
 
   it('renders the CaseCard while loading', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: CaseCard, template: false },
+      { component: CaseCard },
       {
         initialStoreState: {
           case: {
@@ -53,7 +53,7 @@ describe.concurrent('CaseCard', async () => {
 
   it('renders the CaseCard with error State.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: CaseCard, template: false },
+      { component: CaseCard },
       {
         initialStoreState: {
           case: {
diff --git a/frontend/src/components/__tests__/Profile/ClinvarsubSubmittingOrgsCard.spec.ts b/frontend/src/components/__tests__/Profile/ClinvarsubSubmittingOrgsCard.spec.ts
index f358bfcf..791ef3af 100644
--- a/frontend/src/components/__tests__/Profile/ClinvarsubSubmittingOrgsCard.spec.ts
+++ b/frontend/src/components/__tests__/Profile/ClinvarsubSubmittingOrgsCard.spec.ts
@@ -25,8 +25,7 @@ describe.concurrent('ClinvarsubSubmittingOrgsCard', async () => {
 
     // act:
     const { wrapper } = await setupMountedComponents({
-      component: ClinvarsubSubmittingOrgsCard,
-      template: false
+      component: ClinvarsubSubmittingOrgsCard
     })
 
     // assert:
diff --git a/frontend/src/components/__tests__/Profile/ProfileInformationCard.spec.ts b/frontend/src/components/__tests__/Profile/ProfileInformationCard.spec.ts
index 42c5be05..155b0f1a 100644
--- a/frontend/src/components/__tests__/Profile/ProfileInformationCard.spec.ts
+++ b/frontend/src/components/__tests__/Profile/ProfileInformationCard.spec.ts
@@ -17,7 +17,7 @@ const adminUser: UserData = {
 describe.concurrent('ProfileInformationCard', async () => {
   it('renders the ProfileInformationCard information.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ProfileInformationCard, template: false },
+      { component: ProfileInformationCard },
       {
         initialStoreState: {
           user: {
@@ -37,7 +37,7 @@ describe.concurrent('ProfileInformationCard', async () => {
 
   it('renders the ProfileInformationCard information with no user.', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ProfileInformationCard, template: false },
+      { component: ProfileInformationCard },
       {
         initialStoreState: {
           user: {
diff --git a/frontend/src/components/__tests__/Profile/SeqVarsACMGCard.spec.ts b/frontend/src/components/__tests__/Profile/SeqVarsACMGCard.spec.ts
index 2d381a95..56bfedf8 100644
--- a/frontend/src/components/__tests__/Profile/SeqVarsACMGCard.spec.ts
+++ b/frontend/src/components/__tests__/Profile/SeqVarsACMGCard.spec.ts
@@ -29,7 +29,7 @@ describe.concurrent('SeqVarACMGCard', async () => {
     })
     acmgRatingStore.listAcmgRatings = mockListAcmgRatings
     const { wrapper } = await setupMountedComponents(
-      { component: SeqVarACMGCard, template: false },
+      { component: SeqVarACMGCard },
       {
         initialStoreState: {
           seqVarAcmgRating: {
@@ -52,7 +52,7 @@ describe.concurrent('SeqVarACMGCard', async () => {
     })
     acmgRatingStore.listAcmgRatings = mockListAcmgRatings
     const { wrapper } = await setupMountedComponents(
-      { component: SeqVarACMGCard, template: false },
+      { component: SeqVarACMGCard },
       {
         initialStoreState: {
           seqVarAcmgRating: {
diff --git a/frontend/src/components/__tests__/SearchBar.spec.ts b/frontend/src/components/__tests__/SearchBar.spec.ts
index 0dcd5d0f..d96750fb 100644
--- a/frontend/src/components/__tests__/SearchBar.spec.ts
+++ b/frontend/src/components/__tests__/SearchBar.spec.ts
@@ -13,7 +13,7 @@ describe.concurrent('SearchBar.vue', () => {
 
   it('renders the search bar with the correct default props', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: SearchBar, template: false },
+      { component: SearchBar },
       {
         props: {
           searchTerm: 'BRCA1',
@@ -35,7 +35,7 @@ describe.concurrent('SearchBar.vue', () => {
 
   it('correctly inputs data', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: SearchBar, template: false },
+      { component: SearchBar },
       {
         props: {
           searchTerm: 'BRCA1',
@@ -63,7 +63,7 @@ describe.concurrent('SearchBar.vue', () => {
     vi.spyOn(DottyClient.prototype, 'toSpdi').mockResolvedValue(null)
 
     const { wrapper } = await setupMountedComponents(
-      { component: SearchBar, template: false },
+      { component: SearchBar },
       {
         props: {
           searchTerm: 'BRCA1',
diff --git a/frontend/src/components/__tests__/SeqvarDetails/BeaconNetworkCard.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/BeaconNetworkCard.spec.ts
index 21355853..36cb694a 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/BeaconNetworkCard.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/BeaconNetworkCard.spec.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import { VBtn } from 'vuetify/components'
 
 import BeaconNetwork from '@/components/SeqvarDetails/BeaconNetworkCard.vue'
 import type { Seqvar } from '@/lib/genomicVars'
@@ -13,31 +14,46 @@ const seqvarInfo: Seqvar = {
   userRepr: 'grch37-17-43044295-G-A'
 }
 
-describe.concurrent('BeaconNetwork', async () => {
-  it('renders the BeaconNetwork info', async () => {
+describe.concurrent('BeaconNetworkCard', async () => {
+  it('renders the BeaconNetwork info without iframe', async () => {
+    // arrange:
     const { wrapper } = await setupMountedComponents(
-      { component: BeaconNetwork, template: false },
+      { component: BeaconNetwork },
       {
         props: {
           seqvar: seqvarInfo
         }
       }
     )
+    // act: nothing
+    // assert:
+    // look for the search button
     expect(wrapper.text()).toContain('Query Beacon')
-    const refreshButton = wrapper.find('.mdi-cloud-search')
+    const refreshButton = wrapper.findComponent(VBtn)
     expect(refreshButton.exists()).toBe(true)
+    // no iframe yet
+    expect(wrapper.html()).not.toContain('<iframe')
   })
 
-  it('correctly loads the BeaconNetwork info', async () => {
+  it('correctly loads the BeaconNetwork iframe', async () => {
+    // arrange:
     const { wrapper } = await setupMountedComponents(
-      { component: BeaconNetwork, template: false },
+      { component: BeaconNetwork },
       {
         props: {
           seqvar: seqvarInfo
         }
       }
     )
-    const refreshButton = wrapper.find('button')
+    // act:
+    const refreshButton = wrapper.findComponent(VBtn)
     await refreshButton.trigger('click')
+    await wrapper.vm.$nextTick()
+    // assert:
+    // look for the search button
+    expect(wrapper.text()).not.toContain('Query Beacon')
+    expect(refreshButton.exists()).not.toBe(true)
+    // iframe after click
+    expect(wrapper.html()).toContain('<iframe')
   })
 })
diff --git a/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard.spec.ts
index d68a7571..1a2dd138 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard.spec.ts
@@ -1,15 +1,14 @@
-import { createTestingPinia } from '@pinia/testing'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import createFetchMock from 'vitest-fetch-mock'
 import { nextTick } from 'vue'
 
 import ClinsigCard from '@/components/SeqvarDetails/ClinsigCard.vue'
+import CriterionSwitch from '@/components/SeqvarDetails/ClinsigCard/CriterionSwitch.vue'
 import SummarySheet from '@/components/SeqvarDetails/ClinsigCard/SummarySheet.vue'
 import { AcmgCriteria, MultiSourceAcmgCriteriaState, Presence, StateSource } from '@/lib/acmgSeqVar'
 import type { Seqvar } from '@/lib/genomicVars'
 import { setupMountedComponents } from '@/lib/test-utils'
-import { deepCopy } from '@/lib/utils'
 import { StoreState } from '@/stores/misc'
-import { useSeqVarAcmgRatingStore } from '@/stores/seqVarAcmgRating'
 
 const seqvarInfo: Seqvar = {
   genomeBuild: 'grch37',
@@ -20,64 +19,69 @@ const seqvarInfo: Seqvar = {
   userRepr: 'grch37-17-43044295-G-A'
 }
 
-const makeWrapper = () => {
-  const pinia = createTestingPinia({ createSpy: vi.fn })
-  const store = useSeqVarAcmgRatingStore(pinia)
+/** Wrapper around `setupMountedComponents` that perform store setup. */
+const makeWrapper = async () => {
+  const acmgRating = new MultiSourceAcmgCriteriaState()
+  acmgRating.setPresence(StateSource.InterVar, AcmgCriteria.PVS1, Presence.Present)
 
-  const mockRetrieveAcmgRating = vi.fn().mockImplementation(async () => {
-    store.storeState = StoreState.Active
-    store.seqvar = deepCopy(seqvarInfo)
-    store.acmgRating = new MultiSourceAcmgCriteriaState()
-    store.acmgRating.setPresence(StateSource.InterVar, AcmgCriteria.PVS1, Presence.Present)
-    store.acmgRatingStatus = true
-  })
-  store.fetchAcmgRating = mockRetrieveAcmgRating
-
-  store.storeState = StoreState.Active
-  store.seqvar = deepCopy(seqvarInfo)
-  store.acmgRating = new MultiSourceAcmgCriteriaState()
-  store.acmgRating.setPresence(StateSource.InterVar, AcmgCriteria.PVS1, Presence.Present)
-  store.acmgRatingStatus = true
-
-  return setupMountedComponents(
+  return await setupMountedComponents(
     {
-      component: ClinsigCard,
-      template: false
+      component: ClinsigCard
     },
     {
+      initialStoreState: {
+        seqVarAcmgRating: {
+          storeState: StoreState.Active,
+          seqvar: structuredClone(seqvarInfo),
+          acmgRating,
+          acmgRatingStatus: true
+        }
+      },
       props: {
         seqvar: seqvarInfo
-      },
-      pinia: pinia
+      }
     }
   )
 }
 
-describe.concurrent('AcmgRating', async () => {
+describe.concurrent('SeqvarDetails/ClinsigCard', async () => {
+  const fetchMocker = createFetchMock(vi)
+
+  beforeEach(() => {
+    fetchMocker.enableMocks()
+    fetchMocker.resetMocks()
+  })
+
   it('renders the AcmgRating info', async () => {
+    // arrange:
     const { wrapper } = await makeWrapper()
-    expect(wrapper.text()).toContain('Semi-Automated')
+    expect(wrapper.text()).toContain('Semi-Automated') // guard
 
+    // act:
     const summarySheet = wrapper.findComponent(SummarySheet)
-    expect(summarySheet.exists()).toBe(true)
-    const switchers = wrapper.findAllComponents({ name: 'CriterionSwitch' })
-    expect(switchers.length).toBe(52)
-
+    expect(summarySheet.exists()).toBe(true) // guard
+    const switchers = wrapper.findAllComponents(CriterionSwitch)
+    expect(switchers.length).toBe(52) // guard
     // click show failed button
-    const btnShowFailed = wrapper.findAll('.show-failed')
-    await btnShowFailed[0].trigger('click')
+    const btnShowFailed = wrapper.findComponent('.show-failed')
+    await btnShowFailed.trigger('click')
     await nextTick()
+
+    // assert:
     // check again that more switches are displayed
     expect(wrapper.findAll('.v-switch').length).toBe(2)
   })
 
   it('should correctly update the AcmgRating info', async () => {
+    // arrange:
     const { wrapper } = await makeWrapper()
 
-    const switchers = wrapper.findAll('.v-switch')
-    const switcher = switchers[0]
-    await switcher.trigger('click')
+    // act:
+    const switch$ = wrapper.findComponent('.v-switch')
+    await switch$.trigger('click')
     await nextTick()
+
+    // assert:
     expect(wrapper.emitted('click')).toBeTruthy()
   })
 })
diff --git a/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard/CriterionSwitch.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard/CriterionSwitch.spec.ts
index f38fde6a..2cce368a 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard/CriterionSwitch.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard/CriterionSwitch.spec.ts
@@ -15,7 +15,7 @@ describe.concurrent('CriterionSwitch', async () => {
     const acmgRating = new MultiSourceAcmgCriteriaState()
     acmgRating.setPresence(StateSource.User, AcmgCriteria.PM1, Presence.Present)
     const { wrapper } = await setupMountedComponents(
-      { component: CriterionSwitch, template: false },
+      { component: CriterionSwitch },
       {
         props: {
           acmgRating: acmgRating,
diff --git a/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard/SummarySheet.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard/SummarySheet.spec.ts
index 0e5ea841..57535884 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard/SummarySheet.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/ClinsigCard/SummarySheet.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('SummarySheet', async () => {
   it('renders the SummarySheet', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: SummarySheet, template: false },
+      { component: SummarySheet },
       {
         props: {
           calculatedAcmgClass: 'Pathogenic'
diff --git a/frontend/src/components/__tests__/SeqvarDetails/ClinvarCard.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/ClinvarCard.spec.ts
index e47740dd..2efec673 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/ClinvarCard.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/ClinvarCard.spec.ts
@@ -6,14 +6,19 @@ import { setupMountedComponents } from '@/lib/test-utils'
 
 describe.concurrent('ClinVar', async () => {
   it('renders the ClinVar info', async () => {
+    // arrange:
     const { wrapper } = await setupMountedComponents(
-      { component: ClinVar, template: false },
+      { component: ClinVar },
       {
         props: {
           clinvar: clinVarInfo
         }
       }
     )
+
+    // act: nothing, only test rendering
+
+    // assert:
     expect(wrapper.text()).toContain('ClinVar')
     expect(wrapper.text()).toContain('VCV000055407')
     const stars = wrapper.findAll('.mdi-star')
@@ -23,17 +28,22 @@ describe.concurrent('ClinVar', async () => {
   })
 
   it('renders the ClinVar info with stars', async () => {
+    // arrange:
     const clinVarInfoStars = structuredClone(clinVarInfo)
     clinVarInfoStars.referenceAssertions[0].reviewStatus =
       'REVIEW_STATUS_NO_ASSERTION_CRITERIA_PROVIDED'
     const { wrapper } = await setupMountedComponents(
-      { component: ClinVar, template: false },
+      { component: ClinVar },
       {
         props: {
           clinvar: clinVarInfoStars
         }
       }
     )
+
+    // act: nothing, only test rendering
+
+    // assert:
     expect(wrapper.text()).toContain('VCV000055407')
     const stars = wrapper.findAll('.mdi-star')
     expect(stars.length).toBe(9)
@@ -42,14 +52,19 @@ describe.concurrent('ClinVar', async () => {
   })
 
   it('renders the ClinVar info (not found)', async () => {
+    // arrange:
     const { wrapper } = await setupMountedComponents(
-      { component: ClinVar, template: false },
+      { component: ClinVar },
       {
         props: {
           clinvar: null
         }
       }
     )
+
+    // act: nothing, only test rendering
+
+    // assert:
     expect(wrapper.text()).toContain('No ClinVar information available.')
   })
 })
diff --git a/frontend/src/components/__tests__/SeqvarDetails/FreqsCard.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/FreqsCard.spec.ts
index 5603b263..cddecaae 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/FreqsCard.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/FreqsCard.spec.ts
@@ -28,7 +28,7 @@ const seqvarInfoMitochondrial = {
 describe.concurrent('Freqs', async () => {
   it('renders the Freqs info for Autosonmal Variants', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: Freqs, template: false },
+      { component: Freqs },
       {
         props: {
           seqvar: seqvarInfo,
@@ -42,7 +42,7 @@ describe.concurrent('Freqs', async () => {
 
   it('renders the Freqs info for Mitochondrial Variants', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: Freqs, template: false },
+      { component: Freqs },
       {
         props: {
           seqvar: seqvarInfoMitochondrial,
diff --git a/frontend/src/components/__tests__/SeqvarDetails/FreqsCard/AutosomalFreqs.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/FreqsCard/AutosomalFreqs.spec.ts
index 2affa388..f7d29e79 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/FreqsCard/AutosomalFreqs.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/FreqsCard/AutosomalFreqs.spec.ts
@@ -4,7 +4,6 @@ import * as BRCA1VariantInfo from '@/assets/__tests__/BRCA1VariantInfo.json'
 import FreqsAutosomal from '@/components/SeqvarDetails/FreqsCard/AutosomalFreqs.vue'
 import type { Seqvar } from '@/lib/genomicVars'
 import { setupMountedComponents } from '@/lib/test-utils'
-import { deepCopy } from '@/lib/utils'
 
 const seqvarInfo: Seqvar = {
   genomeBuild: 'grch37',
@@ -18,10 +17,10 @@ const seqvarInfo: Seqvar = {
 describe.concurrent('FreqsAutosomal', async () => {
   it('renders the FreqsAutosomal info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: FreqsAutosomal, template: false },
+      { component: FreqsAutosomal },
       {
         props: {
-          seqvar: deepCopy(seqvarInfo),
+          seqvar: structuredClone(seqvarInfo),
           varAnnos: BRCA1VariantInfo['result'],
           dataset: 'gnomad_exomes'
         }
@@ -34,10 +33,10 @@ describe.concurrent('FreqsAutosomal', async () => {
 
   it('renders the FreqsAutosomal info with no data', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: FreqsAutosomal, template: false },
+      { component: FreqsAutosomal },
       {
         props: {
-          seqvar: deepCopy(seqvarInfo),
+          seqvar: structuredClone(seqvarInfo),
           varAnnos: null,
           dataset: 'gnomad_genomes'
         }
diff --git a/frontend/src/components/__tests__/SeqvarDetails/FreqsCard/MitochondrialFreqs.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/FreqsCard/MitochondrialFreqs.spec.ts
index 34eccc24..1341bd29 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/FreqsCard/MitochondrialFreqs.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/FreqsCard/MitochondrialFreqs.spec.ts
@@ -34,7 +34,7 @@ const seqVarInfo = {
 describe.concurrent('FreqsMitochondrial', async () => {
   it('renders the FreqsMitochondrial info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: FreqsMitochondrial, template: false },
+      { component: FreqsMitochondrial },
       {
         props: {
           seqVar: seqvarInfo,
@@ -52,7 +52,7 @@ describe.concurrent('FreqsMitochondrial', async () => {
     const variantInfoNoHelixmtdb: any = structuredClone(seqVarInfo)
     variantInfoNoHelixmtdb.helixmtdb = {}
     const { wrapper } = await setupMountedComponents(
-      { component: FreqsMitochondrial, template: false },
+      { component: FreqsMitochondrial },
       {
         props: {
           seqVar: seqvarInfo,
@@ -70,7 +70,7 @@ describe.concurrent('FreqsMitochondrial', async () => {
     const variantInfoNoGnomad: any = structuredClone(seqVarInfo)
     variantInfoNoGnomad['gnomad-mtdna'] = {}
     const { wrapper } = await setupMountedComponents(
-      { component: FreqsMitochondrial, template: false },
+      { component: FreqsMitochondrial },
       {
         props: {
           seqVar: seqvarInfo,
@@ -86,7 +86,7 @@ describe.concurrent('FreqsMitochondrial', async () => {
 
   it.skip('renders the FreqsMitochondrial info with invalid data', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: FreqsMitochondrial, template: false },
+      { component: FreqsMitochondrial },
       {
         props: {
           seqVar: seqvarInfo,
diff --git a/frontend/src/components/__tests__/SeqvarDetails/TxCsq.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/TxCsq.spec.ts
index ccb6c590..c81d7f30 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/TxCsq.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/TxCsq.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('TxCsq', async () => {
   it('renders the TxCsq info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: TxCsq, template: false },
+      { component: TxCsq },
       {
         props: {
           txCsq: BRCA1TxInfo
diff --git a/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard.spec.ts
index 1d6adf1e..0e050f32 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('VariantTools', async () => {
   it('renders the Variant Tools info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: VariantTools, template: false },
+      { component: VariantTools },
       {
         props: {
           varAnnos: BRCA1VariantInfo['result']
@@ -20,7 +20,7 @@ describe.concurrent('VariantTools', async () => {
 
   it('renders the Variant Tools info with empty variance information', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: VariantTools, template: false },
+      { component: VariantTools },
       {
         props: {
           varAnnos: undefined
diff --git a/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard/ScoreDisplay.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard/ScoreDisplay.spec.ts
index 550365a8..8c29c4db 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard/ScoreDisplay.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard/ScoreDisplay.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('ScoreDisplay', async () => {
   it('renders the ScoreDisplay with default props', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ScoreDisplay, template: false },
+      { component: ScoreDisplay },
       {
         props: {
           rangeLower: 0,
diff --git a/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard/UcscConservation.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard/UcscConservation.spec.ts
index 74c9a443..f0ddb983 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard/UcscConservation.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/VariantScoresCard/UcscConservation.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('VariantConservation', async () => {
   it('renders the VariantConservation info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: Conservation, template: false },
+      { component: Conservation },
       {
         props: {
           varAnnos: BRCA1VariantInfo['result']
diff --git a/frontend/src/components/__tests__/SeqvarDetails/VariantToolsCard.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/VariantToolsCard.spec.ts
index d759daee..a4fa4a33 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/VariantToolsCard.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/VariantToolsCard.spec.ts
@@ -17,7 +17,7 @@ const seqvarInfo: Seqvar = {
 describe.concurrent('VariantTools', async () => {
   it('renders the Variant Tools info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: VariantTools, template: false },
+      { component: VariantTools },
       {
         props: {
           seqvar: seqvarInfo,
@@ -34,7 +34,7 @@ describe.concurrent('VariantTools', async () => {
 
   it('renders the Variant Tools info with empty Seqvar', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: VariantTools, template: false },
+      { component: VariantTools },
       {
         props: {
           seqvar: undefined,
diff --git a/frontend/src/components/__tests__/SeqvarDetails/VariantValidatorCard.spec.ts b/frontend/src/components/__tests__/SeqvarDetails/VariantValidatorCard.spec.ts
index 328a5835..d52469e8 100644
--- a/frontend/src/components/__tests__/SeqvarDetails/VariantValidatorCard.spec.ts
+++ b/frontend/src/components/__tests__/SeqvarDetails/VariantValidatorCard.spec.ts
@@ -5,7 +5,6 @@ import * as VariantValidatorInfo from '@/assets/__tests__/BRCA1VariantValidator.
 import VariantValidator from '@/components/SeqvarDetails/VariantValidatorCard.vue'
 import type { Seqvar } from '@/lib/genomicVars'
 import { setupMountedComponents } from '@/lib/test-utils'
-import { deepCopy } from '@/lib/utils'
 
 const seqvarInfo: Seqvar = {
   genomeBuild: 'grch37',
@@ -23,10 +22,10 @@ describe.concurrent('VariantValidator', async () => {
       Promise.resolve({ ok: true, json: () => Promise.resolve(VariantValidatorInfo) })
     )
     const { wrapper } = await setupMountedComponents(
-      { component: VariantValidator, template: false },
+      { component: VariantValidator },
       {
         props: {
-          seqvar: deepCopy(seqvarInfo)
+          seqvar: structuredClone(seqvarInfo)
         }
       }
     )
@@ -48,10 +47,10 @@ describe.concurrent('VariantValidator', async () => {
       Promise.resolve({ ok: false, json: () => Promise.resolve({ foo: 'foo' }) })
     )
     const { wrapper } = await setupMountedComponents(
-      { component: VariantValidator, template: false },
+      { component: VariantValidator },
       {
         props: {
-          seqvar: deepCopy(seqvarInfo)
+          seqvar: structuredClone(seqvarInfo)
         }
       }
     )
@@ -73,10 +72,10 @@ describe.concurrent('VariantValidator', async () => {
       Promise.resolve({ ok: true, json: () => Promise.resolve({ foo: 'foo' }) })
     )
     const { wrapper } = await setupMountedComponents(
-      { component: VariantValidator, template: false },
+      { component: VariantValidator },
       {
         props: {
-          seqvar: deepCopy(seqvarInfo)
+          seqvar: structuredClone(seqvarInfo)
         }
       }
     )
diff --git a/frontend/src/components/__tests__/StaticViews/AboutView.spec.ts b/frontend/src/components/__tests__/StaticViews/AboutView.spec.ts
index 884957e1..a04c8cb0 100644
--- a/frontend/src/components/__tests__/StaticViews/AboutView.spec.ts
+++ b/frontend/src/components/__tests__/StaticViews/AboutView.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('AboutView', async () => {
   it('renders the main content', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: AboutView, template: true },
+      { component: AboutView },
       {
         initialStoreState: {
           misc: {
diff --git a/frontend/src/components/__tests__/StaticViews/ContactView.spec.ts b/frontend/src/components/__tests__/StaticViews/ContactView.spec.ts
index a80fd7dc..1d7637e2 100644
--- a/frontend/src/components/__tests__/StaticViews/ContactView.spec.ts
+++ b/frontend/src/components/__tests__/StaticViews/ContactView.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('ContactView', async () => {
   it('renders the main content', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ContactView, template: true },
+      { component: ContactView },
       {
         initialStoreState: {
           misc: {
diff --git a/frontend/src/components/__tests__/StaticViews/PrivacyView.spec.ts b/frontend/src/components/__tests__/StaticViews/PrivacyView.spec.ts
index 9a60c2b3..a91d74ca 100644
--- a/frontend/src/components/__tests__/StaticViews/PrivacyView.spec.ts
+++ b/frontend/src/components/__tests__/StaticViews/PrivacyView.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('PrivacyView', async () => {
   it('renders the privacy policy link', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: PrivacyView, template: true },
+      { component: PrivacyView },
       {
         initialStoreState: {
           misc: {
@@ -23,7 +23,7 @@ describe.concurrent('PrivacyView', async () => {
 
   it('renders the main content', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: PrivacyView, template: true },
+      { component: PrivacyView },
       {
         initialStoreState: {
           misc: {
diff --git a/frontend/src/components/__tests__/StaticViews/TermsView.spec.ts b/frontend/src/components/__tests__/StaticViews/TermsView.spec.ts
index e533a06d..92254c76 100644
--- a/frontend/src/components/__tests__/StaticViews/TermsView.spec.ts
+++ b/frontend/src/components/__tests__/StaticViews/TermsView.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('TermsView', async () => {
   it('renders the terms of use content', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: TermsView, template: true },
+      { component: TermsView },
       {
         initialStoreState: {
           misc: {
diff --git a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnGain.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnGain.spec.ts
index 1d152b63..5477ac5d 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnGain.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnGain.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('CnGain', async () => {
   it('renders the CnGain info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: CnGain, template: false },
+      { component: CnGain },
       {
         props: {
           showConflictingSections: false
diff --git a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnLoss.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnLoss.spec.ts
index c798c126..64ddee32 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnLoss.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/CnLoss.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('CnLoss', async () => {
   it('renders the CnLoss info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: CnLoss, template: false },
+      { component: CnLoss },
       {
         props: {
           showConflictingSections: false
diff --git a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/SummarySheet.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/SummarySheet.spec.ts
index af56cbe8..3f6dd038 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/SummarySheet.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/AcmgRatingCard/SummarySheet.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('SummarySheet', async () => {
   it('renders the SummarySheet info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: SummarySheet, template: false },
+      { component: SummarySheet },
       {
         props: {
           calculatedAcmgClass: 'Pathogenic',
diff --git a/frontend/src/components/__tests__/StrucvarDetails/ClinsigCard.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/ClinsigCard.spec.ts
index 0fa61c1c..b4d52a54 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/ClinsigCard.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/ClinsigCard.spec.ts
@@ -10,7 +10,6 @@ import {
 import ClinsigCard from '@/components/StrucvarDetails/ClinsigCard.vue'
 import type { Strucvar } from '@/lib/genomicVars'
 import { setupMountedComponents } from '@/lib/test-utils'
-import { deepCopy } from '@/lib/utils'
 import { StoreState } from '@/stores/misc'
 import { useStrucVarAcmgRatingStore } from '@/stores/strucVarAcmgRating'
 
@@ -69,7 +68,7 @@ const makeWrapper = () => {
 
   const mockRetrieveAcmgRating = vi.fn().mockImplementation(async () => {
     store.storeState = StoreState.Active
-    store.strucvar = deepCopy(strucvarInfo)
+    store.strucvar = structuredClone(strucvarInfo)
     store.acmgRating = new MultiSourceAcmgCriteriaCNVState('DEL')
     store.acmgRating.setPresence(
       StateSourceCNV.AutoCNV,
@@ -80,14 +79,13 @@ const makeWrapper = () => {
   store.fetchAcmgRating = mockRetrieveAcmgRating
 
   store.storeState = StoreState.Active
-  store.strucvar = deepCopy(strucvarInfo)
+  store.strucvar = structuredClone(strucvarInfo)
   store.acmgRating = new MultiSourceAcmgCriteriaCNVState('DEL')
   store.acmgRating.setPresence(StateSourceCNV.AutoCNV, AcmgCriteriaCNVLoss.Loss1A, Presence.Present)
 
   return setupMountedComponents(
     {
-      component: ClinsigCard,
-      template: true
+      component: ClinsigCard
     },
     {
       props: {
diff --git a/frontend/src/components/__tests__/StrucvarDetails/ClinvarCard.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/ClinvarCard.spec.ts
index 0ab239dc..e7fa3c90 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/ClinvarCard.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/ClinvarCard.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('ClinvarCard', async () => {
   it('renders the ClinvarCard info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ClinvarCard, template: false },
+      { component: ClinvarCard },
       {
         props: {
           genomeRelease: 'grch37'
diff --git a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard.spec.ts
index 0af99356..9c2662b5 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard.spec.ts
@@ -10,7 +10,7 @@ import { StoreState } from '@/stores/misc'
 describe.concurrent('GeneListCard', async () => {
   it('renders the GeneListCard table', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: GeneListCard, template: false },
+      { component: GeneListCard },
       {
         props: {
           genesInfos: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
@@ -28,7 +28,7 @@ describe.concurrent('GeneListCard', async () => {
 
   it('shows the gene info on row click', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: GeneListCard, template: false },
+      { component: GeneListCard },
       {
         props: {
           genesInfos: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
diff --git a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneDosage.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneDosage.spec.ts
index 83964de4..2e4007d9 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneDosage.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneDosage.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('GeneDosage', async () => {
   it('renders the GeneDosage info with CLINGEN_DOSAGE_SCORE_RECESSIVE', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: GeneDosage, template: false },
+      { component: GeneDosage },
       {
         props: {
           geneSymbol: 'BRCA1',
@@ -22,7 +22,7 @@ describe.concurrent('GeneDosage', async () => {
 
   it('renders the GeneDosage info with CLINGEN_DOSAGE_SCORE_UNKNOWN', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: GeneDosage, template: false },
+      { component: GeneDosage },
       {
         props: {
           geneSymbol: 'BRCA1',
@@ -36,7 +36,7 @@ describe.concurrent('GeneDosage', async () => {
 
   it('renders the GeneDosage info with CLINGEN_DOSAGE_SCORE_SUFFICIENT_EVIDENCE_AVAILABLE', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: GeneDosage, template: false },
+      { component: GeneDosage },
       {
         props: {
           geneSymbol: 'BRCA1',
diff --git a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneListEntry.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneListEntry.spec.ts
index 5052080d..5bc45d2e 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneListEntry.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/GeneListEntry.spec.ts
@@ -7,7 +7,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('GeneListEntry', async () => {
   it('renders the GeneListEntry info', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: GeneListEntry, template: false },
+      { component: GeneListEntry },
       {
         props: {
           item: JSON.parse(JSON.stringify({ raw: BRCA1GeneInfo['genes']['HGNC:1100'] })),
diff --git a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/ScoreChip.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/ScoreChip.spec.ts
index 45c30cae..d21ebdbd 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/ScoreChip.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/GeneListCard/ScoreChip.spec.ts
@@ -6,7 +6,7 @@ import { setupMountedComponents } from '@/lib/test-utils'
 describe.concurrent('ScoreChip', async () => {
   it('renders the ScoreChip info with specified link', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ScoreChip, template: false },
+      { component: ScoreChip },
       {
         props: {
           value: 0,
@@ -20,7 +20,7 @@ describe.concurrent('ScoreChip', async () => {
 
   it('renders the ScoreChip info without link', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ScoreChip, template: false },
+      { component: ScoreChip },
       {
         props: {
           value: 0,
diff --git a/frontend/src/components/__tests__/StrucvarDetails/VariantToolsCard.spec.ts b/frontend/src/components/__tests__/StrucvarDetails/VariantToolsCard.spec.ts
index 32652a1f..c3efbcaf 100644
--- a/frontend/src/components/__tests__/StrucvarDetails/VariantToolsCard.spec.ts
+++ b/frontend/src/components/__tests__/StrucvarDetails/VariantToolsCard.spec.ts
@@ -3,7 +3,6 @@ import { describe, expect, it } from 'vitest'
 import VariantToolsCard from '@/components/StrucvarDetails/VariantToolsCard.vue'
 import { type Strucvar } from '@/lib/genomicVars'
 import { setupMountedComponents } from '@/lib/test-utils'
-import { deepCopy } from '@/lib/utils'
 
 const strucvarInfo: Strucvar = {
   genomeBuild: 'grch37',
@@ -17,10 +16,10 @@ const strucvarInfo: Strucvar = {
 describe.concurrent('VariantToolsCard', async () => {
   it('renders the VariantToolsCard content', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: VariantToolsCard, template: false },
+      { component: VariantToolsCard },
       {
         props: {
-          strucvar: deepCopy(strucvarInfo),
+          strucvar: structuredClone(strucvarInfo),
           genomeBuild: 'grch37'
         }
       }
diff --git a/frontend/src/components/__tests__/UserProfileButton.spec.ts b/frontend/src/components/__tests__/UserProfileButton.spec.ts
index 57779708..becbd304 100644
--- a/frontend/src/components/__tests__/UserProfileButton.spec.ts
+++ b/frontend/src/components/__tests__/UserProfileButton.spec.ts
@@ -25,7 +25,7 @@ const adminUser: UserData = {
 describe.concurrent('UserProfileButton', () => {
   it('displays Login button without any user', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: UserProfileButton, template: true },
+      { component: UserProfileButton },
       {
         initialStoreState: {
           user: {
@@ -43,7 +43,7 @@ describe.concurrent('UserProfileButton', () => {
 
   it('displays Profile button with a user', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: UserProfileButton, template: true },
+      { component: UserProfileButton },
       {
         initialStoreState: {
           user: {
@@ -63,7 +63,7 @@ describe.concurrent('UserProfileButton', () => {
     // Note that we use an `async` test here as we need `await nextTick()` for the DOM
     // update to bubble through when updating the state property.
     const { wrapper } = await setupMountedComponents(
-      { component: UserProfileButton, template: true },
+      { component: UserProfileButton },
       {
         initialStoreState: {
           user: {
diff --git a/frontend/src/components/__tests__/VegaPlot.spec.ts b/frontend/src/components/__tests__/VegaPlot.spec.ts
index 6c29054a..6af81399 100644
--- a/frontend/src/components/__tests__/VegaPlot.spec.ts
+++ b/frontend/src/components/__tests__/VegaPlot.spec.ts
@@ -56,7 +56,7 @@ describe.concurrent('VegaPlot', async () => {
   // DataCloneError: #<Object> could not be cloned.
   it.skip('renders the VegaPlot info', async () => {
     await setupMountedComponents(
-      { component: VegaPlot, template: false },
+      { component: VegaPlot },
       {
         props: {
           description: 'Example description',
diff --git a/frontend/src/lib/__tests__/test-utils.spec.ts b/frontend/src/lib/__tests__/test-utils.spec.ts
index 51d2dedb..c3bd6242 100644
--- a/frontend/src/lib/__tests__/test-utils.spec.ts
+++ b/frontend/src/lib/__tests__/test-utils.spec.ts
@@ -7,7 +7,7 @@ const TestComponent = { template: '<template><div>Test</div></template>', __name
 describe.concurrent('Test Utils - setupMountedComponents', async () => {
   it('should mount component with template', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: TestComponent, template: true },
+      { component: TestComponent },
       { initialStoreState: { state: { count: 42 } } }
     )
 
@@ -16,7 +16,7 @@ describe.concurrent('Test Utils - setupMountedComponents', async () => {
 
   it('should mount component without template', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: TestComponent, template: false },
+      { component: TestComponent },
       { initialStoreState: { count: 42 } }
     )
 
@@ -25,7 +25,7 @@ describe.concurrent('Test Utils - setupMountedComponents', async () => {
 
   it('should mock router push method', async () => {
     const { router } = await setupMountedComponents(
-      { component: TestComponent, template: true },
+      { component: TestComponent },
       { initialStoreState: { count: 42 } }
     )
 
@@ -35,7 +35,7 @@ describe.concurrent('Test Utils - setupMountedComponents', async () => {
 
   it('should create vuetify, router, and pinia instances', async () => {
     const { wrapper, router, pinia } = await setupMountedComponents(
-      { component: TestComponent, template: true },
+      { component: TestComponent },
       { initialStoreState: { count: 42 } }
     )
 
@@ -52,7 +52,7 @@ describe.concurrent('Test Utils - setupMountedComponents', async () => {
     }
 
     const { wrapper } = await setupMountedComponents(
-      { component: TestComponent, template: false },
+      { component: TestComponent },
       { props: { message: 'Hello, Props!' } }
     )
     expect(wrapper.text()).toBe('Hello, Props!')
diff --git a/frontend/src/lib/test-utils.ts b/frontend/src/lib/test-utils.ts
index f2567a17..5b6471c3 100644
--- a/frontend/src/lib/test-utils.ts
+++ b/frontend/src/lib/test-utils.ts
@@ -1,6 +1,7 @@
 import { type TestingPinia, createTestingPinia } from '@pinia/testing'
 import { type VueWrapper, flushPromises, mount } from '@vue/test-utils'
 import { vi } from 'vitest'
+import { h } from 'vue'
 import { type Router, createRouter, createWebHistory } from 'vue-router'
 import { createVuetify } from 'vuetify'
 import { md3 } from 'vuetify/blueprints'
@@ -36,10 +37,12 @@ export interface MountedComponents {
  */
 export const setupMountedComponents = async (
   componentOptions: {
-    /** The component itself */
+    /** The component itself. */
     component: any
-    /** Mode of mounting */
-    template: boolean
+    /** Whether to perform shallow mounting, default: `false`. */
+    shallow?: boolean
+    /** Possibly some exceptions to stubbing. */
+    stubs?: { [key: string]: boolean }
   },
   options?: {
     /** Initial Store instances */
@@ -82,17 +85,34 @@ export const setupMountedComponents = async (
   knownComponents[componentOptions.component.__name] = componentOptions.component
 
   // Setup mounting option of component
-  const componentMount = componentOptions.template
-    ? { template: `<v-app><${componentOptions.component.__name} /></v-app>` }
-    : componentOptions.component
+  const componentMount = h(
+    components.VApp,
+    // props
+    {},
+    // children
+    () => [h(componentOptions.component, options?.props ?? {})]
+  )
 
   const wrapper = mount(componentMount, {
     query: options?.query,
-    props: options?.props,
     global: {
       plugins: [vuetify, router, options?.pinia ?? pinia],
-      components: knownComponents
-    }
+      components: knownComponents,
+      stubs: {
+        // never stub out these central components for convenience
+        VApp: false,
+        VContainer: false,
+        VList: false,
+        VListGroup: false,
+        VListChildren: false,
+        VMain: false,
+        VRow: false,
+        VCol: false,
+        // use more stubs options
+        ...(componentOptions.stubs ?? {})
+      }
+    },
+    shallow: componentOptions.shallow ?? false
   })
 
   await flushPromises()
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index feb633bb..082586de 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -257,10 +257,5 @@ export const transformDbnsfpMimDiseaseId = (id: string, showTermIds: boolean) =>
   }
 }
 
-/** Create a deep copy using JSON stringify. */
-export function deepCopy<T>(obj: any): T {
-  return JSON.parse(JSON.stringify(obj)) as T
-}
-
 /** Global pubsub instance. */
 export const MITT = mitt()
diff --git a/frontend/src/stores/__tests__/strucVarAcmgRating.spec.ts b/frontend/src/stores/__tests__/strucVarAcmgRating.spec.ts
index 6e3e660b..8e889ded 100644
--- a/frontend/src/stores/__tests__/strucVarAcmgRating.spec.ts
+++ b/frontend/src/stores/__tests__/strucVarAcmgRating.spec.ts
@@ -11,7 +11,6 @@ import {
   StateSourceCNV
 } from '@/components/StrucvarDetails/ClinsigCard.c'
 import type { Strucvar } from '@/lib/genomicVars'
-import { deepCopy } from '@/lib/utils'
 
 import { StoreState } from '../misc'
 import { useStrucVarAcmgRatingStore } from '../strucVarAcmgRating'
@@ -110,7 +109,7 @@ describe.concurrent('geneInfo Store', () => {
     const store = useStrucVarAcmgRatingStore()
     store.storeState = StoreState.Active
     store.acmgRating = JSON.parse(JSON.stringify({ acmg: 'rating' }))
-    store.strucvar = deepCopy(strucvarInfo)
+    store.strucvar = structuredClone(strucvarInfo)
 
     store.clearData()
 
@@ -123,7 +122,7 @@ describe.concurrent('geneInfo Store', () => {
     const store = useStrucVarAcmgRatingStore()
     fetchMocker.mockResponseOnce(JSON.stringify(ExampleAutoCNVResponse))
 
-    await store.fetchAcmgRating(deepCopy(strucvarInfo))
+    await store.fetchAcmgRating(structuredClone(strucvarInfo))
 
     expect(store.storeState).toBe(StoreState.Active)
     const expectedAcmgRating = new MultiSourceAcmgCriteriaCNVState('DEL')
@@ -165,7 +164,7 @@ describe.concurrent('geneInfo Store', () => {
       expectedAcmgRating.setUserToAutoCNV()
     }
     expect(store.acmgRating).toStrictEqual(expectedAcmgRating)
-    expect(store.strucvar).toStrictEqual(deepCopy(strucvarInfo))
+    expect(store.strucvar).toStrictEqual(structuredClone(strucvarInfo))
   })
 
   it('should fail to load data with invalid request', async () => {
@@ -174,7 +173,7 @@ describe.concurrent('geneInfo Store', () => {
     const store = useStrucVarAcmgRatingStore()
     fetchMocker.mockResponseOnce(JSON.stringify({ foo: 'bar' }), { status: 400 })
 
-    await store.fetchAcmgRating(deepCopy(strucvarInfo))
+    await store.fetchAcmgRating(structuredClone(strucvarInfo))
 
     expect(store.storeState).toBe(StoreState.Error)
     expect(store.acmgRating).toStrictEqual(new MultiSourceAcmgCriteriaCNVState('DEL'))
@@ -184,7 +183,7 @@ describe.concurrent('geneInfo Store', () => {
   it('should not load data if structure variant is the same', async () => {
     const store = useStrucVarAcmgRatingStore()
     fetchMocker.mockResponse(JSON.stringify(ExampleAutoCNVResponse))
-    await store.fetchAcmgRating(deepCopy(strucvarInfo))
+    await store.fetchAcmgRating(structuredClone(strucvarInfo))
 
     expect(store.storeState).toBe(StoreState.Active)
     const expectedAcmgRating = new MultiSourceAcmgCriteriaCNVState('DEL')
@@ -226,9 +225,9 @@ describe.concurrent('geneInfo Store', () => {
       expectedAcmgRating.setUserToAutoCNV()
     }
     expect(store.acmgRating).toStrictEqual(expectedAcmgRating)
-    expect(store.strucvar).toStrictEqual(deepCopy(strucvarInfo))
+    expect(store.strucvar).toStrictEqual(structuredClone(strucvarInfo))
 
-    await store.fetchAcmgRating(deepCopy(strucvarInfo))
+    await store.fetchAcmgRating(structuredClone(strucvarInfo))
 
     expect(fetchMocker.mock.calls.length).toBe(1)
   })
diff --git a/frontend/src/stores/__tests__/strucVarInfo.spec.ts b/frontend/src/stores/__tests__/strucVarInfo.spec.ts
index e5925a94..6e5aff38 100644
--- a/frontend/src/stores/__tests__/strucVarInfo.spec.ts
+++ b/frontend/src/stores/__tests__/strucVarInfo.spec.ts
@@ -4,7 +4,6 @@ import createFetchMock from 'vitest-fetch-mock'
 
 import * as geneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
 import type { Strucvar } from '@/lib/genomicVars'
-import { deepCopy } from '@/lib/utils'
 import { StoreState } from '@/stores/misc'
 import { useStrucVarInfoStore } from '@/stores/strucVarInfo'
 
@@ -37,7 +36,7 @@ describe.concurrent('svInfo Store', () => {
   it('should clear state', () => {
     const store = useStrucVarInfoStore()
     store.storeState = StoreState.Active
-    store.strucvar = deepCopy(strucvarInfo)
+    store.strucvar = structuredClone(strucvarInfo)
     store.genesInfos = JSON.parse(JSON.stringify([geneInfo['genes']['HGNC:1100']]))
 
     store.clearData()
@@ -56,7 +55,7 @@ describe.concurrent('svInfo Store', () => {
         return Promise.resolve(JSON.stringify(geneInfo))
       }
     })
-    await store.loadData(deepCopy(strucvarInfo))
+    await store.loadData(structuredClone(strucvarInfo))
 
     expect(store.storeState).toBe(StoreState.Active)
     expect(store.strucvar).toStrictEqual(strucvarInfo)
@@ -76,7 +75,7 @@ describe.concurrent('svInfo Store', () => {
         return Promise.resolve(JSON.stringify({ status: 400 }))
       }
     })
-    await store.loadData(deepCopy(strucvarInfo))
+    await store.loadData(structuredClone(strucvarInfo))
 
     expect(store.storeState).toBe(StoreState.Error)
     expect(store.strucvar).toBe(undefined)
diff --git a/frontend/src/stores/__tests__/variantAcmgRating.spec.ts b/frontend/src/stores/__tests__/variantAcmgRating.spec.ts
index a081f9f7..47c415fb 100644
--- a/frontend/src/stores/__tests__/variantAcmgRating.spec.ts
+++ b/frontend/src/stores/__tests__/variantAcmgRating.spec.ts
@@ -5,7 +5,6 @@ import createFetchMock from 'vitest-fetch-mock'
 import * as ServerResponse from '@/assets/__tests__/ExampleAcmgSeqVarRank.json'
 import { AcmgCriteria, MultiSourceAcmgCriteriaState, Presence, StateSource } from '@/lib/acmgSeqVar'
 import { type Seqvar } from '@/lib/genomicVars'
-import { deepCopy } from '@/lib/utils'
 
 import { StoreState } from '../misc'
 import { useSeqVarAcmgRatingStore } from '../seqVarAcmgRating'
@@ -70,7 +69,7 @@ describe.concurrent('geneInfo Store', () => {
     const store = useSeqVarAcmgRatingStore()
     store.storeState = StoreState.Active
     store.acmgRating = JSON.parse(JSON.stringify({ acmg: 'rating' }))
-    store.seqvar = deepCopy(seqvarInfo)
+    store.seqvar = structuredClone(seqvarInfo)
 
     store.clearData()
 
@@ -90,7 +89,7 @@ describe.concurrent('geneInfo Store', () => {
       return Promise.resolve(JSON.stringify({ status: 400 }))
     })
 
-    await store.fetchAcmgRating(deepCopy(seqvarInfo))
+    await store.fetchAcmgRating(structuredClone(seqvarInfo))
 
     expect(store.storeState).toBe(StoreState.Active)
     const expectedAcmgRating = new MultiSourceAcmgCriteriaState()
@@ -119,7 +118,7 @@ describe.concurrent('geneInfo Store', () => {
       )
     }
     expect(store.acmgRating).toStrictEqual(expectedAcmgRating)
-    expect(store.seqvar).toStrictEqual(deepCopy(seqvarInfo))
+    expect(store.seqvar).toStrictEqual(structuredClone(seqvarInfo))
   })
 
   it('should fail to load data with invalid request', async () => {
@@ -128,7 +127,9 @@ describe.concurrent('geneInfo Store', () => {
     const store = useSeqVarAcmgRatingStore()
     fetchMocker.mockResponseOnce(JSON.stringify({ foo: 'bar' }), { status: 400 })
 
-    await expect(async () => await store.fetchAcmgRating(deepCopy(seqvarInfo))).rejects.toThrow()
+    await expect(
+      async () => await store.fetchAcmgRating(structuredClone(seqvarInfo))
+    ).rejects.toThrow()
 
     expect(store.storeState).toBe(StoreState.Error)
     expect(store.acmgRating).toStrictEqual(new MultiSourceAcmgCriteriaState())
@@ -145,7 +146,7 @@ describe.concurrent('geneInfo Store', () => {
       }
       return Promise.resolve(JSON.stringify({ status: 400 }))
     })
-    await store.fetchAcmgRating(deepCopy(seqvarInfo))
+    await store.fetchAcmgRating(structuredClone(seqvarInfo))
 
     expect(store.storeState).toBe(StoreState.Active)
     const expectedAcmgRating = new MultiSourceAcmgCriteriaState()
@@ -176,7 +177,7 @@ describe.concurrent('geneInfo Store', () => {
     expect(store.acmgRating).toStrictEqual(expectedAcmgRating)
     expect(store.seqvar).toStrictEqual(seqvarInfo)
 
-    await store.fetchAcmgRating(deepCopy(store.seqvar))
+    await store.fetchAcmgRating(structuredClone(seqvarInfo))
 
     expect(fetchMocker.mock.calls.length).toBe(2)
   })
diff --git a/frontend/src/stores/__tests__/variantInfo.spec.ts b/frontend/src/stores/__tests__/variantInfo.spec.ts
index c39ae848..abb1b784 100644
--- a/frontend/src/stores/__tests__/variantInfo.spec.ts
+++ b/frontend/src/stores/__tests__/variantInfo.spec.ts
@@ -7,7 +7,6 @@ import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
 import * as BRCA1TxInfo from '@/assets/__tests__/BRCA1TxInfo.json'
 import * as BRCA1VariantInfo from '@/assets/__tests__/BRCA1VariantInfo.json'
 import { type Seqvar } from '@/lib/genomicVars'
-import { deepCopy } from '@/lib/utils'
 
 import { StoreState } from '../misc'
 import { useSeqVarInfoStore } from '../seqVarInfo'
@@ -44,7 +43,7 @@ describe.concurrent('geneInfo Store', () => {
   it('should clear state', () => {
     const store = useSeqVarInfoStore()
     store.storeState = StoreState.Active
-    store.seqvar = deepCopy(seqvarInfo)
+    store.seqvar = structuredClone(seqvarInfo)
     store.varAnnos = JSON.parse(JSON.stringify(BRCA1VariantInfo))
     store.geneInfo = JSON.parse(JSON.stringify(BRCA1GeneInfo))
     store.txCsq = JSON.parse(JSON.stringify(BRCA1TxInfo))
@@ -74,7 +73,7 @@ describe.concurrent('geneInfo Store', () => {
       }
     })
 
-    await store.loadData(deepCopy(seqvarInfo))
+    await store.loadData(structuredClone(seqvarInfo))
 
     expect(store.storeState).toBe(StoreState.Active)
     expect(store.seqvar).toStrictEqual(seqvarInfo)
@@ -89,7 +88,7 @@ describe.concurrent('geneInfo Store', () => {
     const store = useSeqVarInfoStore()
     fetchMocker.mockResponseOnce(JSON.stringify({ foo: 'bar' }), { status: 400 })
 
-    await store.loadData(deepCopy(seqvarInfo))
+    await store.loadData(structuredClone(seqvarInfo))
 
     expect(store.storeState).toBe(StoreState.Error)
     expect(store.seqvar).toBe(undefined)
@@ -118,7 +117,7 @@ describe.concurrent('geneInfo Store', () => {
       }
     })
 
-    await store.loadData(deepCopy(seqvarInfo))
+    await store.loadData(structuredClone(seqvarInfo))
 
     expect(store.storeState).toBe(StoreState.Active)
     expect(store.seqvar).toStrictEqual(seqvarInfo)
@@ -151,7 +150,7 @@ describe.concurrent('geneInfo Store', () => {
       }
     })
 
-    await store.loadData(deepCopy(seqvarInfo))
+    await store.loadData(structuredClone(seqvarInfo))
 
     expect(store.storeState).toBe(StoreState.Active)
     expect(store.seqvar).toStrictEqual(seqvarInfo)
@@ -179,7 +178,7 @@ describe.concurrent('geneInfo Store', () => {
       }
     })
 
-    await store.loadData(deepCopy(seqvarInfo))
+    await store.loadData(structuredClone(seqvarInfo))
 
     expect(console.error).toHaveBeenCalled()
     expect(console.error).toHaveBeenCalledWith(
@@ -209,7 +208,7 @@ describe.concurrent('geneInfo Store', () => {
       }
     })
 
-    await store.loadData(deepCopy(seqvarInfo))
+    await store.loadData(structuredClone(seqvarInfo))
 
     expect(store.storeState).toBe(StoreState.Active)
     expect(store.seqvar).toStrictEqual(seqvarInfo)
@@ -217,7 +216,7 @@ describe.concurrent('geneInfo Store', () => {
     expect(store.geneInfo).toEqual(BRCA1GeneInfo.genes['HGNC:1100'])
     expect(store.txCsq).toEqual(BRCA1TxInfo.result)
 
-    await store.loadData(deepCopy(seqvarInfo))
+    await store.loadData(structuredClone(seqvarInfo))
 
     expect(fetchMocker.mock.calls.length).toBe(5)
   })
diff --git a/frontend/src/stores/case.ts b/frontend/src/stores/case.ts
index 0f80085d..134a2894 100644
--- a/frontend/src/stores/case.ts
+++ b/frontend/src/stores/case.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 import { CaseInfoClient } from '@/api/caseinfo'
-import { MITT, deepCopy } from '@/lib/utils'
+import { MITT } from '@/lib/utils'
 import { useCadaPrioStore } from '@/stores/cadaprio'
 import { StoreState } from '@/stores/misc'
 import { Events as UserStoreEvents, useUserStore } from '@/stores/user'
@@ -195,11 +195,11 @@ export const useCaseStore = defineStore('case', () => {
   const storeState = ref<StoreState>(StoreState.Initial)
 
   /** Currently stored case information. */
-  const caseInfo = ref<Case>(deepCopy(DEFAULT_CASE_INFO))
+  const caseInfo = ref<Case>(structuredClone(DEFAULT_CASE_INFO))
 
   /** Clear all data from store. */
   const clearData = () => {
-    caseInfo.value = deepCopy(DEFAULT_CASE_INFO)
+    caseInfo.value = structuredClone(DEFAULT_CASE_INFO)
   }
 
   /** Refresh the `cadaPrioStore` when the current case's terms change. */
diff --git a/frontend/src/stores/seqVarAcmgRating.ts b/frontend/src/stores/seqVarAcmgRating.ts
index 7ee1ba0a..4d4f53b9 100644
--- a/frontend/src/stores/seqVarAcmgRating.ts
+++ b/frontend/src/stores/seqVarAcmgRating.ts
@@ -6,7 +6,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 import { AcmgSeqVarClient } from '@/api/acmgseqvar'
-import { API_INTERNAL_BASE_PREFIX } from '@/api/common'
+import { InterVarClient } from '@/api/intervar'
 import {
   ALL_ACMG_CRITERIA,
   AcmgCriteria,
@@ -17,8 +17,6 @@ import {
 import { type Seqvar } from '@/lib/genomicVars'
 import { StoreState } from '@/stores/misc'
 
-const API_BASE_URL = API_INTERNAL_BASE_PREFIX
-
 export interface AcmgRatingBackendCriteria {
   criteria: string
   presence: string
@@ -102,17 +100,8 @@ export const useSeqVarAcmgRatingStore = defineStore('seqVarAcmgRating', () => {
 
     // Fetch the ACMG rating from InterVar
     try {
-      const { genomeBuild, chrom, pos, del, ins } = seqvar$
-      const release = genomeBuild === 'grch37' ? 'hg19' : 'hg38'
-      const response = await fetch(
-        `${API_BASE_URL}remote/acmg/?release=${release}&chromosome=${chrom}` +
-          `&position=${pos}&reference=${del}&alternative=${ins}`,
-        { method: 'GET' }
-      )
-      if (!response.ok) {
-        throw new Error('The server responded with an error.')
-      }
-      const acmgRatingInterVarData = await response.json()
+      const client = new InterVarClient()
+      const acmgRatingInterVarData = await client.fetchAcmgRating(seqvar$)
       // Go through the data and setPresense for each criteria
       for (const [criteriaId, value] of Object.entries(acmgRatingInterVarData)) {
         // Skip pp5 and bp6 criteria as they are not used anymore
diff --git a/frontend/src/views/__tests__/ACMGCriteriaDoc.spec.ts b/frontend/src/views/__tests__/ACMGCriteriaDoc.spec.ts
index fa6d62bb..ba1185e7 100644
--- a/frontend/src/views/__tests__/ACMGCriteriaDoc.spec.ts
+++ b/frontend/src/views/__tests__/ACMGCriteriaDoc.spec.ts
@@ -8,7 +8,7 @@ import ACMGCriteriaDocs from '../ACMGCriteriaDocs.vue'
 describe.concurrent('ACMGCriteriaDocs', async () => {
   it('renders the header', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ACMGCriteriaDocs, template: true },
+      { component: ACMGCriteriaDocs },
       {
         initialStoreState: {
           misc: {
@@ -26,7 +26,7 @@ describe.concurrent('ACMGCriteriaDocs', async () => {
 
   it('renders the main content', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ACMGCriteriaDocs, template: true },
+      { component: ACMGCriteriaDocs },
       {
         initialStoreState: {
           misc: {
diff --git a/frontend/src/views/__tests__/ACMGSVDocs.spec.ts b/frontend/src/views/__tests__/ACMGSVDocs.spec.ts
index 6b4683c3..227ebc9d 100644
--- a/frontend/src/views/__tests__/ACMGSVDocs.spec.ts
+++ b/frontend/src/views/__tests__/ACMGSVDocs.spec.ts
@@ -8,7 +8,7 @@ import ACMGSVDocs from '../ACMGSVDocs.vue'
 describe.concurrent('ACMGSVDocs', async () => {
   it('renders the header', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ACMGSVDocs, template: true },
+      { component: ACMGSVDocs },
       {
         initialStoreState: {
           misc: {
@@ -26,7 +26,7 @@ describe.concurrent('ACMGSVDocs', async () => {
 
   it('renders the main content', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ACMGSVDocs, template: true },
+      { component: ACMGSVDocs },
       {
         initialStoreState: {
           misc: {
diff --git a/frontend/src/views/__tests__/GeneDetailView.spec.ts b/frontend/src/views/__tests__/GeneDetailView.spec.ts
index 4dbc2d51..32faef29 100644
--- a/frontend/src/views/__tests__/GeneDetailView.spec.ts
+++ b/frontend/src/views/__tests__/GeneDetailView.spec.ts
@@ -1,207 +1,83 @@
-import { createTestingPinia } from '@pinia/testing'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import createFetchMock from 'vitest-fetch-mock'
 import { nextTick } from 'vue'
-import { VMenu } from 'vuetify/components'
 
 import * as BRCA1ClinVar from '@/assets/__tests__/BRCA1ClinVar.json'
 import * as BRCA1geneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
 import * as BRCA1Transcripts from '@/assets/__tests__/BRCA1Transcripts.json'
-import ClinvarCard from '@/components/GeneDetails/ClinvarCard.vue'
-import ConditionsCard from '@/components/GeneDetails/ConditionsCard.vue'
-import ExpressionCard from '@/components/GeneDetails/ExpressionCard.vue'
-import OverviewCard from '@/components/GeneDetails/OverviewCard.vue'
-import PathogenicityCard from '@/components/GeneDetails/PathogenicityCard.vue'
-import PageHeader from '@/components/PageHeader.vue'
-import SearchBar from '@/components/SearchBar.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
-import { usegeneInfoStore } from '@/stores/geneInfo'
 import { StoreState } from '@/stores/misc'
-import { usePubtatorStore } from '@/stores/pubtator'
 import GeneDetailView from '@/views/GeneDetailView.vue'
 
-const geneData = {
-  storeState: StoreState.Active,
-  geneSymbol: 'HGNC:1100',
-  geneInfo: JSON.parse(JSON.stringify(BRCA1geneInfo)).genes['HGNC:1100'],
-  geneClinvar: JSON.parse(JSON.stringify(BRCA1ClinVar)).genes['HGNC:1100'],
-  transcripts: JSON.parse(JSON.stringify(BRCA1Transcripts))
-}
-
-const makeWrapper = () => {
-  const pinia = createTestingPinia({ createSpy: vi.fn })
-  const geneInfoStore = usegeneInfoStore(pinia)
-  const mockLoadData = vi.fn().mockImplementation(async (geneSymbol: string) => {
-    geneInfoStore.storeState = StoreState.Active
-    geneInfoStore.hgncId = geneSymbol
-    geneInfoStore.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
-    geneInfoStore.geneClinvar = JSON.parse(JSON.stringify(geneData.geneClinvar))
-    geneInfoStore.transcripts = JSON.parse(JSON.stringify(geneData.transcripts))
-  })
-  geneInfoStore.loadData = mockLoadData
-
-  geneInfoStore.storeState = StoreState.Active
-  geneInfoStore.hgncId = geneData.geneSymbol
-  geneInfoStore.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
-  geneInfoStore.geneClinvar = JSON.parse(JSON.stringify(geneData.geneClinvar))
-  geneInfoStore.transcripts = JSON.parse(JSON.stringify(geneData.transcripts))
-
-  const pubtatorStore = usePubtatorStore(pinia)
-  pubtatorStore.storeState = StoreState.Active
-  pubtatorStore.hgncSymbol = geneData.geneSymbol
-
+/** Local helper that performs store setup and selective stubbing. */
+const makeWrapper = (geneInfoStoreState: StoreState) => {
   return setupMountedComponents(
     {
       component: GeneDetailView,
-      template: true
+      shallow: true,
+      stubs: {
+        GeneDetailView: false,
+        VAlert: false
+      }
     },
     {
-      props: {
-        searchTerm: 'HGNC:1100',
-        genomeRelease: 'grch37'
+      initialStoreState: {
+        geneInfo: {
+          storeState: geneInfoStoreState,
+          hgncId: 'HGNC:1100',
+          geneInfo: structuredClone(BRCA1geneInfo).genes['HGNC:1100'],
+          geneClinvar: structuredClone(BRCA1ClinVar).genes['HGNC:1100'],
+          transcripts: structuredClone(BRCA1Transcripts)
+        },
+        pubtator: {
+          storeState: StoreState.Active,
+          hgncId: 'HGNC:1100'
+        }
       },
-      pinia: pinia
+      props: {
+        hgncSymbol: 'BRCA1'
+      }
     }
   )
 }
 
 describe.concurrent('GeneDetailView', async () => {
-  beforeEach(() => {
-    // Disable Vue warn. This warning is caused by BookmarkListItem.vue due to
-    // unproper mocking of the store and props passed to the component.
-    const spy = vi.spyOn(console, 'warn')
-    spy.mockImplementation(() => {})
-  })
-
-  it('renders the header', async () => {
-    const { wrapper } = await makeWrapper()
-
-    const header = wrapper.findComponent(PageHeader)
-    const searchBar = wrapper.findComponent(SearchBar)
-    expect(header.exists()).toBe(true)
-    expect(searchBar.exists()).toBe(true)
-
-    const logo = wrapper.find('#logo')
-    const menu = wrapper.findComponent(VMenu)
-    expect(logo.exists()).toBe(true)
-    expect(menu.exists()).toBe(true)
-  })
-
-  it('renders info-cards and navigation drawer', async () => {
-    const { wrapper } = await makeWrapper()
-
-    // Renders the anchors
-    const geneOverview = wrapper.find('#gene-overview')
-    const genePathogencity = wrapper.find('#gene-pathogenicity')
-    const geneConditions = wrapper.find('#gene-conditions')
-    const geneExpression = wrapper.find('#gene-expression')
-    const geneClinvar = wrapper.find('#gene-clinvar')
-    expect(geneOverview.exists()).toBe(true)
-    expect(genePathogencity.exists()).toBe(true)
-    expect(geneConditions.exists()).toBe(true)
-    expect(geneExpression.exists()).toBe(true)
-    expect(geneClinvar.exists()).toBe(true)
+  const fetchMocker = createFetchMock(vi)
 
-    // Renders the main content
-    const overviewCard = wrapper.findComponent(OverviewCard)
-    const pathogencityCard = wrapper.findComponent(PathogenicityCard)
-    const conditionsCard = wrapper.findComponent(ConditionsCard)
-    const expressionCard = wrapper.findComponent(ExpressionCard)
-    const clinvarCard = wrapper.findComponent(ClinvarCard)
-    expect(overviewCard.exists()).toBe(true)
-    expect(pathogencityCard.exists()).toBe(true)
-    expect(conditionsCard.exists()).toBe(true)
-    expect(expressionCard.exists()).toBe(true)
-    expect(clinvarCard.exists()).toBe(true)
+  beforeEach(() => {
+    // Setup the fetchMocker to capture any `fetch()` requests.
+    fetchMocker.enableMocks()
+    fetchMocker.resetMocks()
   })
 
-  it('emits update in header', async () => {
-    const { wrapper } = await makeWrapper()
-
-    const header = wrapper.findComponent(PageHeader)
-    expect(header.exists()).toBe(true)
-    await header.setValue('HGNC:1100', 'searchTermRef')
-    await header.setValue('grch37', 'genomeReleaseRef')
-    expect(header.emitted()).toHaveProperty('update:searchTermRef')
-    expect(header.emitted()).toHaveProperty('update:genomeReleaseRef')
-    expect(header.vm.$props).toStrictEqual({ hideSearchBar: false })
-
-    const searchBar = wrapper.findComponent(SearchBar)
-    expect(searchBar.exists()).toBe(true)
-    await searchBar.setValue('HGNC:1100', 'searchTerm')
-    await searchBar.setValue('grch37', 'genomeRelease')
-    expect(searchBar.emitted()).toHaveProperty('update:searchTerm')
-    expect(searchBar.emitted()).toHaveProperty('update:genomeRelease')
-    expect(searchBar.vm.$props).toStrictEqual({
-      density: 'compact',
-      searchTerm: 'HGNC:1100',
-      genomeRelease: 'grch37'
+  it('looks up gene and renders stubbed components', async () => {
+    // arrange:
+    fetchMock.mockResponse((req) => {
+      if (req.url === '/internal/proxy/annonars/genes/search?q=BRCA1') {
+        return 'HGNC:1100'
+      } else {
+        return 'default mock response'
+      }
     })
-  })
 
-  it('emits scroll to section', async () => {
-    const { wrapper, router } = await makeWrapper()
+    const { wrapper } = await makeWrapper(StoreState.Active)
 
-    const geneOverviewLink = wrapper.find('#gene-overview-nav')
-    expect(geneOverviewLink.exists()).toBe(true)
-
-    await geneOverviewLink.trigger('click')
+    // act: nothing, just wait for the next tick
     await nextTick()
-    expect(router.push).toHaveBeenCalled()
-    expect(router.push).toHaveBeenCalledWith({
-      hash: '#gene-overview',
-      query: { genomeBuild: 'grch37' }
-    })
 
-    // Check if hgnc triggered scrollIntoView()
-    const geneOverviewCard = wrapper.find('#gene-overview')
-    expect(geneOverviewCard.exists()).toBe(true)
-    expect(geneOverviewCard.element.scrollTop).toBe(0)
-  })
-
-  it('shows the Error message', async () => {
-    const pinia = createTestingPinia({ createSpy: vi.fn })
-    const store = usegeneInfoStore(pinia)
-    const mockLoadData = vi.fn().mockImplementation(async (geneSymbol: string) => {
-      store.storeState = StoreState.Error
-      store.hgncId = geneSymbol
-      store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
-      store.geneClinvar = JSON.parse(JSON.stringify(geneData.geneClinvar))
-      store.transcripts = JSON.parse(JSON.stringify(geneData.transcripts))
-    })
-    const mockClearData = vi.fn().mockImplementation(() => {
-      store.storeState = StoreState.Initial
-      store.hgncId = ''
-      store.geneInfo = {}
-      store.geneClinvar = {}
-      store.transcripts = {}
-    })
-    store.loadData = mockLoadData
-    store.clearData = mockClearData
-
-    store.storeState = StoreState.Active
-    store.hgncId = geneData.geneSymbol
-    store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
-    store.geneClinvar = JSON.parse(JSON.stringify(geneData.geneClinvar))
-    store.transcripts = JSON.parse(JSON.stringify(geneData.transcripts))
-
-    const { wrapper } = await setupMountedComponents(
-      {
-        component: GeneDetailView,
-        template: true
-      },
-      {
-        props: {
-          searchTerm: 'HGNC:1100',
-          genomeRelease: 'grch37'
-        },
-        pinia: pinia
-      }
+    // assert:
+    expect(wrapper.html()).toContain('<bookmark-list-item-stub id="HGNC:1100" type="gene">')
+    expect(wrapper.html()).toContain(
+      '<overview-card-stub gene-info="[object Object]" show-gene-details-link="false">'
     )
+    expect(wrapper.html()).toContain('<pathogenicity-card-stub gene-info="[object Object]">')
+    expect(wrapper.html()).toContain('<conditions-card-stub gene-info="[object Object]"')
+    expect(wrapper.html()).toContain('<expression-card-stub gene-symbol="BRCA1"')
+    expect(wrapper.html()).toContain(
+      '<clinvar-card-stub gene-clinvar="[object Object]" transcripts="[object Object]" genome-build="grch37" gene-info="[object Object]"'
+    )
+    expect(wrapper.html()).toContain('<literature-card-stub gene-info="[object Object]">')
 
-    await nextTick()
-
-    const errorMessage = wrapper.findComponent({ name: 'VAlert' })
-    expect(errorMessage.exists()).toBe(true)
-    expect(errorMessage.text()).toContain('Error:')
+    expect(fetchMock).toHaveBeenCalledOnce()
   })
 })
diff --git a/frontend/src/views/__tests__/HomeView.spec.ts b/frontend/src/views/__tests__/HomeView.spec.ts
index 6983cd3f..c9693b63 100644
--- a/frontend/src/views/__tests__/HomeView.spec.ts
+++ b/frontend/src/views/__tests__/HomeView.spec.ts
@@ -30,7 +30,7 @@ describe.concurrent('HomeView with mocked router', async () => {
 
   it('renders the header and the footer', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: HomeView, template: true },
+      { component: HomeView },
       {
         initialStoreState: {
           geneInfo: {
@@ -57,7 +57,7 @@ describe.concurrent('HomeView with mocked router', async () => {
 
   it('renders the search bar', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: HomeView, template: true },
+      { component: HomeView },
       {
         initialStoreState: {
           geneInfo: {
@@ -82,7 +82,7 @@ describe.concurrent('HomeView with mocked router', async () => {
 
   it('renders example search terms', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: HomeView, template: true },
+      { component: HomeView },
       {
         initialStoreState: {
           geneInfo: {
@@ -109,7 +109,7 @@ describe.concurrent('HomeView with mocked router', async () => {
     )
 
     const { wrapper } = await setupMountedComponents(
-      { component: HomeView, template: true },
+      { component: HomeView },
       {
         initialStoreState: {
           geneInfo: {
@@ -136,7 +136,7 @@ describe.concurrent('HomeView with mocked router', async () => {
     )
 
     const { wrapper, router } = await setupMountedComponents(
-      { component: HomeView, template: true },
+      { component: HomeView },
       {
         initialStoreState: {
           geneInfo: {
diff --git a/frontend/src/views/__tests__/LoginView.spec.ts b/frontend/src/views/__tests__/LoginView.spec.ts
index 00b088a2..c583d956 100644
--- a/frontend/src/views/__tests__/LoginView.spec.ts
+++ b/frontend/src/views/__tests__/LoginView.spec.ts
@@ -7,7 +7,7 @@ import LoginView from '../LoginView.vue'
 
 describe.concurrent('Login view', async () => {
   it('renders the main content', async () => {
-    const { wrapper } = await setupMountedComponents({ component: LoginView, template: true }, {})
+    const { wrapper } = await setupMountedComponents({ component: LoginView }, {})
 
     expect(wrapper.html()).toMatch('REEV Explains and Evaluates Variants')
 
@@ -31,7 +31,7 @@ describe.concurrent('Login view', async () => {
     global.fetch = vi.fn((): any =>
       Promise.resolve({ ok: true, json: () => Promise.resolve(JSON.stringify({ status: 200 })) })
     )
-    const { wrapper } = await setupMountedComponents({ component: LoginView, template: true }, {})
+    const { wrapper } = await setupMountedComponents({ component: LoginView }, {})
 
     const emailField = wrapper.find('#email')
     const passwordField = wrapper.find('#password')
@@ -51,7 +51,7 @@ describe.concurrent('Login view', async () => {
     global.fetch = vi.fn((): any =>
       Promise.resolve({ ok: false, json: () => Promise.resolve({ foo: 'foo' }) })
     )
-    const { wrapper } = await setupMountedComponents({ component: LoginView, template: true }, {})
+    const { wrapper } = await setupMountedComponents({ component: LoginView }, {})
 
     const emailField = wrapper.find('#email')
     const passwordField = wrapper.find('#password')
diff --git a/frontend/src/views/__tests__/PathNotFound.spec.ts b/frontend/src/views/__tests__/PathNotFound.spec.ts
index fa74c653..90a62efa 100644
--- a/frontend/src/views/__tests__/PathNotFound.spec.ts
+++ b/frontend/src/views/__tests__/PathNotFound.spec.ts
@@ -6,7 +6,7 @@ import PathNotFound from '../PathNotFound.vue'
 
 describe.concurrent('PathNotFound', async () => {
   it('renders the main content', async () => {
-    const { wrapper } = await setupMountedComponents({ component: PathNotFound, template: false })
+    const { wrapper } = await setupMountedComponents({ component: PathNotFound })
 
     const mainContent = wrapper.find('.not-found')
     expect(mainContent.exists()).toBe(true)
diff --git a/frontend/src/views/__tests__/ProfileView.spec.ts b/frontend/src/views/__tests__/ProfileView.spec.ts
index c84ca826..bf8afbae 100644
--- a/frontend/src/views/__tests__/ProfileView.spec.ts
+++ b/frontend/src/views/__tests__/ProfileView.spec.ts
@@ -18,7 +18,7 @@ const adminUser: UserData = {
 
 describe.concurrent('Profile view', async () => {
   it('renders the header', async () => {
-    const { wrapper } = await setupMountedComponents({ component: ProfileView, template: true }, {})
+    const { wrapper } = await setupMountedComponents({ component: ProfileView }, {})
 
     const header = wrapper.findComponent(PageHeader)
     expect(header.exists()).toBe(true)
@@ -26,7 +26,7 @@ describe.concurrent('Profile view', async () => {
 
   it('renders the main content if logged in', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ProfileView, template: true },
+      { component: ProfileView },
       {
         initialStoreState: {
           user: {
@@ -46,7 +46,7 @@ describe.concurrent('Profile view', async () => {
 
   it('renders the main content if not logged in', async () => {
     const { wrapper } = await setupMountedComponents(
-      { component: ProfileView, template: true },
+      { component: ProfileView },
       {
         initialStoreState: {
           user: {
diff --git a/frontend/src/views/__tests__/SeqvarDetailsView.spec.ts b/frontend/src/views/__tests__/SeqvarDetailsView.spec.ts
index 77a4d05a..fbe92388 100644
--- a/frontend/src/views/__tests__/SeqvarDetailsView.spec.ts
+++ b/frontend/src/views/__tests__/SeqvarDetailsView.spec.ts
@@ -24,7 +24,6 @@ import VariantValidatorCard from '@/components/SeqvarDetails/VariantValidatorCar
 import { AcmgCriteria, MultiSourceAcmgCriteriaState, Presence, StateSource } from '@/lib/acmgSeqVar'
 import { type Seqvar } from '@/lib/genomicVars'
 import { setupMountedComponents } from '@/lib/test-utils'
-import { deepCopy } from '@/lib/utils'
 import { StoreState } from '@/stores/misc'
 import { useSeqVarAcmgRatingStore } from '@/stores/seqVarAcmgRating'
 import { useSeqVarInfoStore } from '@/stores/seqVarInfo'
@@ -56,7 +55,7 @@ const makeWrapper = () => {
   const seqvarAcmgStore = useSeqVarAcmgRatingStore(pinia)
   const mockLoadData = vi.fn().mockImplementation(async (seqvar: Seqvar) => {
     seqvarInfoStore.storeState = StoreState.Active
-    seqvarInfoStore.seqvar = deepCopy(seqvar)
+    seqvarInfoStore.seqvar = structuredClone(seqvar)
     seqvarInfoStore.varAnnos = JSON.parse(JSON.stringify(seqvarData.varAnnos))
     seqvarInfoStore.geneInfo = JSON.parse(JSON.stringify(seqvarData.geneInfo))
     seqvarInfoStore.geneClinvar = JSON.parse(JSON.stringify(seqvarData.geneClinvar))
@@ -66,7 +65,7 @@ const makeWrapper = () => {
 
   const mockRetrieveAcmgRating = vi.fn().mockImplementation(async () => {
     seqvarAcmgStore.storeState = StoreState.Active
-    seqvarInfoStore.seqvar = deepCopy(seqvarInfo)
+    seqvarInfoStore.seqvar = structuredClone(seqvarInfo)
     seqvarAcmgStore.acmgRating = new MultiSourceAcmgCriteriaState()
     seqvarAcmgStore.acmgRating.setPresence(
       StateSource.InterVar,
@@ -78,17 +77,17 @@ const makeWrapper = () => {
 
   // Initial load
   seqvarInfoStore.storeState = StoreState.Active
-  seqvarInfoStore.seqvar = deepCopy(seqvarInfo)
+  seqvarInfoStore.seqvar = structuredClone(seqvarInfo)
   seqvarInfoStore.varAnnos = JSON.parse(JSON.stringify(seqvarData.varAnnos))
   seqvarInfoStore.geneInfo = JSON.parse(JSON.stringify(seqvarData.geneInfo))
   seqvarInfoStore.geneClinvar = JSON.parse(JSON.stringify(seqvarData.geneClinvar))
   seqvarInfoStore.txCsq = JSON.parse(JSON.stringify(seqvarData.txCsq))
   seqvarAcmgStore.storeState = StoreState.Active
-  seqvarInfoStore.seqvar = deepCopy(seqvarInfo)
+  seqvarInfoStore.seqvar = structuredClone(seqvarInfo)
   seqvarAcmgStore.acmgRating = new MultiSourceAcmgCriteriaState()
 
   return setupMountedComponents(
-    { component: SeqvarDetailsView, template: true },
+    { component: SeqvarDetailsView },
     {
       props: {
         searchTerm: 'chr17:43044295:G:A',
@@ -198,26 +197,25 @@ describe.concurrent('SeqvarDetailsView', async () => {
 
     const mockRetrieveAcmgRating = vi.fn().mockImplementation(async () => {
       seqvarAcmgStore.storeState = StoreState.Active
-      seqvarAcmgStore.seqvar = deepCopy(seqvarInfo)
+      seqvarAcmgStore.seqvar = structuredClone(seqvarInfo)
       seqvarAcmgStore.acmgRating = new MultiSourceAcmgCriteriaState()
     })
     seqvarAcmgStore.fetchAcmgRating = mockRetrieveAcmgRating
 
     // Initial load
     seqvarInfoStore.storeState = StoreState.Active
-    seqvarAcmgStore.seqvar = deepCopy(seqvarInfo)
+    seqvarAcmgStore.seqvar = structuredClone(seqvarInfo)
     seqvarInfoStore.varAnnos = JSON.parse(JSON.stringify(seqvarData.varAnnos))
     seqvarInfoStore.geneInfo = JSON.parse(JSON.stringify(seqvarData.geneInfo))
     seqvarInfoStore.geneClinvar = JSON.parse(JSON.stringify(seqvarData.geneClinvar))
     seqvarInfoStore.txCsq = JSON.parse(JSON.stringify(seqvarData.txCsq))
     seqvarAcmgStore.storeState = StoreState.Active
-    seqvarAcmgStore.seqvar = deepCopy(seqvarInfo)
+    seqvarAcmgStore.seqvar = structuredClone(seqvarInfo)
     seqvarAcmgStore.acmgRating = new MultiSourceAcmgCriteriaState()
 
     const { wrapper } = await setupMountedComponents(
       {
-        component: SeqvarDetailsView,
-        template: true
+        component: SeqvarDetailsView
       },
       {
         props: {
diff --git a/frontend/src/views/__tests__/StaticView.spec.ts b/frontend/src/views/__tests__/StaticView.spec.ts
index e04f4069..14d1e157 100644
--- a/frontend/src/views/__tests__/StaticView.spec.ts
+++ b/frontend/src/views/__tests__/StaticView.spec.ts
@@ -6,14 +6,14 @@ import StaticView from '@/views/StaticView.vue'
 
 describe.concurrent('StaticView', async () => {
   it('renders the about page', async () => {
-    const { wrapper } = await setupMountedComponents({ component: StaticView, template: true })
+    const { wrapper } = await setupMountedComponents({ component: StaticView })
 
     expect(wrapper.exists()).toBe(true)
     expect(wrapper.text()).toMatch('About REEV')
   })
 
   it('renders the header', async () => {
-    const { wrapper } = await setupMountedComponents({ component: StaticView, template: true })
+    const { wrapper } = await setupMountedComponents({ component: StaticView })
 
     const header = wrapper.findComponent(PageHeader)
     expect(header.exists()).toBe(true)
diff --git a/frontend/src/views/__tests__/StrucvarDetailsView.spec.ts b/frontend/src/views/__tests__/StrucvarDetailsView.spec.ts
index 9d7968d6..8465e95b 100644
--- a/frontend/src/views/__tests__/StrucvarDetailsView.spec.ts
+++ b/frontend/src/views/__tests__/StrucvarDetailsView.spec.ts
@@ -42,7 +42,7 @@ const makeWrapper = () => {
   svInfoStore.genesInfos = JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']]))
 
   return setupMountedComponents(
-    { component: StrucvarDetailsView, template: false },
+    { component: StrucvarDetailsView },
     {
       props: {
         strucvarDesc: 'DEL-grch37-17-41176312-41277500'
diff --git a/frontend/src/views/__tests__/VerifyEmailView.spec.ts b/frontend/src/views/__tests__/VerifyEmailView.spec.ts
index 822c97af..c464c5c3 100644
--- a/frontend/src/views/__tests__/VerifyEmailView.spec.ts
+++ b/frontend/src/views/__tests__/VerifyEmailView.spec.ts
@@ -40,7 +40,7 @@ describe.concurrent('VerifyView', async () => {
   it('calls sendVerifyPost on mount', async () => {
     const token = 'mock-token'
     const { wrapper, router } = await setupMountedComponents(
-      { component: VerifyView, template: true },
+      { component: VerifyView },
       {
         query: { token }
       }
@@ -60,7 +60,7 @@ describe.concurrent('VerifyView', async () => {
     // Mock a delay in verification
     vi.useFakeTimers()
     const { wrapper } = await setupMountedComponents(
-      { component: VerifyView, template: true },
+      { component: VerifyView },
       {
         query: { token: 'mock-token' }
       }