search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

Usage of { 'data-test-id': string; } in ListProps #693

Closed erandow closed 2 years ago

erandow commented 2 years ago 
export declare type ListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref'> & { 'data-test-id': string; };

Hello everybody, I am using the VirtuosoGrid component and tried to pass a List component as its components prop to it. I get the following error:

Property ''data-test-id'' is missing in type 'PropsWithChildren<GridListProps & { context?: unknown; }>' but required in type '{ 'data-test-id': string; }'.ts(2322)
index.d.ts(243, 5): ''data-test-id'' is declared here.

I don't know what is this data-test-id here. do you know what is this for?

Originally posted by @ErfanAsadi in https://github.com/petyosi/react-virtuoso/discussions/691

petyosi commented 2 years ago

This is an internal property passed for the end-to-end tests. Declaring your own type for the components, while possible, is not necessary. The library exposes the types:

import { Components, GridComponents, TableComponents } from "react-virtuoso";
type YourListType = GridComponents['List']

This is documented here: https://virtuoso.dev/customize-structure/#typescript-interfaces.

P.S. Don't open duplicate discussions and issues for questions like this. This is documented and trivial to figure out from the source code.