Browse Source

fix: Progress throws warning `findDOMNode is deprecated in StrictMode` (#42241)

* fix: Progress throws warning

* chore: update test

---------

Co-authored-by: 洋 <hetongyang@bytedance.com>
pull/42249/head
2 years ago
committed by GitHub
parent
commit
7de7a8b6e4
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 22
      components/progress/__tests__/index.test.tsx
  2. 7
      components/progress/progress.tsx

22
components/progress/__tests__/index.test.tsx

@ -1,3 +1,4 @@
import { Tooltip } from 'antd';
import React, { useState } from 'react';
import type { ProgressProps } from '..';
import Progress from '..';
@ -5,13 +6,12 @@ import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render } from '../../../tests/utils';
import { handleGradient, sortGradient } from '../Line';
import { ProgressTypes } from '../progress';
import ProgressSteps from '../Steps';
import { ProgressTypes } from '../progress';
describe('Progress', () => {
mountTest(Progress);
rtlTest(Progress);
it('successPercent should decide the progress status when it exists', () => {
const { container: wrapper, rerender } = render(
<Progress percent={100} success={{ percent: 50 }} />,
@ -360,4 +360,22 @@ describe('Progress', () => {
height: '60px',
});
});
it('no strict warning', () => {
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { rerender } = render(
<Tooltip title="当前已使用60%">
<Progress percent={60} type="circle" />
</Tooltip>,
);
rerender(
<Tooltip title="当前已使用60%">
<Progress percent={60} type="circle" />
</Tooltip>,
);
expect(errSpy).not.toHaveBeenCalledWith(
expect.stringContaining('findDOMNode is deprecated in StrictMode'),
);
errSpy.mockRestore();
});
});

7
components/progress/progress.tsx

@ -5,9 +5,9 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import warning from '../_util/warning';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
import warning from '../_util/warning';
import Circle from './Circle';
import Line from './Line';
import Steps from './Steps';
@ -55,7 +55,7 @@ export interface ProgressProps {
children?: React.ReactNode;
}
const Progress: React.FC<ProgressProps> = (props) => {
const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
className,
@ -172,6 +172,7 @@ const Progress: React.FC<ProgressProps> = (props) => {
return wrapSSR(
<div
ref={ref}
className={classString}
role="progressbar"
{...omit(restProps, [
@ -188,7 +189,7 @@ const Progress: React.FC<ProgressProps> = (props) => {
{progress}
</div>,
);
};
});
if (process.env.NODE_ENV !== 'production') {
Progress.displayName = 'Progress';

Loading…
Cancel
Save