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

Code before:
          {React.Children.map(children, child => (
            <div />
          ))}
        </div>
      );
    }

    const container = document.createElement('div');
    const root = ReactDOMClient.createRoot(container);
    await expect(async () => {
      await act(() => {
        root.render(
          <ComponentRenderingMappedChildren>
            <div />
            <div />
          </ComponentRenderingMappedChildren>,
        );
      });
    }).toErrorDev([
      'Warning: Each child in a list should have a unique "key" prop.',
    ]);
  });

  it('warns for cloned list children without keys', async () => {
    function ComponentRenderingClonedChildren({children}) {
      return (
        <div>
          {React.Children.map(children, child => React.cloneElement(child))}
        </div>
      );
    }

    const container = document.createElement('div');
    const root = ReactDOMClient.createRoot(container);
    await expect(async () => {
      await act(() => {
        root.render(
          <ComponentRenderingClonedChildren>
            {[<div />]}
          </ComponentRenderingClonedChildren>,
        );
      });
    }).toErrorDev([
      'Warning: Each child in a list should have a unique "key" prop.',
    ]);
  });

  it('does not warn for cloned static children without keys', async () => {
    function ComponentRenderingClonedChildren({children}) {
      return (
        <div>

Review comment (suggestion):
This is the use case that I originally sought to fix.

I suppose this is now more or less the same as the test case above (that simply returns `<div />`), but maybe still worth keeping as a test case?

Seeking input on whether to keep this and the test case below, or to delete them.

Code after:
          {React.Children.map(children, child => (
            <div />
          ))}
        </div>
      );
    }

    const container = document.createElement('div');
    const root = ReactDOMClient.createRoot(container);
    await expect(async () => {
      await act(() => {
        root.render(
          <ComponentRenderingMappedChildren>
            <div />
            <div />
          </ComponentRenderingMappedChildren>,
        );
      });
    }).toErrorDev([]);
  });

  it('warns for cloned list children without keys', async () => {
    function ComponentRenderingClonedChildren({children}) {
      return (
        <div>
          {React.Children.map(children, child => React.cloneElement(child))}
        </div>
      );
    }

    const container = document.createElement('div');
    const root = ReactDOMClient.createRoot(container);
    await expect(async () => {
      await act(() => {
        root.render(
          <ComponentRenderingClonedChildren>
            {[<div />]}
          </ComponentRenderingClonedChildren>,
        );
      });
    }).toErrorDev([
      'Warning: Each child in a list should have a unique "key" prop.',
    ]);
  });

  it('does not warn for cloned static children without keys', async () => {
    function ComponentRenderingClonedChildren({children}) {
      return (
        <div>
          {React.Children.map(children, child => React.cloneElement(child))}
        </div>