gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.79k stars 121 forks source link

Issue with @testing-library after adding Select component from gluestack-ui v.2 #2520

Open SiloSas opened 1 month ago

SiloSas commented 1 month ago

Description

I'm facing an issue where my test fails to find an element by text after I added the Select UI component from gluestack-ui to my React Native component. Before adding the Select, my test works fine.

CodeSandbox/Snack link

https://gitlab.com/Loann/jam-sessions-frontend.git

Steps to reproduce

  1. npm run test
  2. see test failed error
  3. open file components/JamSessionsBanner/JamSessionsBanner.tsx
  4. comment or remove Select component (ligne 88 to 104)
  5. npm run test
  6. see test working

gluestack-ui Version

2

Platform

Other Platform

No response

Additional Information

What I’ve tried:

Ensured that @testing-library/react-native is configured correctly and that the custom render includes the necessary context providers.
I've tried to add waitFor in my test.
The issue seems to arise only after adding the Select component. Without it, everything works as expected.
I've checked the Select rendering and functionality in the app, and it works correctly when manually tested and when render with storybook.

Does anyone know why @testing-library/react-native might not be able to find the text after adding Select?

If you have any insights into why adding Select could cause this issue, or if I'm missing something in the testing setup, I’d appreciate the help!