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

Code before:
    function App() {
      // We use the ReactServer runtime here to get the Server owner.
      return ReactServer.createElement(
        Indirection,
        null,
        ReactServer.createElement(ClientComponent),
      );
    }

    const transport = ReactNoopFlightServer.render(<App />);

    await expect(async () => {
      await act(() => {
        startTransition(() => {
          ReactNoop.render(ReactNoopFlightClient.read(transport));
        });
      });
    }).toErrorDev(
      'Each child in a list should have a unique "key" prop.\n' +
        '\n' +
        'Check the render method of `Component`. See https://react.dev/link/warning-keys for more information.\n' +
        '    in span (at **)\n' +
        '    in Component (at **)\n' +
        (gate(flags => flags.enableOwnerStacks)
          ? ''
          : '    in Indirection (at **)\n') +
        '    in App (at **)',
    );
  });

  it('should trigger the inner most error boundary inside a Client Component', async () => {
    function ServerComponent() {
      throw new Error('This was thrown in the Server Component.');
    }

    function ClientComponent({children}) {
      // This should catch the error thrown by the Server Component, even though it has already happened.
      // We currently need to wrap it in a div because as it's set up right now, a lazy reference will
      // throw during reconciliation which will trigger the parent of the error boundary.
      // This is similar to how these will suspend the parent if it's a direct child of a Suspense boundary.
      // That's a bug.
      return (
        <ErrorBoundary expectedMessage="This was thrown in the Server Component.">
          <div>{children}</div>
        </ErrorBoundary>
      );
    }

    const ClientComponentReference = clientReference(ClientComponent);

    function Server() {

Review comment (refactor):
If we agree that the pattern in this test is better, I'll rewrite the other tests and then it may be better to move this into a variable. Though we usually prefer having explicit message in tests so maybe not.

Code after:
            environmentName: 'Server',
          },
        ],
        findSourceMapURLCalls: gate(flags => flags.enableOwnerStacks)
          ? [
              [__filename],
              [__filename],
              // TODO: What should we request here? The outer (<anonymous>) or the inner (inspected-page.html)?
              ['inspected-page.html:29:11), <anonymous>'],
              ['file://~/(some)(really)(exotic-directory)/ReactFlight-test.js'],
              ['file:///testing.js'],
              [__filename],
            ]
          : [],
      });
    } else {
      expect(errors.map(getErrorForJestMatcher)).toEqual([
        {
          message:
            'An error occurred in the Server Components render. The specific message is omitted in production' +
            ' builds to avoid leaking sensitive details. A digest property is included on this error instance which' +
            ' may provide additional details about the nature of the error.',
          stack:
            'Error: An error occurred in the Server Components render. The specific message is omitted in production' +
            ' builds to avoid leaking sensitive details. A digest property is included on this error instance which' +
            ' may provide additional details about the nature of the error.',
          digest: 'digest("This is an error")',
        },
      ]);
    }
  });

  it('should include server components in warning stacks', async () => {
    function Component() {
      // Trigger key warning
      return <div>{[<span />]}</div>;
    }
    const ClientComponent = clientReference(Component);

    function Indirection({children}) {
      return children;
    }

    function App() {
      // We use the ReactServer runtime here to get the Server owner.
      return ReactServer.createElement(
        Indirection,
        null,
        ReactServer.createElement(ClientComponent),
      );
    }