React-native-testing-library: Testing @react-native-community/picker

[kblankenship1989]

I am using the @react-native-community/picker and cannot access it in any way other than testID. Is there any way outside of this or is this the only solution?

Sample file:

import React from 'react';
import {Picker} from '@react-native-community/picker';

export const PickerTest = () : JSX.Element => (
    <Picker
        accessibilityLabel={'Picker'}
        testID={'picker-label'}
        selectedValue={'java'}
        onValueChange={() => null}
    >
        <Picker.Item label='Java' value='java'/>
        <Picker.Item label='JavaScript' value='js'/>
    </Picker>
);

Sample test file:

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

render(<PickerTest/>).debug();
/*
<View>
        <RNCPicker
          items={
            Array [
              Object {
                "label": "Java",
                "textColor": undefined,
                "value": "java",
              },
              Object {
                "label": "JavaScript",
                "textColor": undefined,
                "value": "js",
              },
            ]
          }
          onChange={[Function anonymous]}
          selectedIndex={0}
          style={
            Array [
              Object {
                "height": 216,
              },
              undefined,
            ]
          }
          testID="picker-label"
        />
      </View>
*/

it('should render a picker item with label text', () => {
    const {getByLabelText} = render(<PickerTest/>);

    expect(getByLabelText('Picker')).toBeTruthy(); // No instance found
});

it('should render a picker item with accessibility text', () => {
    const {getByA11yLabel} = render(<PickerTest/>);

    expect(getByA11yLabel('Picker')).toBeTruthy(); // No instance found
});

it('should render a picker item with test id', () => {
    const {getByTestId} = render(<PickerTest/>);

    expect(getByTestId('picker-label')).toBeTruthy(); // Finds value
});

it('should render a picker item with display value lowercase', () => {
    const {getByDisplayValue} = render(<PickerTest/>);

    expect(getByDisplayValue('java')).toBeTruthy(); // No instance found
});

it('should render a picker item with display value standard case', () => {
    const {getByDisplayValue} = render(<PickerTest/>);

    expect(getByDisplayValue('Java')).toBeTruthy(); // No instance found
});

package.json:

"dependencies": {
    "@react-native-community/picker": "^1.6.6",
    "expo": "~38.0.8",
    "react": "^16.13.1",
    "react-native": "^0.63.2",
  },
  "devDependencies": {
    "@testing-library/jest-native": "^3.3.0",
    "@testing-library/react-native": "^7.0.1",
    "jest-expo": "^38.0.2",
    "typescript": "~3.9.5"
  },

[thymikee]

It's a native component, so it all depends on the mock. I'd say it's fine to use testID in this case. I'd advise testing this part in an end-to-end fashion, rendering whole UI on a simulator, where it's actually accessible.

[kblankenship1989]

It's a native component, so it all depends on the mock. I'd say it's fine to use testID in this case. I'd advise testing this part in an end-to-end fashion, rendering whole UI on a simulator, where it's actually accessible.

Thanks @thymikee for the quick followup. I am currently doing this as part of the End - to - End test but was wondering if this library has a way to do some shallow rendering for Unit Tests or is that mainly handled by just Mocking consumed components? Haven't found a good example for that "shallow" style unit testing

[thymikee]

We don't provide shallow rendering helpers. You can use react-test-renderer directly for that. We don't advise it, because React component lifecycle may (or used to, I can't tell now) differ from what it's actually doing in normal environment.