#'typeof TableSearch__SvelteComponent_' is not assignable of type 'Constructor<SvelteComponentDev>'

2 messages · Page 1 of 1 (latest)

strong iris
#

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');
  });
});
echo coral
#

can you also share the definition of TableSearch? it's going to be hard to help without it