I am trying to write some svelte component test in vitest and running into a weird issue. I am getting a huge error message of the following I am having trouble working through. Here is the error message, it is on all TableSearch locations in the below test file.
Argument of type 'typeof TableSearch_SvelteComponent' is not assignable to parameter of type 'Constructor<SvelteComponentDev>'.ts(2769)
import { render, fireEvent, cleanup } from '@testing-library/svelte';
import { describe, it, expect, afterEach, vi } from 'vitest';
import TableSearch from './TableSearch.svelte';
// Mock DataHandler
class MockDataHandler {
search(query: string) {
query;
}
}
describe('TableSearch.svelte', () => {
afterEach(() => {
cleanup();
});
it('renders TableSearch component', () => {
const { getByTestId } = render(TableSearch, { props: { handler: new MockDataHandler() } });
expect(getByTestId('table-search-form')).toBeTruthy();
});
it('renders search input field with correct attributes', () => {
const { getByTestId } = render(TableSearch, { props: { handler: new MockDataHandler() } });
const input = getByTestId('table-search-input'); // Use getByTestId to find the input element
expect(input).toBeTruthy();
expect(input.className).toContain('transition-all');
});
it('calls handler search method when input is changed', async () => {
const handler = new MockDataHandler();
const searchMock = vi.spyOn(handler, 'search');
const { getByTestId } = render(TableSearch, { props: { handler } });
const input = getByTestId('table-search-input');
await fireEvent.input(input, { target: { value: 'test query' } });
expect(searchMock).toHaveBeenCalled();
expect(searchMock).toHaveBeenCalledWith('test query');
});
});