SolidJS•12mo ago

Solid-testing library TS-eslint-errors

Hey< I am just starting out using solids testing library and setup my project according to this example: https://github.com/solidjs/solid-start/tree/main/examples/with-vitest/src However I am getting some TS-errors I am not quite sure how to resolve correctly. My Counter.test.tsx looks exactly like in the example:

import { fireEvent, render } from "@solidjs/testing-library";
import Counter from "./Counter";

describe("<Counter />", () => {
  it("increments value", async () => {
    const { queryByRole, unmount } = render(() => <Counter />);
    const button = (await queryByRole("button")) as HTMLButtonElement;
    expect(button).toBeInTheDocument();
    expect(button).toHaveTextContent(/Clicks: 0/);
    fireEvent.click(button);
    expect(button).toHaveTextContent(/Clicks: 1/);
    unmount();
  });

  it("renders 1", () => {
    const { container, unmount } = render(() => <Counter />);
    expect(container).toMatchSnapshot();
    unmount();
  });
});

import { fireEvent, render } from "@solidjs/testing-library";
import Counter from "./Counter";

describe("<Counter />", () => {
  it("increments value", async () => {
    const { queryByRole, unmount } = render(() => <Counter />);
    const button = (await queryByRole("button")) as HTMLButtonElement;
    expect(button).toBeInTheDocument();
    expect(button).toHaveTextContent(/Clicks: 0/);
    fireEvent.click(button);
    expect(button).toHaveTextContent(/Clicks: 1/);
    unmount();
  });

  it("renders 1", () => {
    const { container, unmount } = render(() => <Counter />);
    expect(container).toMatchSnapshot();
    unmount();
  });
});

However on the destructor of queryByRole I receive the following error:

Avoid referencing unbound methods which may cause unintentional scoping of `this`.
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead. [@typescript-eslint/unbound-method]

Avoid referencing unbound methods which may cause unintentional scoping of `this`.
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead. [@typescript-eslint/unbound-method]

Furhtermore on the call to queryByRole I receive an error, that queryByRole does not return a Promise and is therefore not awaitable. Is this an error on my part or is this an error already present inside the example repo? Thanks in advance

GitHub

solid-start/examples/with-vitest/src at main · solidjs/solid-start

SolidStart, the Solid app framework. Contribute to solidjs/solid-start development by creating an account on GitHub.

9 Replies

Alex Lohr•12mo ago

If you want an asynchronous query, you need findByRole. And I don't think you should apply your linter settings on your dependencies. Unfortunately, I cannot change the types of the queries, since those are coming directly from testing-library/dom, so you really need to fix the linter error on your side.

oneiro•12mo ago

Ah I see, thanks for the super quick response. I didn't change the code from the example - so the with-vitest-example inside the solid-start repo seems to be incorrectly trying to await getByRole here. Anyway, I am going to try to turn off these linter errors for deps. Thanks again! 🙂

Alex Lohr•12mo ago

Thanks for the information, I'll correct the example.

oneiro•12mo ago

@lexlohr I am running into weird issues when calling vitest with run. Apparently there are hanging processes. I don't seem to have these in projects without solid(-start). Do you have an idea what could cause this? Checking with the hanging-process-reporter, I get modstly node:internal/async_hooks-Filehandles. I am not quite sure how to continue to debug this.

Alex Lohr•12mo ago

Which versions of solid-start and node js are you using?

oneiro•12mo ago

node 19.8.1 and solid-start 0.2.26

Alex Lohr•12mo ago

Okay, nothing that would be obviously problematic. I'll have to investigate more. This will take some time.

oneiro•12mo ago

Thanks a ton for your effort! Let me know if you need anthing to help further debug this 🙂

Alex Lohr•12mo ago

Will do.

Gaming

Programming

Solid-testing library TS-eslint-errors