Mocking svelte component

[zsaquarian]

Hi!
Does anyone know how to mock/stub a svelte component? I want to separate my unit tests from each other.

In jest you would use something like svelte-mock as your transformer, but how would you do it in vitest?

Thanks in advance!

[sheremet-va]

What if you just don't add transformers, and use everything else? Have you tried it?

[zsaquarian]

When I try to do

import { vi, it } from 'vitest';
import { render } from '@testing-library/svelte';
import ComponentToTest from '@components/ComponentToTest.svelte';

vi.mock('@components/ComponentToMock.svelte');

it('should mock', () => {
  render(ComponentToTest);
}

I get the error: TypeError: Cannot read property 'fragment' of undefined

And if i replace vi.mock('@components/ComponentToMock.svelte'); with vi.mock('@components/ComponentToMock.svelte', () => SomeMockComponent);, then I get: TypeError: __vite_ssr_import_1__.default is not a constructor

[sheremet-va]

When I try to do

import { vi, it } from 'vitest';
import { render } from '@testing-library/svelte';
import ComponentToTest from '@components/ComponentToTest.svelte';

vi.mock('@components/ComponentToMock.svelte');

it('should mock', () => {
  render(ComponentToTest);
}

I get the error: TypeError: Cannot read property 'fragment' of undefined

And if i replace vi.mock('@components/ComponentToMock.svelte'); with vi.mock('@components/ComponentToMock.svelte', () => SomeMockComponent);, then I get: TypeError: __vite_ssr_import_1__.default is not a constructor

You would need to do vi.mock('@components/ComponentToMock.svelte', () => ({ default: SomeMockComponent }); if you want to mock default

[zsaquarian]

When I try to do

import { vi, it } from 'vitest';
import { render } from '@testing-library/svelte';
import ComponentToTest from '@components/ComponentToTest.svelte';

vi.mock('@components/ComponentToMock.svelte');

it('should mock', () => {
  render(ComponentToTest);
}

I get the error: TypeError: Cannot read property 'fragment' of undefined
And if i replace vi.mock('@components/ComponentToMock.svelte'); with vi.mock('@components/ComponentToMock.svelte', () => SomeMockComponent);, then I get: TypeError: __vite_ssr_import_1__.default is not a constructor

You would need to do vi.mock('@components/ComponentToMock.svelte', () => ({ default: SomeMockComponent }); if you want to mock default

It works! Thanks!