Skip to content

Commit

Permalink
chore: Fix warning of findDOMNode (#419)
Browse files Browse the repository at this point in the history
* fix: findDOMNode should only work on validate element

* fix: find logic
  • Loading branch information
zombieJ committed Jan 31, 2023
1 parent b02ee2f commit 83a3ffd
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 2 deletions.
10 changes: 8 additions & 2 deletions src/Dom/findDOMNode.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import ReactDOM from 'react-dom';

/**
Expand All @@ -7,7 +8,12 @@ export default function findDOMNode<T = Element | Text>(
node: React.ReactInstance | HTMLElement,
): T {
if (node instanceof HTMLElement) {
return (node as unknown) as T;
return node as unknown as T;
}
return (ReactDOM.findDOMNode(node) as unknown) as T;

if (node instanceof React.Component) {
return ReactDOM.findDOMNode(node) as unknown as T;
}

return null;
}
58 changes: 58 additions & 0 deletions tests/findDOMNode.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import findDOMNode from '../src/Dom/findDOMNode';

describe('findDOMNode', () => {
it('base work', () => {
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

const divRef = React.createRef<HTMLDivElement>();
const { container } = render(
<React.StrictMode>
<div ref={divRef} />
</React.StrictMode>,
);

const ele = findDOMNode(divRef.current);
expect(container.firstChild).toBe(ele);

expect(errSpy).not.toHaveBeenCalled();
errSpy.mockRestore();
});

it('not throw if is not a React obj', () => {
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

const empty = findDOMNode({} as any);
expect(empty).toBeNull();

expect(errSpy).not.toHaveBeenCalled();
errSpy.mockRestore();
});

it('class component', () => {
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

class DOMWrapper extends React.Component {
getDOM = () => {
return findDOMNode(this);
};

render() {
return <div />;
}
}

const wrapperRef = React.createRef<DOMWrapper>();
const { container } = render(
<React.StrictMode>
<DOMWrapper ref={wrapperRef} />
</React.StrictMode>,
);

expect(wrapperRef.current!.getDOM()).toBe(container.firstChild);

expect(errSpy).toHaveBeenCalled();
errSpy.mockRestore();
});
});

1 comment on commit 83a3ffd

@vercel
Copy link

@vercel vercel bot commented on 83a3ffd Jan 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

util – ./

util.vercel.app
util-git-master-react-component.vercel.app
util-react-component.vercel.app

Please sign in to comment.