chore: fix the lint

Author: wangdicoder

.eslintrc.js

@@ -29,5 +29,6 @@ module.exports = {
     semi: [2, 'always'],
     'react-hooks/rules-of-hooks': 2,
     'react-hooks/exhaustive-deps': 1,
+    '@typescript-eslint/no-unused-vars': [1, { varsIgnorePattern: '^React$' }],
   },
 };

components/_utils/hooks.tsx

@@ -25,7 +25,7 @@ export const useEventListener = (
   }, [eventName, target]);
 };
 
-export const useClickOutside = (target: HTMLElement, handler: Function): void => {
+export const useClickOutside = (target: HTMLElement, handler: (event: MouseEvent) => void): void => {
   useEffect(() => {
     const listener = (event: MouseEvent): void => {
       if (!target || target.contains(event.target as HTMLElement)) {

components/anchor/__tests__/anchor.test.tsx

@@ -29,7 +29,7 @@ describe('<Anchor />', () => {
         <Anchor.Link href="#s2" title="Link 2" />
       </Anchor>
     );
-    expect(getByText('Link 1')).toBeTruthy();
-    expect(getByText('Link 2')).toBeTruthy();
+    expect(getByText('Link 1')).toBeInTheDocument();
+    expect(getByText('Link 2')).toBeInTheDocument();
   });
 });

components/autocomplete/index.tsx

@@ -25,6 +25,7 @@ function Autocomplete(props: AutoCompleteProps): React.ReactElement {
     }
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   const onSelect = (): void => {};
 
   return (

components/avatar/__tests__/avatar.test.tsx

@@ -30,7 +30,7 @@ describe('<Avatar />', () => {
 
   it('should render text content', () => {
     const { getByText } = render(<Avatar>AB</Avatar>);
-    expect(getByText('AB')).toBeTruthy();
+    expect(getByText('AB')).toBeInTheDocument();
   });
 
   it('should render with custom size', () => {

components/badge/__tests__/badge.test.tsx

@@ -15,12 +15,12 @@ describe('<Badge />', () => {
 
   it('should render count', () => {
     const { getByText } = render(<Badge count={5}><div>content</div></Badge>);
-    expect(getByText('5')).toBeTruthy();
+    expect(getByText('5')).toBeInTheDocument();
   });
 
   it('should render max+ when count exceeds max', () => {
     const { getByText } = render(<Badge count={100} max={99}><div>content</div></Badge>);
-    expect(getByText('99+')).toBeTruthy();
+    expect(getByText('99+')).toBeInTheDocument();
   });
 
   it('should render as dot', () => {
@@ -35,6 +35,6 @@ describe('<Badge />', () => {
 
   it('should show zero when showZero is true', () => {
     const { getByText } = render(<Badge count={0} showZero><div>content</div></Badge>);
-    expect(getByText('0')).toBeTruthy();
+    expect(getByText('0')).toBeInTheDocument();
   });
 });

components/breadcrumb/__tests__/breadcrumb.test.tsx

@@ -29,8 +29,8 @@ describe('<Breadcrumb />', () => {
         <Breadcrumb.Item>Page</Breadcrumb.Item>
       </Breadcrumb>
     );
-    expect(getByText('Home')).toBeTruthy();
-    expect(getByText('Page')).toBeTruthy();
+    expect(getByText('Home')).toBeInTheDocument();
+    expect(getByText('Page')).toBeInTheDocument();
   });
 
   it('should render custom separator', () => {
@@ -40,6 +40,6 @@ describe('<Breadcrumb />', () => {
         <Breadcrumb.Item>Page</Breadcrumb.Item>
       </Breadcrumb>
     );
-    expect(container.textContent).toContain('>');
+    expect(container).toHaveTextContent(/>/);
   });
 });

components/card/__tests__/card.test.tsx

@@ -25,16 +25,16 @@ describe('<Card />', () => {
 
   it('should render title', () => {
     const { getByText } = render(<Card title="Title">Content</Card>);
-    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Title')).toBeInTheDocument();
   });
 
   it('should render extra content', () => {
     const { getByText } = render(<Card title="Title" extra={<span>More</span>}>Content</Card>);
-    expect(getByText('More')).toBeTruthy();
+    expect(getByText('More')).toBeInTheDocument();
   });
 
   it('should render footer', () => {
     const { getByText } = render(<Card footer={<div>Footer</div>}>Content</Card>);
-    expect(getByText('Footer')).toBeTruthy();
+    expect(getByText('Footer')).toBeInTheDocument();
   });
 });

components/carousel/__tests__/carousel.test.tsx

@@ -31,8 +31,8 @@ describe('<Carousel />', () => {
         <Carousel.Item><div>Slide B</div></Carousel.Item>
       </Carousel>
     );
-    expect(getByText('Slide A')).toBeTruthy();
-    expect(getByText('Slide B')).toBeTruthy();
+    expect(getByText('Slide A')).toBeInTheDocument();
+    expect(getByText('Slide B')).toBeInTheDocument();
   });
 
   it('should render dots', () => {

components/checkbox/__tests__/checkbox.test.tsx

@@ -15,7 +15,7 @@ describe('<Checkbox />', () => {
 
   it('should render label', () => {
     const { getByText } = render(<Checkbox>Label</Checkbox>);
-    expect(getByText('Label')).toBeTruthy();
+    expect(getByText('Label')).toBeInTheDocument();
   });
 
   it('should render disabled', () => {