Skip to content

Commit

Permalink
Tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebmarkbage
sebmarkbage committed Dec 10, 2024
1 parent 19860ab commit ba1b688
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 10 deletions.
44 changes: 38 additions & 6 deletions packages/react-client/src/__tests__/ReactFlight-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,20 @@ let assertConsoleErrorDev;

describe('ReactFlight', () => {
beforeEach(() => {
// Mock performance.now for timing tests
let time = 10;
const now = jest.fn().mockImplementation(() => {
return time++;
});
Object.defineProperty(performance, 'timeOrigin', {
value: time,
configurable: true,
});
Object.defineProperty(performance, 'now', {
value: now,
configurable: true,
});

jest.resetModules();
jest.mock('react', () => require('react/react.react-server'));
ReactServer = require('react');
Expand Down Expand Up @@ -274,6 +288,7 @@ describe('ReactFlight', () => {
});
});

// @gate enableComponentPerformanceTrack
it('can render a Client Component using a module reference and render there', async () => {
function UserClient(props) {
return (
Expand All @@ -300,6 +315,7 @@ describe('ReactFlight', () => {
expect(getDebugInfo(greeting)).toEqual(
__DEV__
? [
{time: 11},
{
name: 'Greeting',
env: 'Server',
Expand All @@ -322,6 +338,7 @@ describe('ReactFlight', () => {
expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
});

// @gate enableComponentPerformanceTrack
it('can render a shared forwardRef Component', async () => {
const Greeting = React.forwardRef(function Greeting(
{firstName, lastName},
Expand All @@ -343,6 +360,7 @@ describe('ReactFlight', () => {
expect(getDebugInfo(promise)).toEqual(
__DEV__
? [
{time: 11},
{
name: 'Greeting',
env: 'Server',
Expand Down Expand Up @@ -2659,6 +2677,7 @@ describe('ReactFlight', () => {
);
});

// @gate enableComponentPerformanceTrack
it('preserves debug info for server-to-server pass through', async () => {
function ThirdPartyLazyComponent() {
return <span>!</span>;
Expand Down Expand Up @@ -2705,6 +2724,7 @@ describe('ReactFlight', () => {
expect(getDebugInfo(promise)).toEqual(
__DEV__
? [
{time: 15},
{
name: 'ServerComponent',
env: 'Server',
Expand All @@ -2726,6 +2746,7 @@ describe('ReactFlight', () => {
expect(getDebugInfo(thirdPartyChildren[0])).toEqual(
__DEV__
? [
{time: 26},
{
name: 'ThirdPartyComponent',
env: 'third-party',
Expand All @@ -2736,12 +2757,14 @@ describe('ReactFlight', () => {
: undefined,
props: {},
},
{time: 17},
]
: undefined,
);
expect(getDebugInfo(thirdPartyChildren[1])).toEqual(
__DEV__
? [
{time: 27},
{
name: 'ThirdPartyLazyComponent',
env: 'third-party',
Expand All @@ -2758,6 +2781,7 @@ describe('ReactFlight', () => {
expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
__DEV__
? [
{time: 25},
{
name: 'ThirdPartyFragmentComponent',
env: 'third-party',
Expand Down Expand Up @@ -2833,6 +2857,7 @@ describe('ReactFlight', () => {
expect(getDebugInfo(promise)).toEqual(
__DEV__
? [
{time: 13},
{
name: 'ServerComponent',
env: 'Server',
Expand All @@ -2853,6 +2878,7 @@ describe('ReactFlight', () => {
expect(getDebugInfo(thirdPartyFragment)).toEqual(
__DEV__
? [
{time: 14},
{
name: 'Keyed',
env: 'Server',
Expand All @@ -2872,6 +2898,7 @@ describe('ReactFlight', () => {
expect(getDebugInfo(thirdPartyFragment.props.children)).toEqual(
__DEV__
? [
{time: 23},
{
name: 'ThirdPartyAsyncIterableComponent',
env: 'third-party',
Expand Down Expand Up @@ -3017,6 +3044,7 @@ describe('ReactFlight', () => {
}
});

// @gate enableComponentPerformanceTrack
it('can change the environment name inside a component', async () => {
let env = 'A';
function Component(props) {
Expand All @@ -3041,6 +3069,7 @@ describe('ReactFlight', () => {
expect(getDebugInfo(greeting)).toEqual(
__DEV__
? [
{time: 11},
{
name: 'Component',
env: 'A',
Expand Down Expand Up @@ -3205,6 +3234,7 @@ describe('ReactFlight', () => {
);
});

// @gate enableComponentPerformanceTrack
it('uses the server component debug info as the element owner in DEV', async () => {
function Container({children}) {
return children;
Expand Down Expand Up @@ -3244,7 +3274,9 @@ describe('ReactFlight', () => {
},
};
expect(getDebugInfo(greeting)).toEqual([
{time: 11},
greetInfo,
{time: 12},
{
name: 'Container',
env: 'Server',
Expand All @@ -3265,7 +3297,7 @@ describe('ReactFlight', () => {
]);
// The owner that created the span was the outer server component.
// We expect the debug info to be referentially equal to the owner.
expect(greeting._owner).toBe(greeting._debugInfo[0]);
expect(greeting._owner).toBe(greeting._debugInfo[1]);
} else {
expect(greeting._debugInfo).toBe(undefined);
expect(greeting._owner).toBe(undefined);
Expand Down Expand Up @@ -3531,7 +3563,7 @@ describe('ReactFlight', () => {
expect(caughtError.digest).toBe('digest("my-error")');
});

// @gate __DEV__
// @gate __DEV__ && enableComponentPerformanceTrack
it('can render deep but cut off JSX in debug info', async () => {
function createDeepJSX(n) {
if (n <= 0) {
Expand All @@ -3555,7 +3587,7 @@ describe('ReactFlight', () => {
await act(async () => {
const rootModel = await ReactNoopFlightClient.read(transport);
const root = rootModel.root;
const children = root._debugInfo[0].props.children;
const children = root._debugInfo[1].props.children;
expect(children.type).toBe('div');
expect(children.props.children.type).toBe('div');
ReactNoop.render(root);
Expand All @@ -3564,7 +3596,7 @@ describe('ReactFlight', () => {
expect(ReactNoop).toMatchRenderedOutput(<div>not using props</div>);
});

// @gate __DEV__
// @gate __DEV__ && enableComponentPerformanceTrack
it('can render deep but cut off Map/Set in debug info', async () => {
function createDeepMap(n) {
if (n <= 0) {
Expand Down Expand Up @@ -3603,8 +3635,8 @@ describe('ReactFlight', () => {

await act(async () => {
const rootModel = await ReactNoopFlightClient.read(transport);
const set = rootModel.set._debugInfo[0].props.set;
const map = rootModel.map._debugInfo[0].props.map;
const set = rootModel.set._debugInfo[1].props.set;
const map = rootModel.map._debugInfo[1].props.map;
expect(set instanceof Set).toBe(true);
expect(set.size).toBe(1);
// eslint-disable-next-line no-for-of-loops/no-for-of-loops
Expand Down
25 changes: 21 additions & 4 deletions packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,20 @@ function normalizeCodeLocInfo(str) {

describe('ReactFlightDOMEdge', () => {
beforeEach(() => {
// Mock performance.now for timing tests
let time = 10;
const now = jest.fn().mockImplementation(() => {
return time++;
});
Object.defineProperty(performance, 'timeOrigin', {
value: time,
configurable: true,
});
Object.defineProperty(performance, 'now', {
value: now,
configurable: true,
});

jest.resetModules();

reactServerAct = require('internal-test-utils').serverAct;
Expand Down Expand Up @@ -401,7 +415,7 @@ describe('ReactFlightDOMEdge', () => {

const serializedContent = await readResult(stream1);

expect(serializedContent.length).toBeLessThan(425);
expect(serializedContent.length).toBeLessThan(490);
expect(timesRendered).toBeLessThan(5);

const model = await ReactServerDOMClient.createFromReadableStream(stream2, {
Expand Down Expand Up @@ -472,7 +486,7 @@ describe('ReactFlightDOMEdge', () => {
const [stream1, stream2] = passThrough(stream).tee();

const serializedContent = await readResult(stream1);
expect(serializedContent.length).toBeLessThan(__DEV__ ? 605 : 400);
expect(serializedContent.length).toBeLessThan(__DEV__ ? 680 : 400);
expect(timesRendered).toBeLessThan(5);

const model = await serverAct(() =>
Expand Down Expand Up @@ -506,7 +520,7 @@ describe('ReactFlightDOMEdge', () => {
),
);
const serializedContent = await readResult(stream);
const expectedDebugInfoSize = __DEV__ ? 300 * 20 : 0;
const expectedDebugInfoSize = __DEV__ ? 320 * 20 : 0;
expect(serializedContent.length).toBeLessThan(150 + expectedDebugInfoSize);
});

Expand Down Expand Up @@ -934,6 +948,7 @@ describe('ReactFlightDOMEdge', () => {
);
});

// @gate enableComponentPerformanceTrack
it('supports async server component debug info as the element owner in DEV', async () => {
function Container({children}) {
return children;
Expand Down Expand Up @@ -989,7 +1004,9 @@ describe('ReactFlightDOMEdge', () => {
owner: null,
});
expect(lazyWrapper._debugInfo).toEqual([
{time: 11},
greetInfo,
{time: 12},
expect.objectContaining({
name: 'Container',
env: 'Server',
Expand All @@ -998,7 +1015,7 @@ describe('ReactFlightDOMEdge', () => {
]);
// The owner that created the span was the outer server component.
// We expect the debug info to be referentially equal to the owner.
expect(greeting._owner).toBe(lazyWrapper._debugInfo[0]);
expect(greeting._owner).toBe(lazyWrapper._debugInfo[1]);
} else {
expect(lazyWrapper._debugInfo).toBe(undefined);
expect(greeting._owner).toBe(undefined);
Expand Down

0 comments on commit ba1b688

Please sign in to comment.