@typescript-eslint/unbound-method triggered when destructuring from render

[Stadly]

Destructuring getBy functions from the render function's returned value triggers ESLint errors when using the @typescript-eslint/unbound-method rule (included by default in the recommended-type-checked config).

This is because the functions are declared as class methods, and hence may rely on this:

interface LocatorSelectors {
  getByRole(role: ARIARole | ({} & string), options?: LocatorByRoleOptions): Locator
  getByLabelText(text: string | RegExp, options?: LocatorOptions): Locator
  getByAltText(text: string | RegExp, options?: LocatorOptions): Locator
  getByPlaceholder(text: string | RegExp, options?: LocatorOptions): Locator
  getByText(text: string | RegExp, options?: LocatorOptions): Locator
  getByTitle(text: string | RegExp, options?: LocatorOptions): Locator
  getByTestId(text: string | RegExp): Locator
}

The solution is to either annotate the functions with this: void or use arrow functions:

interface LocatorSelectors {
  getByRole: (role: ARIARole | ({} & string), options?: LocatorByRoleOptions) => Locator
  getByLabelText: (text: string | RegExp, options?: LocatorOptions) => Locator
  getByAltText: (text: string | RegExp, options?: LocatorOptions) => Locator
  getByPlaceholder: (text: string | RegExp, options?: LocatorOptions) => Locator
  getByText: (text: string | RegExp, options?: LocatorOptions) => Locator
  getByTitle: (text: string | RegExp, options?: LocatorOptions) => Locator
  getByTestId: (text: string | RegExp) => Locator
}

The render function in @testing-library/svelte does not have this issue.

A similar fix has just been merged in SvelteKit: sveltejs/kit#12955