microsoft / microsoft/react-native-windows
E2E Test App X86Hermes Job Failing in CI/PR due to changed snapshot
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Problem Description
All CI/PR in main keep failing the DisplayNoneDisabledTest test due to a change in the color of one of the components:
FAIL test/DisplayNoneTest.test.ts
DisplayNoneTest
× DisplayNoneDisabledTest (225 ms)
√ DisplayNoneEnabledTest (472 ms)
● DisplayNoneTest › DisplayNoneDisabledTest
expect(received).toMatchSnapshot()
Snapshot name: `DisplayNoneTest DisplayNoneDisabledTest 1`
- Snapshot - 1
+ Received + 1
@@ -52,11 +52,11 @@
"VerticalAlignment": "Stretch",
"Visibility": "Visible",
"XamlType": "Windows.UI.Xaml.Controls.Grid",
"children": [
{
- "Background": "#B3FFFFFF",
+ "Background": "#80F9F9F9",
"BorderBrush": "#FF808080",
"BorderThickness": "1,1,1,1",
"Clip": null,
"CornerRadius": "0,0,0,0",
"FlowDirection": "LeftToRight",
23 | test('DisplayNoneDisabledTest', async () => {
24 | const dump = await dumpVisualTree('textbox-container');
> 25 | expect(dump).toMatchSnapshot();
| ^
26 | });
27 |
28 | /* Test case #2: Enable display:none once, update view*/
at Object.toMatchSnapshot (test/DisplayNoneTest.test.ts:25:18)
at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
› 1 snapshot failed.
Steps To Reproduce
View CI runs here: https://dev.azure.com/ms/react-native-windows/_build?definitionId=468&_a=summary&branchFilter=46671%2C46671
Expected Results
No response
CLI version
17.0.0
Environment
info Fetching system and libraries information...
System:
OS: Windows 10 10.0.20348
CPU: (4) x64 Intel(R) Xeon(R) Platinum 8272CL CPU @ 2.60GHz
Memory: 25.98 GB / 32.00 GB
Binaries:
Node:
version: 18.18.0
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 3.6.1
path: C:\npm\yarn.CMD
npm:
version: 9.8.1
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
Versions:
- 10.0.18362.0
- 10.0.19041.0
- 10.0.20348.0
- 10.0.22000.0
- 10.0.22621.0
- 10.0.26100.0
IDEs:
Android Studio: Not Found
Visual Studio:
- 17.14.36301.6 (Visual Studio Enterprise 2022)
Languages:
Java: Not Found
Ruby: Not Found
npmPackages:
"@react-native-community/cli":
installed: 17.0.0
wanted: 17.0.0
react:
installed: 19.1.0
wanted: 19.1.0
react-native:
installed: 0.80.0-nightly-20250414-70cdf12c4
wanted: 0.80.0-nightly-20250414-70cdf12c4
react-native-windows:
installed: 0.0.0-canary.972
wanted: 0.0.0-canary.972
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Community Modules
No response
Target React Native Architecture
Old Architecture (UWP) Only
Target Platform Version
10.0.22621
Visual Studio Version
Visual Studio 2022
Build Configuration
Release
Snack, code example, screenshot, or link to a repository
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with test/DisplayNoneTest.test.ts and the DisplayNoneDisabledTest snapshot assertion. Run the X86Hermes CI test, compare the expected and received Background values, and determine whether the snapshot should reflect the changed color; done means the test passes consistently in CI.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- ci-cd, testing-qa
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100