chore: Refactor the button test to use typescript (#22953)

* Refactor the button test to use typescript

* update tsconfig.json

* Change file name as a workaround

* update antd-tools

.jest.js

@@ -1,5 +1,3 @@
-const libDir = process.env.LIB_DIR;
-
 const transformIgnorePatterns = [
   '/dist/',
   // Ignore modules without es dir.
@@ -7,6 +5,13 @@ const transformIgnorePatterns = [
   'node_modules/(?!.*@babel)[^/]+?/(?!(es|node_modules)/)',
 ];
 
+function getTestRegex(libDir) {
+  if (libDir === 'dist') {
+    return 'demo\\.test\\.js$';
+  }
+  return '.*\\.test\\.(j|t)sx?$';
+}
+
 module.exports = {
   verbose: true,
   setupFiles: ['./tests/setup.js'],
@@ -28,7 +33,7 @@ module.exports = {
     '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },
-  testRegex: `${libDir === 'dist' ? 'demo' : '.*'}\\.test\\.js$`,
+  testRegex: getTestRegex(process.env.LIB_DIR),
   collectCoverageFrom: [
     'components/**/*.{ts,tsx}',
     '!components/*/style/index.tsx',

.jest.node.js

@@ -12,7 +12,7 @@ module.exports = {
     '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },
-  testRegex: 'demo\\.test\\.js$',
+  testRegex: 'demo\\.test\\.(j|t)s$',
   testEnvironment: 'node',
   transformIgnorePatterns,
   snapshotSerializers: ['enzyme-to-json/serializer'],

components/button/__tests__/type.test.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import { mount, render } from 'enzyme';
-import renderer from 'react-test-renderer';
 import { SearchOutlined } from '@ant-design/icons';
 import Button from '..';
 import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep } from '../../../tests/utils';
+import { SizeType } from '../../config-provider/SizeContext';
 
 describe('Button', () => {
   mountTest(Button);
@@ -30,13 +30,14 @@ describe('Button', () => {
   });
 
   it('mount correctly', () => {
-    expect(() => renderer.create(<Button>Follow</Button>)).not.toThrow();
+    expect(() => mount(<Button>Follow</Button>)).not.toThrow();
   });
 
   it('warns if size is wrong', () => {
     const mockWarn = jest.fn();
     jest.spyOn(console, 'warn').mockImplementation(mockWarn);
-    render(<Button.Group size="who am I" />);
+    const size = ('who am I' as any) as SizeType;
+    render(<Button.Group size={size} />);
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0][0]).toMatchObject({
       message: 'unreachable case: "who am I"',
@@ -74,7 +75,7 @@ describe('Button', () => {
   });
 
   it('renders Chinese characters correctly in HOC', () => {
-    const Text = ({ children }) => <span>{children}</span>;
+    const Text = ({ children }: { children: React.ReactNode }) => <span>{children}</span>;
     const wrapper = mount(
       <Button>
         <Text>按钮</Text>
@@ -110,7 +111,7 @@ describe('Button', () => {
 
   it('have static property for type detecting', () => {
     const wrapper = mount(<Button>Button Text</Button>);
-    expect(wrapper.type().__ANT_BUTTON).toBe(true);
+    expect((wrapper.type() as any).__ANT_BUTTON).toBe(true);
   });
 
   it('should change loading state instantly by default', () => {
@@ -189,7 +190,7 @@ describe('Button', () => {
 
   it('should has click wave effect', async () => {
     const wrapper = mount(<Button type="primary">button</Button>);
-    wrapper.find('.ant-btn').getDOMNode().click();
+    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
     await new Promise(resolve => setTimeout(resolve, 0));
     expect(wrapper.render()).toMatchSnapshot();
   });

package.json

@@ -144,7 +144,7 @@
     "@ant-design/bisheng-plugin": "^2.3.0",
     "@ant-design/colors": "^4.0.0",
     "@ant-design/hitu": "^0.0.0-alpha.13",
-    "@ant-design/tools": "^8.0.4",
+    "@ant-design/tools": "^8.2.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",
     "@types/classnames": "^2.2.8",

tests/shared/demoTest.ts

@@ -3,6 +3,8 @@ import { render } from 'enzyme';
 import MockDate from 'mockdate';
 import moment from 'moment';
 
+type CheerIO = ReturnType<typeof render>;
+type CheerIOElement = CheerIO[0];
 // We should avoid use it in 4.0. Reopen if can not handle this.
 const USE_REPLACEMENT = false;
 const testDist = process.env.LIB_DIR === 'dist';
@@ -13,12 +15,12 @@ const testDist = process.env.LIB_DIR === 'dist';
  * Or `f7fa7a3c-a675-47bc-912e-0c45fb6a74d9`(randomly) when not test env.
  * So we need hack of this to modify the `aria-controls`.
  */
-function ariaConvert(wrapper) {
+function ariaConvert(wrapper: CheerIO) {
   if (!testDist || !USE_REPLACEMENT) return wrapper;
 
   const matches = new Map();
 
-  function process(entry) {
+  function process(entry: CheerIOElement) {
     const { attribs, children } = entry;
     if (matches.has(entry)) return;
     matches.set(entry, true);
@@ -33,15 +35,16 @@ function ariaConvert(wrapper) {
     (Array.isArray(children) ? children : [children]).forEach(process);
   }
 
-  Object.keys(wrapper).forEach(key => {
-    const entry = wrapper[key];
-    process(entry);
-  });
+  wrapper.each((_, entry) => process(entry));
 
   return wrapper;
 }
 
-export default function demoTest(component, options = {}) {
+type Options = {
+  skip?: boolean;
+};
+
+export default function demoTest(component: string, options: Options = {}) {
   const files = glob.sync(`./components/${component}/demo/*.md`);
 
   files.forEach(file => {
@@ -50,7 +53,7 @@ export default function demoTest(component, options = {}) {
       testMethod = test.skip;
     }
     testMethod(`renders ${file} correctly`, () => {
-      MockDate.set(moment('2016-11-22'));
+      MockDate.set(moment('2016-11-22').toDate());
       const demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
       const wrapper = render(demo);
 

tests/shared/mountTest.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 // eslint-disable-next-line jest/no-export
-export default function mountTest(Component) {
+export default function mountTest(Component: React.ComponentType) {
   describe(`mount and unmount`, () => {
     // https://github.com/ant-design/ant-design/pull/18441
     it(`component could be updated and unmounted without errors`, () => {

tests/shared/rtlTest.tsx

@@ -5,11 +5,11 @@ import { mount } from 'enzyme';
 import ConfigProvider from '../../components/config-provider';
 
 // eslint-disable-next-line jest/no-export
-export default function rtlTest(Component, mockDate) {
+export default function rtlTest(Component: React.ComponentType, mockDate?: boolean) {
   describe(`rtl render`, () => {
     it(`component should be rendered correctly in RTL direction`, () => {
       if (mockDate) {
-        MockDate.set(Moment('2000-09-28'));
+        MockDate.set(Moment('2000-09-28').toDate());
       }
       const wrapper = mount(
         <ConfigProvider direction="rtl">

tests/utils.ts

@@ -2,7 +2,7 @@ import moment from 'moment';
 import MockDate from 'mockdate';
 
 export function setMockDate(dateString = '2017-09-18T03:30:07.795') {
-  MockDate.set(moment(dateString));
+  MockDate.set(moment(dateString).toDate());
 }
 
 export function resetMockDate() {

tsconfig.json

@@ -17,5 +17,5 @@
     "lib": ["dom", "es2017"],
     "skipLibCheck": true
   },
-  "exclude": ["node_modules", "lib", "es"]
+  "exclude": ["node_modules", "lib", "es", "**/__tests__/**"]
 }