diff --git a/examples/native-cli/src/AsyncComponent.perf-test.tsx b/examples/native-cli/src/AsyncComponent.perf.tsx similarity index 87% rename from examples/native-cli/src/AsyncComponent.perf-test.tsx rename to examples/native-cli/src/AsyncComponent.perf.tsx index 625d445..afaca5f 100644 --- a/examples/native-cli/src/AsyncComponent.perf-test.tsx +++ b/examples/native-cli/src/AsyncComponent.perf.tsx @@ -6,7 +6,7 @@ import { AsyncComponent } from './AsyncComponent'; jest.setTimeout(600_000); -test('RN CLI - AsyncComponent 10 runs', async () => { +test('RN CLI - AsyncComponent (10 runs)', async () => { const scenario = async () => { const button = screen.getByText('Action'); @@ -18,7 +18,7 @@ test('RN CLI - AsyncComponent 10 runs', async () => { await measureRenders(, { scenario, runs: 10 }); }); -test('RN CLI - AsyncComponent 50 runs', async () => { +test('RN CLI - AsyncComponent (50 runs)', async () => { const scenario = async () => { const button = screen.getByText('Action'); diff --git a/examples/native-cli/src/AsyncComponent.tsx b/examples/native-cli/src/AsyncComponent.tsx index 8dad026..96c7933 100644 --- a/examples/native-cli/src/AsyncComponent.tsx +++ b/examples/native-cli/src/AsyncComponent.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { View, Text, Pressable } from 'react-native'; -import { SlowList } from './SlowList'; +import { TestList } from './TestList'; export function AsyncComponent() { const [count, setCount] = React.useState(0); @@ -17,7 +17,7 @@ export function AsyncComponent() { Count: {count} - + ); } diff --git a/examples/native-cli/src/SlowList.perf-test.tsx b/examples/native-cli/src/SlowList.perf-test.tsx deleted file mode 100644 index 6027d17..0000000 --- a/examples/native-cli/src/SlowList.perf-test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -import { jest, test } from '@jest/globals'; -import { measureRenders } from 'reassure'; -import { SlowList } from './SlowList'; - -jest.setTimeout(60_000); - -test('RN CLI - SlowList 100 items', async () => { - await measureRenders(, { runs: 10 }); -}); diff --git a/examples/native-cli/src/SlowList.tsx b/examples/native-cli/src/SlowList.tsx deleted file mode 100644 index f4c8d9c..0000000 --- a/examples/native-cli/src/SlowList.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import { View, Text } from 'react-native'; -interface Props { - count: number; -} - -export const SlowList = ({ count }: Props) => { - const data = Array.from({ length: count }, (_, index) => index); - - return ( - - {data.map(item => ( - - ))} - - ); -}; - -interface ItemProps { - title: string; -} - -const SlowListItem = ({ title }: ItemProps) => { - const [, forceRender] = React.useState<{}>(); - - React.useEffect(() => { - forceRender({}); - }, [title]); - - return ( - - {title} - - ); -}; diff --git a/examples/native-cli/src/TestList.perf.tsx b/examples/native-cli/src/TestList.perf.tsx new file mode 100644 index 0000000..5699901 --- /dev/null +++ b/examples/native-cli/src/TestList.perf.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { jest, test } from '@jest/globals'; +import { measureRenders } from 'reassure'; +import { TestList } from './TestList'; + +jest.setTimeout(60_000); + +test('RN CLI - TestList (100 items)', async () => { + await measureRenders(); +}); diff --git a/examples/native-cli/src/SlowList.test.tsx b/examples/native-cli/src/TestList.test.tsx similarity index 59% rename from examples/native-cli/src/SlowList.test.tsx rename to examples/native-cli/src/TestList.test.tsx index af58ad8..9559de2 100644 --- a/examples/native-cli/src/SlowList.test.tsx +++ b/examples/native-cli/src/TestList.test.tsx @@ -1,9 +1,10 @@ +import * as React from 'react'; import { render, screen } from '@testing-library/react-native'; import { expect, test } from '@jest/globals'; -import { SlowList } from './SlowList'; +import { TestList } from './TestList'; -test('SlowList', () => { - render(); +test('TestList', () => { + render(); const items = screen.getAllByText(/Item/i); expect(items).toHaveLength(10); diff --git a/examples/native-cli/src/TestList.tsx b/examples/native-cli/src/TestList.tsx new file mode 100644 index 0000000..6a3dced --- /dev/null +++ b/examples/native-cli/src/TestList.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { View, Text } from 'react-native'; + +interface TestListProps { + count: number; +} + +export const TestList = ({ count }: TestListProps) => { + const data = Array.from({ length: count }, (_, index) => index); + + return ( + + {data.map(item => ( + + ))} + + ); +}; + +interface ListItemProps { + title: string; +} + +const ListItem = ({ title }: ListItemProps) => { + // Uncomment to introduce a performance issue + // const [, forceRender] = React.useState<{}>(); + // React.useEffect(() => { + // forceRender({}); + // }, [title]); + + return ( + + {title} + + ); +}; diff --git a/examples/native-expo/src/AsyncComponent.perf-test.tsx b/examples/native-expo/src/AsyncComponent.perf.tsx similarity index 84% rename from examples/native-expo/src/AsyncComponent.perf-test.tsx rename to examples/native-expo/src/AsyncComponent.perf.tsx index 8ced56c..0f20d77 100644 --- a/examples/native-expo/src/AsyncComponent.perf-test.tsx +++ b/examples/native-expo/src/AsyncComponent.perf.tsx @@ -6,7 +6,7 @@ import { AsyncComponent } from './AsyncComponent'; jest.setTimeout(600_000); -test('RN Expo - AsyncComponent 10 runs', async () => { +test('React Native - Expo - AsyncComponent (10 runs)', async () => { const scenario = async () => { const button = screen.getByText('Action'); @@ -18,7 +18,7 @@ test('RN Expo - AsyncComponent 10 runs', async () => { await measureRenders(, { scenario, runs: 10 }); }); -test('RN Expo - AsyncComponent 50 runs', async () => { +test('React Native - Expo - AsyncComponent (50 runs)', async () => { const scenario = async () => { const button = screen.getByText('Action'); diff --git a/examples/native-expo/src/AsyncComponent.tsx b/examples/native-expo/src/AsyncComponent.tsx index 8dad026..3e91d88 100644 --- a/examples/native-expo/src/AsyncComponent.tsx +++ b/examples/native-expo/src/AsyncComponent.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { View, Text, Pressable } from 'react-native'; -import { SlowList } from './SlowList'; +import { TestList } from './TestList'; export function AsyncComponent() { const [count, setCount] = React.useState(0); const handlePress = () => { - setTimeout(() => setCount(c => c + 1), 10); + setTimeout(() => setCount((c) => c + 1), 10); }; return ( @@ -17,7 +17,7 @@ export function AsyncComponent() { Count: {count} - + ); } diff --git a/examples/native-expo/src/SlowList.perf-test.tsx b/examples/native-expo/src/SlowList.perf-test.tsx deleted file mode 100644 index cecd0d4..0000000 --- a/examples/native-expo/src/SlowList.perf-test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -import { jest, test } from '@jest/globals'; -import { measureRenders } from 'reassure'; -import { SlowList } from './SlowList'; - -jest.setTimeout(60_000); - -test('RN Expo - SlowList 100 items', async () => { - await measureRenders(, { runs: 10 }); -}); diff --git a/examples/native-expo/src/SlowList.tsx b/examples/native-expo/src/SlowList.tsx deleted file mode 100644 index fc19b0b..0000000 --- a/examples/native-expo/src/SlowList.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import { View, Text } from 'react-native'; - -interface Props { - count: number; -} - -export const SlowList = ({ count }: Props) => { - const data = Array.from({ length: count }, (_, index) => index); - - return ( - - {data.map((item) => ( - - ))} - - ); -}; - -interface ItemProps { - title: string; -} - -const SlowListItem = ({ title }: ItemProps) => { - const [, forceRender] = React.useState<{}>(); - - React.useEffect(() => { - forceRender({}); - }, [title]); - - return ( - - {title} - - ); -}; diff --git a/examples/native-expo/src/TestList.perf.tsx b/examples/native-expo/src/TestList.perf.tsx new file mode 100644 index 0000000..295bfe4 --- /dev/null +++ b/examples/native-expo/src/TestList.perf.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { jest, test } from '@jest/globals'; +import { measureRenders } from 'reassure'; +import { TestList } from './TestList'; + +jest.setTimeout(60_000); + +test('React Native - Expo - TestList (100 items)', async () => { + await measureRenders(, { runs: 10 }); +}); diff --git a/examples/native-expo/src/SlowList.test.tsx b/examples/native-expo/src/TestList.test.tsx similarity index 64% rename from examples/native-expo/src/SlowList.test.tsx rename to examples/native-expo/src/TestList.test.tsx index 611c220..3f45611 100644 --- a/examples/native-expo/src/SlowList.test.tsx +++ b/examples/native-expo/src/TestList.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react-native'; -import { SlowList } from './SlowList'; +import { TestList } from './TestList'; -test('SlowList', () => { - render(); +test('TestList', () => { + render(); const items = screen.getAllByText(/Item/i); expect(items).toHaveLength(10); diff --git a/examples/native-expo/src/TestList.tsx b/examples/native-expo/src/TestList.tsx new file mode 100644 index 0000000..e30b044 --- /dev/null +++ b/examples/native-expo/src/TestList.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { View, Text } from 'react-native'; + +interface TestListProps { + count: number; +} + +export const TestList = ({ count }: TestListProps) => { + const data = Array.from({ length: count }, (_, index) => index); + + return ( + + {data.map((item) => ( + + ))} + + ); +}; + +interface ListItemProps { + title: string; +} + +const ListItem = ({ title }: ListItemProps) => { + // Uncomment to introduce a performance issue + // const [, forceRender] = React.useState<{}>(); + // React.useEffect(() => { + // forceRender({}); + // }, [title]); + + return ( + + {title} + + ); +}; diff --git a/examples/web-nextjs/src/components/AsyncComponent.perf-test.tsx b/examples/web-nextjs/src/components/AsyncComponent.perf.tsx similarity index 86% rename from examples/web-nextjs/src/components/AsyncComponent.perf-test.tsx rename to examples/web-nextjs/src/components/AsyncComponent.perf.tsx index acb0c69..b4ac728 100644 --- a/examples/web-nextjs/src/components/AsyncComponent.perf-test.tsx +++ b/examples/web-nextjs/src/components/AsyncComponent.perf.tsx @@ -1,4 +1,3 @@ -// @ts-expect-error Needed for Jest testing import * as React from 'react'; import { fireEvent, screen } from '@testing-library/react'; import { measureRenders } from 'reassure'; @@ -6,7 +5,7 @@ import { AsyncComponent } from './AsyncComponent'; jest.setTimeout(60_000); -test('Web Next.js - AsyncComponent 10 runs', async () => { +test('Web Next.js - AsyncComponent (10 runs)', async () => { const scenario = async () => { const button = screen.getByText('Action'); @@ -25,7 +24,7 @@ test('Web Next.js - AsyncComponent 10 runs', async () => { await measureRenders(, { scenario, runs: 10 }); }); -test('Web Next.js - AsyncComponent 50 runs', async () => { +test('Web Next.js - AsyncComponent (50 runs)', async () => { const scenario = async () => { const button = screen.getByText('Action'); diff --git a/examples/web-nextjs/src/components/AsyncComponent.tsx b/examples/web-nextjs/src/components/AsyncComponent.tsx index 5ccd6e0..75c5176 100644 --- a/examples/web-nextjs/src/components/AsyncComponent.tsx +++ b/examples/web-nextjs/src/components/AsyncComponent.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { SlowList } from './SlowList'; +import { TestList } from './TestList'; export function AsyncComponent() { const [count, setCount] = React.useState(0); @@ -13,7 +13,7 @@ export function AsyncComponent() { Count: {count} - + ); } diff --git a/examples/web-nextjs/src/components/SlowList.perf-test.tsx b/examples/web-nextjs/src/components/SlowList.perf-test.tsx deleted file mode 100644 index ce1ed1e..0000000 --- a/examples/web-nextjs/src/components/SlowList.perf-test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -// @ts-expect-error Needed for Jest testing -import * as React from 'react'; -import { measureRenders } from 'reassure'; -import { SlowList } from './SlowList'; - -jest.setTimeout(60_000); - -test('Web Next.js - SlowList 100 items', async () => { - await measureRenders(, { runs: 10 }); -}); diff --git a/examples/web-nextjs/src/components/SlowList.tsx b/examples/web-nextjs/src/components/SlowList.tsx deleted file mode 100644 index 1176747..0000000 --- a/examples/web-nextjs/src/components/SlowList.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; - -interface Props { - count: number; -} - -export const SlowList = ({ count }: Props) => { - const data = Array.from({ length: count }, (_, index) => index); - - return ( -
- {data.map((item) => ( - - ))} -
- ); -}; - -interface ItemProps { - title: string; -} - -const SlowListItem = ({ title }: ItemProps) => { - const [, forceRender] = React.useState(); - - React.useEffect(() => { - forceRender({}); - }, [title]); - - return ( -
-

{title}

-
- ); -}; diff --git a/examples/web-nextjs/src/components/TestList.perf.tsx b/examples/web-nextjs/src/components/TestList.perf.tsx new file mode 100644 index 0000000..1a71a72 --- /dev/null +++ b/examples/web-nextjs/src/components/TestList.perf.tsx @@ -0,0 +1,10 @@ +// @ts-expect-error Needed for Jest testing +import * as React from 'react'; +import { measureRenders } from 'reassure'; +import { TestList } from './TestList'; + +jest.setTimeout(60_000); + +test('Web Next.js - TestList (100 items)', async () => { + await measureRenders(, { runs: 10 }); +}); diff --git a/examples/web-nextjs/src/components/SlowList.test.tsx b/examples/web-nextjs/src/components/TestList.test.tsx similarity index 63% rename from examples/web-nextjs/src/components/SlowList.test.tsx rename to examples/web-nextjs/src/components/TestList.test.tsx index cc73d84..d78b7b0 100644 --- a/examples/web-nextjs/src/components/SlowList.test.tsx +++ b/examples/web-nextjs/src/components/TestList.test.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import { SlowList } from './SlowList'; +import { TestList } from './TestList'; -test('SlowList', () => { - render(); +test('TestList', () => { + render(); const items = screen.getAllByText(/Item/i); expect(items).toHaveLength(10); diff --git a/examples/web-nextjs/src/components/TestList.tsx b/examples/web-nextjs/src/components/TestList.tsx new file mode 100644 index 0000000..e411416 --- /dev/null +++ b/examples/web-nextjs/src/components/TestList.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +interface TestListProps { + count: number; +} + +export const TestList = ({ count }: TestListProps) => { + const data = Array.from({ length: count }, (_, index) => index); + + return ( +
+ {data.map((item) => ( + + ))} +
+ ); +}; + +interface ItemProps { + title: string; +} + +const ListItem = ({ title }: ItemProps) => { + // Uncomment to introduce a performance issue + // const [, forceRender] = React.useState(); + // React.useEffect(() => { + // forceRender({}); + // }, [title]); + + return ( +
+

{title}

+
+ ); +}; diff --git a/examples/web-vite/src/AsyncComponent.perf-test.tsx b/examples/web-vite/src/AsyncComponent.perf.tsx similarity index 90% rename from examples/web-vite/src/AsyncComponent.perf-test.tsx rename to examples/web-vite/src/AsyncComponent.perf.tsx index 20bde42..2a037eb 100644 --- a/examples/web-vite/src/AsyncComponent.perf-test.tsx +++ b/examples/web-vite/src/AsyncComponent.perf.tsx @@ -6,7 +6,7 @@ import { AsyncComponent } from './AsyncComponent'; jest.setTimeout(60_000); -test('Web Vite - AsyncComponent 10 runs', async () => { +test('Web Vite - AsyncComponent (10 runs)', async () => { const scenario = async () => { const button = screen.getByText('Action'); @@ -25,7 +25,7 @@ test('Web Vite - AsyncComponent 10 runs', async () => { await measureRenders(, { scenario, runs: 10 }); }); -test('Web Vite - AsyncComponent 50 runs', async () => { +test('Web Vite - AsyncComponent (50 runs)', async () => { const scenario = async () => { const button = screen.getByText('Action'); diff --git a/examples/web-vite/src/AsyncComponent.tsx b/examples/web-vite/src/AsyncComponent.tsx index 5ccd6e0..75c5176 100644 --- a/examples/web-vite/src/AsyncComponent.tsx +++ b/examples/web-vite/src/AsyncComponent.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { SlowList } from './SlowList'; +import { TestList } from './TestList'; export function AsyncComponent() { const [count, setCount] = React.useState(0); @@ -13,7 +13,7 @@ export function AsyncComponent() { Count: {count} - + ); } diff --git a/examples/web-vite/src/SlowList.perf-test.tsx b/examples/web-vite/src/SlowList.perf-test.tsx deleted file mode 100644 index bf165bc..0000000 --- a/examples/web-vite/src/SlowList.perf-test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -// @ts-expect-error Needed for Jest testing -import * as React from 'react'; -import { measureRenders } from 'reassure'; -import { SlowList } from './SlowList'; - -jest.setTimeout(60_000); - -test('Web Vite - SlowList 100 items', async () => { - await measureRenders(, { runs: 10 }); -}); diff --git a/examples/web-vite/src/SlowList.tsx b/examples/web-vite/src/SlowList.tsx deleted file mode 100644 index 9c6f9ad..0000000 --- a/examples/web-vite/src/SlowList.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; - -interface Props { - count: number; -} - -export const SlowList = ({ count }: Props) => { - const data = Array.from({ length: count }, (_, index) => index); - - return ( -
- {data.map((item) => ( - - ))} -
- ); -}; - -interface ItemProps { - title: string; -} - -const SlowListItem = ({ title }: ItemProps) => { - const [, forceRender] = React.useState(); - - React.useEffect(() => { - forceRender({}); - }, [title]); - - return ( -
-

{title}

-
- ); -}; diff --git a/examples/web-vite/src/TestList.perf.tsx b/examples/web-vite/src/TestList.perf.tsx new file mode 100644 index 0000000..6afa2f6 --- /dev/null +++ b/examples/web-vite/src/TestList.perf.tsx @@ -0,0 +1,10 @@ +// @ts-expect-error Needed for Jest testing +import * as React from 'react'; +import { measureRenders } from 'reassure'; +import { TestList } from './TestList'; + +jest.setTimeout(60_000); + +test('Web Vite - TestList (100 items)', async () => { + await measureRenders(, { runs: 10 }); +}); diff --git a/examples/web-vite/src/SlowList.test.tsx b/examples/web-vite/src/TestList.test.tsx similarity index 68% rename from examples/web-vite/src/SlowList.test.tsx rename to examples/web-vite/src/TestList.test.tsx index 309ace6..87dd552 100644 --- a/examples/web-vite/src/SlowList.test.tsx +++ b/examples/web-vite/src/TestList.test.tsx @@ -1,10 +1,10 @@ // @ts-expect-error Needed for Jest testing import * as React from 'react'; import { render, screen } from '@testing-library/react'; -import { SlowList } from './SlowList'; +import { TestList } from './TestList'; -test('SlowList', () => { - render(); +test('TestList', () => { + render(); const items = screen.getAllByText(/Item/i); expect(items).toHaveLength(10); diff --git a/examples/web-vite/src/TestList.tsx b/examples/web-vite/src/TestList.tsx new file mode 100644 index 0000000..659728e --- /dev/null +++ b/examples/web-vite/src/TestList.tsx @@ -0,0 +1,36 @@ +// @ts-expect-error - Required by Jest tests +import * as React from 'react'; + +interface TestListProps { + count: number; +} + +export const TestList = ({ count }: TestListProps) => { + const data = Array.from({ length: count }, (_, index) => index); + + return ( +
+ {data.map((item) => ( + + ))} +
+ ); +}; + +interface ListItemProps { + title: string; +} + +const ListItem = ({ title }: ListItemProps) => { + // Uncomment to introduce a performance issue + // const [, forceRender] = React.useState(); + // React.useEffect(() => { + // forceRender({}); + // }, [title]); + + return ( +
+

{title}

+
+ ); +};