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

Code before:
    );
    await expect(async () => {
      await waitForAll([]);
    }).toErrorDev(
      'Each child in a list should have a unique "key" prop.' +
        '\n\nCheck the top-level render call using <ForwardRef>. It was passed a child from ForwardRef. ' +
        'See https://react.dev/link/warning-keys for more information.\n' +
        '    in span (at **)\n' +
        '    in ',
    );
  });

  it('should use the inner function name for the stack', async () => {
    const RefForwardingComponent = React.forwardRef(function Inner(props, ref) {
      return [<span />];
    });
    ReactNoop.render(
      <p>
        <RefForwardingComponent />
      </p>,
    );
    await expect(async () => {
      await waitForAll([]);
    }).toErrorDev(
      'Each child in a list should have a unique "key" prop.' +
        '\n\nCheck the top-level render call using <ForwardRef(Inner)>. It was passed a child from ForwardRef(Inner). ' +
        'See https://react.dev/link/warning-keys for more information.\n' +
        '    in span (at **)\n' +
        '    in Inner (at **)' +
        (gate(flags => flags.enableOwnerStacks) ? '' : '\n    in p (at **)'),
    );
  });

  it('should use the inner name in the stack', async () => {
    const fn = (props, ref) => {
      return [<span />];
    };
    Object.defineProperty(fn, 'name', {value: 'Inner'});
    const RefForwardingComponent = React.forwardRef(fn);
    ReactNoop.render(
      <p>
        <RefForwardingComponent />
      </p>,
    );
    await expect(async () => {
      await waitForAll([]);
    }).toErrorDev(
      'Each child in a list should have a unique "key" prop.' +
        '\n\nCheck the top-level render call using <ForwardRef(Inner)>. It was passed a child from ForwardRef(Inner). ' +
        'See https://react.dev/link/warning-keys for more information.\n' +
        '    in span (at **)\n' +

Review comment (suggestion):
@sebmarkbage not sure if this is expected, but it's possible for owner stacks to have a file path in the `name` like here. I updated the `normalizeCodeLocInfo` to replace it if needed.

Code after:
    assertConsoleErrorDev(
      [
        'forwardRef render functions accept exactly two parameters: props and ref. ' +
          'Any additional parameter will be undefined.',
      ],
      {withoutStack: true},
    );
  });

  it('should skip forwardRef in the stack if neither displayName nor name are present', async () => {
    const RefForwardingComponent = React.forwardRef(function (props, ref) {
      return [<span />];
    });
    ReactNoop.render(
      <p>
        <RefForwardingComponent />
      </p>,
    );
    await waitForAll([]);
    assertConsoleErrorDev([
      'Each child in a list should have a unique "key" prop.' +
        '\n\nCheck the top-level render call using <ForwardRef>. It was passed a child from ForwardRef. ' +
        'See https://react.dev/link/warning-keys for more information.\n' +
        '    in span (at **)\n' +
        (gate(flags => flags.enableOwnerStacks)
          ? '    in **/forwardRef-test.js:**:** (at **)'
          : '    in p (at **)'),
    ]);
  });

  it('should use the inner function name for the stack', async () => {
    const RefForwardingComponent = React.forwardRef(function Inner(props, ref) {
      return [<span />];
    });
    ReactNoop.render(
      <p>
        <RefForwardingComponent />
      </p>,
    );

    await waitForAll([]);
    assertConsoleErrorDev([
      'Each child in a list should have a unique "key" prop.' +
        '\n\nCheck the top-level render call using <ForwardRef(Inner)>. It was passed a child from ForwardRef(Inner). ' +
        'See https://react.dev/link/warning-keys for more information.\n' +
        '    in span (at **)\n' +
        '    in Inner (at **)' +
        (gate(flags => flags.enableOwnerStacks) ? '' : '\n    in p (at **)'),
    ]);
  });