Detox test gets stuck when lazy property on TabView is set
ruben00james opened this issue · 4 comments
Current behavior
We try to test a screen in our app on which we use a TabView from react-native-tab-view. We have 3 tabs and the first one is selected and open after coming unto the screen. However, the moment we click on the button to navigate to the screen and arrive on the page, our Detox test hangs immediately.
I already found out what causes this problem, and that is the lazy property of the TabView component. The lazy property ensures that scenes are only rendered when they are focused, i.e. when you click on the tab. This makes for a faster loading time and uses less resources, but it is not working with Detox.
So after coming onto the screen with the TabView, the test immediately hangs. The only way to make the test continue and eventually pass, is to click on the other 2 tabs. That way all content within the tabs is loaded which makes the test continue.
The test also continues when i remove the lazy property from the TabView. However, this is not what we want because the lazy loading feature is useful for our users.
Part of the test code
import { expect } from 'detox';
import navigationBar from './pageModels/NavigationBar';
import medicationPage from './pageModels/myMedication/Medication';
import medicationDetailsPage from './pageModels/myMedication/MedicationDetails';
describe('Medication', () => {
it('should show correct information for observable medication', async () => {
await navigationBar().medication.tap();
await medicationPage().tabAll.tap();
await medicationPage().tabRequested.tap();
await medicationPage().tabActive.tap();
await expect(medicationPage().repeatServiceTag).toBeVisible();
await medicationPage().viewMedication.tap();
});
});
Expected behavior
I expected the test to continue and not get stuck after coming onto the screen with the TabView.
Reproduction
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Environment
| package | version |
|---|---|
| react-native-tab-view | 3.1.1 |
| react-native-pager-view | 5.4.4 |
| react-native | 0.65.1 |
| expo | |
| node | 14.18.1 (LTS) |
| npm or yarn | yarn 1.22.11 |
Couldn't find version numbers for the following packages in the issue:
expo
Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.
The versions mentioned in the issue for the following packages differ from the latest versions on npm:
react-native-pager-view(found:5.4.4, latest:5.4.9)react-native(found:0.65.1, latest:0.66.3)
Can you verify that the issue still exists after upgrading to the latest versions of these packages?
Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).
Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.
Couldn't find version numbers for the following packages in the issue:
expo
Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.
The versions mentioned in the issue for the following packages differ from the latest versions on npm:
react-native-pager-view(found:5.4.4, latest:5.4.9)react-native(found:0.65.1, latest:0.66.4)
Can you verify that the issue still exists after upgrading to the latest versions of these packages?
Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.