Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FloatButton 最新版本 (5.12.1) 依然报console warning #46326

Closed
Jeremy-Hibiki opened this issue Dec 7, 2023 · 8 comments · Fixed by #48865
Closed

FloatButton 最新版本 (5.12.1) 依然报console warning #46326

Jeremy-Hibiki opened this issue Dec 7, 2023 · 8 comments · Fixed by #48865
Assignees
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive

Comments

@Jeremy-Hibiki
Copy link

Reproduction link

Edit on CodeSandbox

Steps to reproduce

<React.StrictMode>
  <FloatButton.BackTop visibilityHeight={0} />
</React.StrictMode>

What is expected?

无报错

What is actually happening?

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

Environment Info
antd 5.12.1
React 18.x
System Windows 11
Browser Chrome 120.0.6099.71

相关:
#45387
#45390

@CYBYOB
Copy link
Contributor

CYBYOB commented Dec 8, 2023

确实还有问题,本人尝试修复中~

@Jeremy-Hibiki
Copy link
Author

还发现测试用例并没有检测到 console.error 被调用了

it('no error when BackTop work', () => {
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<BackTop visibilityHeight={0} />);
expect(errSpy).not.toHaveBeenCalled();
errSpy.mockRestore();
});

改成如此可以被 jest 检测到 🤔

- it('no error when BackTop work', () => {
+ it('no error when BackTop work', async () => {
    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-   render(<BackTop visibilityHeight={0} />); 
+   await act(async () => {
+     const { container } = render(<BackTop visibilityHeight={0} />);
+     fireEvent.click(container.querySelector<HTMLButtonElement>('.ant-float-btn')!);
+   });
    expect(errSpy).not.toHaveBeenCalled();
    errSpy.mockRestore();
  });
  it('no error when BackTop work', async () => {
    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
    await act(async () => {
      const { container } = render(<BackTop visibilityHeight={0} />);
      fireEvent.click(container.querySelector<HTMLButtonElement>('.ant-float-btn')!);
    });
    expect(errSpy).not.toHaveBeenCalled();
    errSpy.mockRestore();
  });

@yoyo837
Copy link
Contributor

yoyo837 commented Dec 9, 2023

还发现测试用例并没有检测到 console.error 被调用了

it('no error when BackTop work', () => {
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<BackTop visibilityHeight={0} />);
expect(errSpy).not.toHaveBeenCalled();
errSpy.mockRestore();
});

改成如此可以被 jest 检测到 🤔

- it('no error when BackTop work', () => {
+ it('no error when BackTop work', async () => {
    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-   render(<BackTop visibilityHeight={0} />); 
+   await act(async () => {
+     const { container } = render(<BackTop visibilityHeight={0} />);
+     fireEvent.click(container.querySelector<HTMLButtonElement>('.ant-float-btn')!);
+   });
    expect(errSpy).not.toHaveBeenCalled();
    errSpy.mockRestore();
  });
  it('no error when BackTop work', async () => {
    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
    await act(async () => {
      const { container } = render(<BackTop visibilityHeight={0} />);
      fireEvent.click(container.querySelector<HTMLButtonElement>('.ant-float-btn')!);
    });
    expect(errSpy).not.toHaveBeenCalled();
    errSpy.mockRestore();
  });

来个PR?

@Jeremy-Hibiki
Copy link
Author

来个PR?

前面没仔细看,这个能fail的原因是fireEvent.click没拿到DOM抛异常了

正确的 能fail用例的 PR 了

#46356

  1. waitFakeTimer
  2. 提到第一个用例前

在第一个用例后执行就mock失败 然后PASS,这个超出我能力范围了 😢

@afc163
Copy link
Member

afc163 commented Dec 18, 2023

@CYBYOB 还在修么?

@nerdess
Copy link

nerdess commented Jan 15, 2024

Any news regarding this one?

I also get the same error when I wrap a Radio.Button with a Tooltip on latest antd (v5.11.5)

<Radio.Group>
  <Tooltip title='This activates Yes'>
	  <Radio.Button value='1'>
		  Yes
	  </Radio.Button>
  </Tooltip>
  <Tooltip title='This activates No'>
	  <Radio.Button value='0'>
		  No
	  </Radio.Button>
  </Tooltip>
</Radio.Group>
Bildschirmfoto 2024-01-12 um 14 06 12

@afc163 afc163 added the help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. label Apr 2, 2024
Copy link
Contributor

github-actions bot commented Apr 2, 2024

Hello @Jeremy-Hibiki. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @Jeremy-Hibiki,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy

@afc163
Copy link
Member

afc163 commented Apr 30, 2024

Trace #48709

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants