mock test

components/form/FormItem.tsx

@@ -302,16 +302,18 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     if (!id) {
       return;
     }
-    const controls = document.querySelectorAll(`[id="${id}"]`);
-    if (controls.length !== 1) {
+
+    const formItemNode = ReactDOM.findDOMNode(this) as Element;
+    const control = formItemNode.querySelector(`[id="${id}"]`) as HTMLElement;
+
+    if (control) {
       // Only prevent in default situation
       // Avoid preventing event in `label={<a href="xx">link</a>}``
       if (typeof label === 'string') {
         e.preventDefault();
       }
-      const formItemNode = ReactDOM.findDOMNode(this) as Element;
-      const control = formItemNode.querySelector(`[id="${id}"]`) as HTMLElement;
-      if (control && control.focus) {
+
+      if (control.focus) {
         control.focus();
       }
     }

components/form/__tests__/label.test.js

@@ -3,6 +3,27 @@ import { mount } from 'enzyme';
 import Form from '..';
 
 describe('Form', () => {
+  // Mock of `querySelector`
+  const originQuerySelector = HTMLElement.prototype.querySelector;
+  HTMLElement.prototype.querySelector = function(str) {
+    const match = str.match(/^\[id=('|")(.*)('|")]$/);
+    const id = match && match[2];
+
+    // Use origin logic
+    if (id) {
+      const input = this.getElementsByTagName('input')[0];
+      if (input.id === id) {
+        return input;
+      }
+    }
+
+    return originQuerySelector.call(this, str);
+  };
+
+  afterAll(() => {
+    HTMLElement.prototype.querySelector = originQuerySelector;
+  });
+
   it('should remove duplicated user input colon', () => {
     const wrapper = mount(
       <Form>