Can't add testID to Checkbox

[OneHatRepo]

Description

I should be able to add testID to component

CodeSandBox/Snack link

Codesandbox

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

NativeBase Version

3.3.1

Platform

• [X] Android
• [ ] CRA
• [X] Expo
• [X] iOS
• [ ] Next

Other Platform

No response

Additional Information

I'm adding testID to iOS, and accessibilityLabel and accessible to Android. Adding these to the NB Checkbox element does nothing.

[Viraj-10]

Hi @OneHatRepo, Thanks for reporting the issue. We will look into it. if possible please share small code in snack or codesandbox.

[OneHatRepo]

Added codesandbox link

[Viraj-10]

Hi @OneHatRepo, I am assuming you are using @testing-library/react-native.

1. Add inset to NativeBaseProvider as per docs Docs Link.
2. I was able to access value of isChecked using following Code.

import React from 'react';
import { render } from '@testing-library/react-native';
import App from './App';

it('renders correctly', () => {
  const { getByTestId } = render(<App />);
  const checkBox = getByTestId('testme');
  console.log(checkBox.props.isChecked);
  expect(checkBox.props.isChecked).toBe(true);
});

Let me know if it works for you. suggestion you can try

const checkbox = getAllByRole('checkbox');
expect(checkbox[0].props.accessibilityState.checked).toBe(true);

[OneHatRepo]

Viraj-10, I am not using Jest; I am using Appium to inspect the components.

To better explain my situation, I create a new Expo app expo init TestApp

Install NativeBase and its dependencies expo install native-base react-native-safe-area-context react-native-svg

Tweak the App.js file to the following:

import {
	NativeBaseProvider,
	Box,
	Button,
	Checkbox,
} from 'native-base';

export default function App() {
	return (
		<NativeBaseProvider>
			<Box p={20}>
				<Button
					testID="myButton1"
				/>
				<Checkbox
					testID="myCheckbox1"
				/>
			</Box>

		</NativeBaseProvider>
	);
}

Now inspect the components in Appium.

The Button works as expected. It has an "accessibility id" of "myButton1" from the testID

The Checkbox has no such id. It ignores the testID.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[OneHatRepo]

Has this been fixed?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[surajahmed]

This is still a work in progress. We'll update you as soon as we release a new version with these changes. Thanks for your patience.

[Snotax]

We have the same problem. We'd like to test our app with Selenium / Appium and we can't access the checkbox because the testid is on the wrong component in the DOM. (Not on the input) So it's not possible to get the "checked" property.

Is this still WIP ?

[gerzonc]

No news from this yet as of release 3.4.26 PR 😞

[TroyDL]

Any updates on this?

[leangl]

Any updates?

[OneHatRepo]

I don't expect any updates in NativeBase, because (seemingly) all development effort is going into GlueStack.