fix: check element match snapshot instead of wrapper

.github/workflows/ci.yaml

@@ -41,7 +41,7 @@ jobs:
         run: pnpm lint
 
       - name: Run formatter 
-        run: pnpm format 
+        run: pnpm format
 
       - name: Run unit tests 
         run: pnpm run test:unit 

index.d.ts

@@ -1,4 +1,5 @@
 declare module '*.svg?component' {
   const value: string;
   export default value;
-}
+}
+declare module '*.vue';

src/components/Footer/WFooter.spec.ts

@@ -75,6 +75,6 @@ describe('WFooter', () => {
       }
     })
 
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.element).toMatchSnapshot()
   })
 })

src/components/Footer/WFooter.vue

@@ -59,8 +59,8 @@
 import AdoIcon from '@/assets/svg/ado.svg?component'
 import WitOracleIcon from '@/assets/svg/witnet-logo-dark.svg?component'
 import { FooterSection } from './WFooter.ts'
-import LicenseText from './LicenseText.vue'
-import WSection from '../Section/WSection.vue'
+import LicenseText from '@/components/Footer/LicenseText.vue'
+import WSection from '@/components/Section/WSection.vue'
 import { PropType } from 'vue'
 
 const ADO_URL = 'https://github.com/adoracles/'

src/components/Section/WSection.spec.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest'
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import WSection from './WSection.vue'
+
+describe('WSection', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WSection, {
+      props: {
+        frameClasses: 'bg-black-950',
+        contentClasses: 'grid justify-items-center',
+      },
+      slots: {
+        content: h('p', 'Section content')
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

src/components/Section/WSection.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+// import { fn } from '@storybook/test';
+import WSection from './WSection.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta: any = {
+  title: 'Example/WSection',
+  component: WSection,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    // type: { control: 'select', options: ['primary', 'secondary', 'arrow', 'dark'] }
+  },
+  args: {
+    // type: 'primary'
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    // onClick: fn(),
+  }
+} satisfies Meta<typeof WSection>
+
+export default meta
+type Story = StoryObj<typeof meta>
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+
+export const Section: Story = {
+  render: (args: any) => ({
+    components: { WSection },
+    setup() {
+      return { args }
+    },
+    template: `<WSection v-bind="args">
+        <template #content>
+          <p class="text-white-50">Section content<p>
+        </template>
+      </WSection>`
+  }),
+  args: {
+    frameClasses: 'bg-black-950',
+    contentClasses: 'grid justify-items-center',
+  }
+}

src/components/Section/__snapshots__/WSection.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`WSection > renders properly 1`] = `
+<div
+  class="w-full h-full bg-black-950"
+>
+  <div
+    class="content p-[100px] m-[0_auto] max-w-[1100px] w-full sm:p-[70px_32px] xs:p-[70px_16px] z-50 grid justify-items-center"
+  >
+    
+    <p>
+      Section content
+    </p>
+    
+  </div>
+</div>
+`;

vitest.config.ts

@@ -7,6 +7,9 @@ export default mergeConfig(
   defineConfig({
     test: {
       environment: 'jsdom',
+      snapshotFormat: {
+        printBasicPrototype: true
+      },
       exclude: [...configDefaults.exclude, 'e2e/**'],
       root: fileURLToPath(new URL('./', import.meta.url))
     }