test: fail a11y tests if warnings are emitted by components

Author: danielroe

test/nuxt/a11y.spec.ts

@@ -3,7 +3,7 @@ import { mountSuspended } from '@nuxt/test-utils/runtime'
 import type { VueWrapper } from '@vue/test-utils'
 import 'axe-core'
 import type { AxeResults, RunOptions } from 'axe-core'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, type MockInstance, vi } from 'vitest'
 
 // axe-core is a UMD module that exposes itself as window.axe in the browser
 declare const axe: {
@@ -48,6 +48,35 @@ async function runAxe(wrapper: VueWrapper): Promise<AxeResults> {
   return axe.run(container, axeRunOptions)
 }
 
+// --- Console warning assertion --------------------------------------------------
+// Fail any test that emits unexpected console.warn calls. This catches issues
+// like missing/invalid props that would otherwise silently pass.
+let warnSpy: MockInstance
+
+// Patterns that are expected and safe to ignore in the test environment.
+const allowedWarnings: RegExp[] = [
+  // vue-i18n logs this when <i18n-t> is used outside a component-scoped i18n;
+  // it falls back to the global scope and still renders correctly.
+  /\[intlify\] Not found parent scope/,
+]
+
+beforeEach(() => {
+  warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  // Collect unexpected warnings
+  const unexpected = warnSpy.mock.calls.filter(
+    args => !allowedWarnings.some(re => re.test(String(args[0]))),
+  )
+  warnSpy.mockRestore()
+
+  if (unexpected.length > 0) {
+    const msgs = unexpected.map(args => args.map(String).join(' ')).join('\n')
+    throw new Error(`Test emitted unexpected console.warn:\n${msgs}`)
+  }
+})
+
 // Clean up mounted containers after each test
 afterEach(() => {
   for (const container of mountedContainers) {
@@ -65,9 +94,15 @@ vi.mock('vue-data-ui/vue-ui-xy', () => {
     VueUiXy: defineComponent({
       name: 'VueUiXy',
       inheritAttrs: false,
-      setup(_, { attrs, slots }) {
-        return () =>
-          h('div', { ...attrs, 'data-test-id': 'vue-ui-xy-stub' }, slots.default?.() ?? [])
+      // Declare the props VueUiXy receives so they don't fall through to attrs.
+      // Spreading `dataset` onto a DOM element triggers a Vue warning because
+      // HTMLElement.dataset is a read-only getter.
+      props: {
+        dataset: { type: Array, default: () => [] },
+        config: { type: Object, default: () => ({}) },
+      },
+      setup(_, { slots }) {
+        return () => h('div', { 'data-test-id': 'vue-ui-xy-stub' }, slots.default?.() ?? [])
       },
     }),
   }