test: test type optimization (#541)

* test: test type optimization

* fix: fix test

Author: li-jia-nan

tests/data-aria.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import type { RenderResult } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import Pagination from '../src';
 
 describe('data and aria props', () => {
-  let wrapper;
+  let wrapper: RenderResult;
 
   describe('with simple prop', () => {
     beforeEach(() => {

tests/index.test.tsx

@@ -1,13 +1,14 @@
+import type { RenderResult } from '@testing-library/react';
 import { render, fireEvent } from '@testing-library/react';
 import Select from 'rc-select';
 import React from 'react';
 import Pagination from '../src';
 import { resetWarned } from 'rc-util/lib/warning';
 
 describe('Default Pagination', () => {
-  let wrapper;
+  let wrapper: RenderResult;
   const onChange = jest.fn();
-  const $$ = (selector) => wrapper.container.querySelectorAll(selector);
+  const $$ = (selector: string) => wrapper.container.querySelectorAll(selector);
 
   beforeEach(() => {
     wrapper = render(<Pagination onChange={onChange} />);
@@ -26,9 +27,9 @@ describe('Default Pagination', () => {
 });
 
 describe('Uncontrolled Pagination', () => {
-  let wrapper;
+  let wrapper: RenderResult;
   const onChange = jest.fn();
-  const $$ = (selector) => wrapper.container.querySelectorAll(selector);
+  const $$ = (selector: string) => wrapper.container.querySelectorAll(selector);
 
   function shouldHighlightRight(current = 1) {
     const pagers = $$('li:not(.rc-pagination-total-text)');
@@ -205,7 +206,7 @@ describe('Uncontrolled Pagination', () => {
 });
 
 describe('Controlled Pagination', () => {
-  let wrapper;
+  let wrapper: RenderResult;
   const onChange = jest.fn();
 
   beforeEach(() => {
@@ -344,7 +345,7 @@ describe('Other props', () => {
 
 // https://github.com/ant-design/ant-design/issues/10524
 describe('current value on onShowSizeChange when total is 0', () => {
-  let wrapper;
+  let wrapper: RenderResult;
   const onShowSizeChange = jest.fn();
   const onChange = jest.fn();
 
@@ -485,7 +486,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
 });
 
 describe('should emit onChange when total is string', () => {
-  let wrapper;
+  let wrapper: RenderResult;
   const onChange = jest.fn();
 
   beforeEach(() => {
@@ -508,10 +509,9 @@ describe('should emit onChange when total is string', () => {
 });
 
 describe('keyboard support', () => {
-  let wrapper;
+  let wrapper: RenderResult;
   const onChange = jest.fn();
-  const $$ = (selector) => wrapper.container.querySelectorAll(selector);
-  const $ = (selector) => wrapper.container.querySelector(selector);
+  const $ = (selector: string) => wrapper.container.querySelector(selector);
 
   beforeEach(() => {
     wrapper = render(
@@ -572,12 +572,12 @@ describe('keyboard support', () => {
 });
 
 describe('select in sequence', () => {
-  const serializeCls = (items) =>
-    Array.from(items).map((item: HTMLElement) =>
+  const serializeCls = (items: NodeListOf<HTMLLIElement>) =>
+    Array.from(items).map((item) =>
       item.getAttribute('class').replaceAll('rc-pagination-', ''),
     );
 
-  function sequenceSelector(total) {
+  function sequenceSelector(total: number) {
     describe(`should sequence select ${total} pages`, () => {
       const { container } = render(<Pagination total={total} current={1} />);
       const cls = serializeCls(container.querySelectorAll('li'));
@@ -586,11 +586,11 @@ describe('select in sequence', () => {
       const pages = Math.floor((total - 1) / 10) + 1;
       for (let i = 2; i <= pages; i++) {
         it(`should select page ${i}`, () => {
-          const { container } = render(
+          const { container: pageContainer } = render(
             <Pagination total={total} current={i} />,
           );
-          const cls = serializeCls(container.querySelectorAll('li'));
-          expect(cls).toMatchSnapshot();
+          const clsString = serializeCls(pageContainer.querySelectorAll('li'));
+          expect(clsString).toMatchSnapshot();
         });
       }
     });

tests/itemRender.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import type { RenderResult } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import Pagination from '../src';
 
 describe('itemRender', () => {
-  let wrapper;
+  let wrapper: RenderResult;
   const currentPage = 12;
-  const itemRender = (current) => <a href={`#${current}`}>{current}</a>;
-  const $$ = (selector) => wrapper.container.querySelector(selector);
+  const itemRender = (current: number) => <a href={`#${current}`}>{current}</a>;
+  const $$ = (selector: string) => wrapper.container.querySelector(selector);
 
   beforeEach(() => {
     wrapper = render(
@@ -47,7 +48,7 @@ describe('itemRender', () => {
       <Pagination
         total={1000}
         current={currentPage}
-        itemRender={(page, type, originalElement) => {
+        itemRender={(_, type, originalElement) => {
           if (type === 'page') {
             return null;
           }
@@ -63,7 +64,7 @@ describe('itemRender', () => {
       <Pagination
         total={1000}
         current={currentPage}
-        itemRender={(page, type, originalElement) => {
+        itemRender={(_, type, originalElement) => {
           if (type === 'prev' || type === 'next') {
             return null;
           }

tests/jumper.test.tsx

@@ -1,11 +1,12 @@
+import type { RenderResult } from '@testing-library/react';
 import { render, fireEvent } from '@testing-library/react';
 import Pagination from '../src';
 import * as React from 'react';
 
 describe('Pagination with jumper', () => {
-  let wrapper;
+  let wrapper: RenderResult;
   const onChange = jest.fn();
-  const $$ = (selector) => wrapper.container.querySelector(selector);
+  const $$ = (selector: string) => wrapper.container.querySelector(selector);
 
   beforeEach(() => {
     wrapper = render(
@@ -68,10 +69,10 @@ describe('Pagination with jumper', () => {
   });
 
   it('should not jump when input empty string', () => {
-    const onChange = jest.fn();
+    const onChangeFn = jest.fn();
     const { container } = render(
       <Pagination
-        onChange={onChange}
+        onChange={onChangeFn}
         total={25}
         showQuickJumper={{
           goButton: (
@@ -97,12 +98,12 @@ describe('Pagination with jumper', () => {
     expect(
       container.querySelector('.rc-pagination-item-active'),
     ).toHaveTextContent('3');
-    expect(onChange).toHaveBeenLastCalledWith(3, 10);
+    expect(onChangeFn).toHaveBeenLastCalledWith(3, 10);
   });
 });
 
 describe('simple quick jumper', () => {
-  let wrapper;
+  let wrapper: RenderResult;
   const onChange = jest.fn();
 
   beforeEach(() => {

tests/options.test.tsx

@@ -4,19 +4,17 @@ import zhCN from '../src/locale/zh_CN';
 import Options from '../src/Options';
 import * as React from 'react';
 
-const WrapperOptions = (props) => {
-  return (
-    <Options
-      locale={zhCN}
-      rootPrefixCls="rc-pagination"
-      selectComponentClass={Select}
-      pageSize={10}
-      changeSize={jest.fn()}
-      quickGo={jest.fn()}
-      {...props}
-    />
-  );
-};
+const WrapperOptions: React.FC<any> = (props) => (
+  <Options
+    locale={zhCN}
+    rootPrefixCls="rc-pagination"
+    selectComponentClass={Select}
+    pageSize={10}
+    changeSize={jest.fn()}
+    quickGo={jest.fn()}
+    {...props}
+  />
+);
 
 describe('Options', () => {
   it('should render correctly', () => {

tests/simple.test.tsx

@@ -1,10 +1,11 @@
+import type { RenderResult } from '@testing-library/react';
 import { render, fireEvent, createEvent } from '@testing-library/react';
 import Select from 'rc-select';
 import React, { useState } from 'react';
 import Pagination from '../src';
 
 describe('simple Pagination', () => {
-  let wrapper;
+  let wrapper: RenderResult;
 
   beforeEach(() => {
     wrapper = render(
@@ -48,7 +49,7 @@ describe('simple Pagination', () => {
 
   it('should return to 1 when blur goto input in control mode', () => {
     const App = () => {
-      const [current, setCurrent] = useState(1);
+      const [, setCurrent] = useState(1);
       return <Pagination simple current={1} total={25} onChange={setCurrent} />;
     };
     const { container } = render(<App />);

tests/sizer.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, act } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import Select from 'rc-select';
 import Pagination from '../src';
 

tests/two-pagination.test.tsx

@@ -1,10 +1,10 @@
+import type { RenderResult } from '@testing-library/react';
 import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
 import TwoPagination from './two-pagination';
 
 describe('Two Pagination', () => {
-  let wrapper;
-  let mockPagination;
+  let wrapper: RenderResult;
 
   beforeEach(() => {
     jest.mock('../src', () => {});

tests/two-pagination.jsx renamed to tests/two-pagination.tsx

@@ -9,11 +9,11 @@ class Hello extends React.Component {
   };
 
   changeSize = () => {
-    this.setState({
-      pageSize: 50,
-    });
+    this.setState({ pageSize: 50 });
   };
 
+  onShowSizeChange = () => {};
+
   render() {
     return (
       <>