Skip to content

Commit 74dc96c

Browse files
V3RONV3RON
committed
feat: add image snapshots
1 parent 147871f commit 74dc96c

28 files changed

Lines changed: 463 additions & 62 deletions

‎apps/playground/jest.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = {
1010
setupFilesAfterEnv: ['./src/setupFileAfterEnv.ts'],
1111
// This is necessary to prevent Jest from transforming the workspace packages.
1212
// Not needed in users projects, as they will have the packages installed in their node_modules.
13-
transformIgnorePatterns: ['/packages/'],
13+
transformIgnorePatterns: ['/packages/', '/node_modules/'],
1414
},
1515
],
1616
collectCoverageFrom: ['./src/**/*.(ts|tsx)'],

‎apps/playground/src/__tests__/ui/__image_snapshots__/blue-square.png‎

18.9 KB
Loading

‎apps/playground/src/__tests__/ui/__image_snapshots__/green-square.png‎

23 KB
Loading

‎apps/playground/src/__tests__/ui/__image_snapshots__/purple-square-will-fail.png‎

19.4 KB
Loading

‎apps/playground/src/__tests__/ui/__image_snapshots__/red-square.png‎

18.9 KB
Loading

‎apps/playground/src/__tests__/ui/__image_snapshots__/yellow-square-custom-options.png‎

21.1 KB
Loading

‎apps/playground/src/__tests__/ui/actions.harness.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {
2+
screen,
3+
describe,
4+
test,
5+
render,
6+
userEvent,
7+
fn,
8+
expect,
9+
} from 'react-native-harness';
10+
import { View, Text, Pressable } from 'react-native';
11+
12+
describe('Actions', () => {
13+
test('should tap element found by testID', async () => {
14+
const onPress = fn();
15+
16+
await render(
17+
<View
18+
style={{
19+
flex: 1,
20+
justifyContent: 'center',
21+
alignItems: 'center',
22+
backgroundColor: 'white',
23+
}}
24+
>
25+
<Pressable
26+
testID="this-is-test-id"
27+
onPress={onPress}
28+
style={{ padding: 10, backgroundColor: 'red' }}
29+
>
30+
<Text style={{ color: 'black' }}>This is a view with a testID</Text>
31+
</Pressable>
32+
</View>
33+
);
34+
35+
const element = await screen.findByTestId('this-is-test-id');
36+
await userEvent.tap(element);
37+
38+
expect(onPress).toHaveBeenCalled();
39+
});
40+
});

‎apps/playground/src/__tests__/ui/queries.harness.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,4 @@ describe('Queries', () => {
3838
expect(Array.isArray(elements)).toBe(true);
3939
expect(elements.length).toBe(2);
4040
});
41-
42-
test('should tap element found by testID', async () => {
43-
await render(
44-
<View>
45-
<View testID="this-is-test-id">
46-
<Text>This is a view with a testID</Text>
47-
</View>
48-
</View>
49-
);
50-
const element = await screen.findByTestId('this-is-test-id');
51-
await userEvent.tap(element);
52-
// If tap succeeds without throwing, the test passes
53-
expect(element).toBeDefined();
54-
});
5541
});

‎apps/playground/src/__tests__/ui/screenshot.harness.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { describe, test, render, screen, expect } from 'react-native-harness';
2+
import { View, Text } from 'react-native';
3+
4+
describe('Screenshot', () => {
5+
test('should match image snapshot with multiple snapshots', async () => {
6+
await render(
7+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
8+
<View
9+
style={{
10+
width: 100,
11+
height: 100,
12+
backgroundColor: 'blue',
13+
justifyContent: 'center',
14+
alignItems: 'center',
15+
}}
16+
>
17+
<Text style={{ color: 'white' }}>Hello, world!</Text>
18+
</View>
19+
</View>
20+
);
21+
const screenshot1 = await screen.screenshot();
22+
await expect(screenshot1).toMatchImageSnapshot({ name: 'blue-square' });
23+
24+
// Change the background color and take another snapshot
25+
await render(
26+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
27+
<View
28+
style={{
29+
width: 100,
30+
height: 100,
31+
backgroundColor: 'red',
32+
justifyContent: 'center',
33+
alignItems: 'center',
34+
}}
35+
>
36+
<Text style={{ color: 'white' }}>Hello, world!</Text>
37+
</View>
38+
</View>
39+
);
40+
const screenshot2 = await screen.screenshot();
41+
await expect(screenshot2).toMatchImageSnapshot({ name: 'red-square' });
42+
43+
// Take a third snapshot with different content
44+
await render(
45+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
46+
<View
47+
style={{
48+
width: 100,
49+
height: 100,
50+
backgroundColor: 'green',
51+
justifyContent: 'center',
52+
alignItems: 'center',
53+
}}
54+
>
55+
<Text style={{ color: 'white' }}>Goodbye, world!</Text>
56+
</View>
57+
</View>
58+
);
59+
const screenshot3 = await screen.screenshot();
60+
await expect(screenshot3).toMatchImageSnapshot({ name: 'green-square' });
61+
});
62+
63+
test('should match image snapshot with custom options', async () => {
64+
await render(
65+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
66+
<View
67+
style={{
68+
width: 100,
69+
height: 100,
70+
backgroundColor: 'yellow',
71+
justifyContent: 'center',
72+
alignItems: 'center',
73+
}}
74+
>
75+
<Text style={{ color: 'black' }}>Custom options test</Text>
76+
</View>
77+
</View>
78+
);
79+
const screenshot = await screen.screenshot();
80+
await expect(screenshot).toMatchImageSnapshot({
81+
name: 'yellow-square-custom-options',
82+
threshold: 0.05, // More sensitive threshold
83+
diffColor: [0, 255, 0], // Green diff color
84+
});
85+
});
86+
87+
test('should create diff image when test fails', async () => {
88+
await render(
89+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
90+
<View
91+
style={{
92+
width: 100,
93+
height: 100,
94+
backgroundColor: 'purple', // Different color to cause mismatch
95+
justifyContent: 'center',
96+
alignItems: 'center',
97+
}}
98+
>
99+
<Text style={{ color: 'white' }}>This will fail</Text>
100+
</View>
101+
</View>
102+
);
103+
const screenshot = await screen.screenshot();
104+
// This should fail and create a diff image
105+
await expect(screenshot).toMatchImageSnapshot({
106+
name: 'purple-square-will-fail',
107+
});
108+
});
109+
});

‎packages/bridge/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,12 @@
3030
"@react-native-harness/platforms": "workspace:*",
3131
"@react-native-harness/tools": "workspace:*",
3232
"birpc": "^2.4.0",
33+
"pngjs": "^7.0.0",
3334
"tslib": "^2.3.0",
3435
"ws": "^8.18.2"
3536
},
3637
"devDependencies": {
38+
"@types/pngjs": "^6.0.5",
3739
"@types/ws": "^8.18.1"
3840
},
3941
"license": "MIT"

0 commit comments

Comments
 (0)