Trouble Testing Error Handling in Next.js Component with TypeScript and Vitest

Question

Environment:
"next": "14.2.3",
"vitest": "1.6.0",
"@testing-library/jest-dom": "6.4.5",

I'm trying to write tests for a Next.js component using TypeScript and Vitest. My component, ToastIcon, renders different SVG icons based on the type prop and throws an error for unhandled types. However, I'm having trouble getting my tests for the error handling to work correctly. Here is my ToastIcon.tsx component:

import Image from 'next/image';
import nextConfig from '@/next.config.mjs';

type ToastType = 'success' | 'error' | 'info' | 'warning';
export const ToastIcon = ({ type }: { type: ToastType }) => {
  switch (type) {
    case 'info':
      return (
        <Image
          width={21}
          height={21}
          src={`${nextConfig.basePath}/toast/info.svg`}
          alt='info'
        />
      );
    case 'success':
      return (
        <Image
          width={21}
          height={21}
          src={`${nextConfig.basePath}/toast/success.svg`}
          alt='success'
        />
      );
    case 'warning':
      return (
        <Image
          width={21}
          height={21}
          src={`${nextConfig.basePath}/toast/warning.svg`}
          alt='warning'
        />
      );
    case 'error':
      return (
        <Image
          width={21}
          height={21}
          src={`${nextConfig.basePath}/toast/error.svg`}
          alt='error'
        />
      );
    default:
      const _propertyType: never = type;
      throw new Error(`Unhandled ToastType: ${_propertyType}`);
  }
};

And here is my test file ToastIcon.test.tsx:

import { describe, expect, test } from 'vitest';
import { render } from '@testing-library/react';
import { Toast, ToastIcon } from './Toast';

describe.concurrent('ToastIcon', () => {
  const testData: Array<
    Array<React.ComponentProps<typeof Toast>['toastItem']['type']>
  > = [
    ['info', 'info'],
    ['success', 'success'],
    ['warning', 'warning'],
    ['error', 'error'],
  ];
  test.each(testData)(
    'type: %s, icon: %s',
    (type, expected) => {
      const result = render(<ToastIcon type={type} />);
      expect(result.getByAltText(expected)).toBeVisible();
    },
  );
});

describe.concurrent('Toast', () => {
  test('throws error', () => {
    expect(() =>
      // @ts-expect-error
      render(<ToastIcon type='invalidType' />),
    ).toThrowError('Unhandled ToastType: invalidType');
  });
});

I'm running the tests with the following command:

npx vitest run

But I keep running into issues, especially with the test for the unhandled type error. The error isn't being asserted as expected with the error statement following:

Error: Uncaught [Error: Unhandled ToastType: invalidType]
at reportException (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at innerInvokeEventListeners (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
at invokeEventListeners (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
at HTMLUnknownElementImpl.dispatch (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
at HTMLUnknownElementImpl.dispatchEvent (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
at HTMLUnknownElement.dispatchEvent (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
at invokeGuardedCallback (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
at beginWork$1 (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:27490:7)
at performUnitOfWork (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26599:12) Error: Unhandled ToastType: invalidType
at ToastIcon (/path/to/your/project/modules/userInterface//toast/Toast.tsx:70:13)
at renderWithHooks (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
at mountIndeterminateComponent (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:20103:13)
at beginWork (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:21626:16)
at HTMLUnknownElement.callCallback (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
at HTMLUnknownElement.callTheUserObjectsOperation (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
at invokeEventListeners (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
at HTMLUnknownElementImpl._dispatch (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
at HTMLUnknownElementImpl.dispatchEvent (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
Error: Uncaught [Error: Unhandled ToastType: invalidType]
at reportException (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at innerInvokeEventListeners (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
at invokeEventListeners (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
at HTMLUnknownElementImpl.dispatch (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
at HTMLUnknownElementImpl.dispatchEvent (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
at HTMLUnknownElement.dispatchEvent (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
at invokeGuardedCallback (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
at beginWork$1 (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:27490:7)
at performUnitOfWork (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26599:12) Error: Unhandled ToastType: invalidType
at ToastIcon (/path/to/your/project/modules/userInterface//toast/Toast.tsx:70:13)
at renderWithHooks (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
at mountIndeterminateComponent (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:20103:13)
at beginWork (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:21626:16)
at HTMLUnknownElement.callCallback (/path/to/your/project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
at HTMLUnknownElement.callTheUserObjectsOperation (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
at invokeEventListeners (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
at HTMLUnknownElementImpl._dispatch (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
at HTMLUnknownElementImpl.dispatchEvent (/path/to/your/project/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
The above error occurred in the <ToastIcon> component:

at ToastIcon (/path/to/your/project/modules/userInterface/_/toast/Toast.tsx:2:1)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

What am I missing or doing wrong? Any help would be greatly appreciated!!