Repository: facebook/react
File: packages/react/src/__tests__/ReactElementClone-test.js (JavaScript)

Code before:
        );
      }
    }

    const root = ReactDOMClient.createRoot(document.createElement('div'));
    await act(() => root.render(<Grandparent />));
    if (gate(flags => flags.enableRefAsProp && flags.disableStringRefs)) {
      expect(component.childRef).toEqual({current: null});
      expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
    } else if (
      gate(flags => !flags.enableRefAsProp && !flags.disableStringRefs)
    ) {
      expect(component.childRef).toEqual({current: null});
      expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
    } else if (
      gate(flags => flags.enableRefAsProp && !flags.disableStringRefs)
    ) {
      expect(component.childRef).toEqual({current: null});
      expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
    } else {
      // Not going to bother testing every possible combination.
    }
  });

  it('should steal the ref if a new string ref is specified', async () => {
    if (gate(flags => !flags.enableRefAsProp && !flags.disableStringRefs)) {
      await expect(async () => {
        // create an element without an owner
        const element = React.createElement('div', {id: 'some-id'});
        class Parent extends React.Component {
          render() {
            return <Child>{element}</Child>;
          }
        }
        let child;
        class Child extends React.Component {
          render() {
            child = this;
            const clone = React.cloneElement(this.props.children, {
              ref: 'xyz',
            });
            return <div>{clone}</div>;
          }
        }

        const root = ReactDOMClient.createRoot(document.createElement('div'));
        await act(() => root.render(<Parent />));
        expect(child.refs.xyz.tagName).toBe('DIV');
      }).toErrorDev([
        'Warning: Component "Child" contains the string ref "xyz". Support for ' +
          'string refs will be removed in a future major release. We recommend ' +

Review comment (suggestion):
Instead of inlining this, you can add this above the test:

```
// @gate !flags.enableRefAsProp && !flags.disableStringRefs
```

Code after:
        );
      }
    }

    const root = ReactDOMClient.createRoot(document.createElement('div'));
    await act(() => root.render(<Grandparent />));
    if (gate(flags => flags.enableRefAsProp && flags.disableStringRefs)) {
      expect(component.childRef).toEqual({current: null});
      expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
    } else if (
      gate(flags => !flags.enableRefAsProp && !flags.disableStringRefs)
    ) {
      expect(component.childRef).toEqual({current: null});
      expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
    } else if (
      gate(flags => flags.enableRefAsProp && !flags.disableStringRefs)
    ) {
      expect(component.childRef).toEqual({current: null});
      expect(component.parentRef.current.xyzRef.current.tagName).toBe('SPAN');
    } else {
      // Not going to bother testing every possible combination.
    }
  });

  // @gate !disableStringRefs
  it('should steal the ref if a new string ref is specified without an owner', async () => {
    // Regression test for this specific feature combination calling cloneElement on an element
    // without an owner
    await expect(async () => {
      // create an element without an owner
      const element = React.createElement('div', {id: 'some-id'});
      class Parent extends React.Component {
        render() {
          return <Child>{element}</Child>;
        }
      }
      let child;
      class Child extends React.Component {
        render() {
          child = this;
          const clone = React.cloneElement(this.props.children, {
            ref: 'xyz',
          });
          return <div>{clone}</div>;
        }
      }

      const root = ReactDOMClient.createRoot(document.createElement('div'));
      await act(() => root.render(<Parent />));
      expect(child.refs.xyz.tagName).toBe('DIV');
    }).toErrorDev([