feat: add vitest for unit testing

docs/3. Technical Reference/1. Code Dependencies.md

@@ -14,3 +14,7 @@ The following are used by our Modals components:
 - body-scroll-lock
 - focus-trap
 
+The following are used for unit testing:
+
+- @nuxt/test-utils-edge
+- vitest

vitest/e2e/ssr.spec.js

@@ -0,0 +1,41 @@
+/* @vitest-environment node */
+import { fileURLToPath } from 'node:url';
+import { $fetch, createTest } from '@nuxt/test-utils';
+
+/* eslint-disable sort-imports */
+import {
+  beforeAll,
+  beforeEach,
+  afterEach,
+  afterAll,
+  describe,
+  expect,
+  it,
+} from 'vitest';
+/* eslint-enable sort-imports */
+
+const hooks = createTest({
+  server: true,
+  dev: true,
+  rootDir: fileURLToPath(new URL('../../.', import.meta.url)),
+});
+
+beforeAll(hooks.setup, 120 * 1000);
+beforeEach(hooks.beforeEach);
+afterEach(hooks.afterEach);
+afterAll(hooks.afterAll);
+
+describe('nuxt ionic', async () => {
+  it('renders web components', async () => {
+    const html = await $fetch('/');
+    expect(html).toContain(
+      '<ion-app><!--[--><ion-router-outlet></ion-router-outlet><!--]--></ion-app>',
+    );
+  });
+  it('renders correct viewport tags', async () => {
+    const html = await $fetch('/');
+    expect(html).toContain(
+      '<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">',
+    );
+  });
+});

vitest/package.json

@@ -0,0 +1,11 @@
+{
+  "packageManager": "[email protected]",
+  "scripts": {
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@nuxt/test-utils": "^3.0.0-rc.9",
+    "jsdom": "^20.0.0",
+    "vitest": "^0.23.1"
+  }
+}

vitest/vitest.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+  },
+});